9、chrome拓展使用动态注入去除页面元素

最新推荐文章于 2024-09-16 13:21:55 发布

原创

最新推荐文章于 2024-09-16 13:21:55 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome拓展开发 #chrome拓展实例 #chrome拓展去广告 #chrome拓展去元素

本文介绍了一个名为 NoAd 的 Chrome 扩展的实现，该扩展用于过滤网页上的广告元素。包括 manifest.json 文件配置，popup.html 和 popup.js 用于用户界面和交互，以及 background.js 和 excute.js 负责实际的广告过滤功能。用户可以选择过滤特定标签、ID 和类名，过滤后的数据存储在浏览器同步存储中，并在用户点击 'start' 按钮时应用过滤规则。同时提供 'reset' 按钮清除设置并重置页面。

一、完整代码

manifest.json

{
	"manifest_version": 2,
	"name": "NoAd",
	"version": "1.0.0",
	"description": "",
	"icons":
	{
		"16": "icon/icon.png",
		"48": "icon/icon.png",
		"128": "icon/icon.png"
	},
	"options_ui":
	{
		"page": "options.html",
		"chrome_style": true
	},

	"background":
	{
		"scripts": ["js/background.js"],
		"persistent": true
	},
	"content_scripts": 
	[
		{
			"matches": ["*://*/*"],
			"js": ["jquery-1.8.3.js","js/content-scripts.js"],
			"run_at": "document_start",
			"all_frames":true
		}
		
	],
	"permissions":["tabs", "http://*/*", "https://*/*","storage"],
	"browser_action":{
		"default_popup": "popup.html"
	},
	"options_ui":
	{
		"chrome_style": true
	}
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/popup.css">

</head>
<body>

<header><h3 class="fonts">Filter Elements</h3></header>
<div class="main fonts border-style">
    <div class="contain" id="tag-contain">
        <label for="img" class="ad">img:
            <input type="checkbox" id="img" class="ad-style" >
        </label>
        <label for="video" class="ad">video:
            <input type="checkbox" id="video" class="ad-style">
        </label>
        <label for="iframe" class="ad">iframe:
            <input type="checkbox" id="iframe" class="ad-style">
        </label>
        <label for="a" class="ad">a:
            <input