chrome插件

目标：去掉HTML上侧标栏的广告

做个Chrome的小插件

本来想做Safari的插件的，但是资料太少，似乎还需要证书……., 还是做个Chrome的算了吧。

必要的文件

Chrome插件必要的是一个manifest.json

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
    // 清单文件的版本，这个必须写，而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "去侧边广告的",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "简单的Chrome扩展demo",    
    "content_scripts": [ {
        "matches": ["<all_urls>"],
        "js": ["jq.js","test.js"],
        "run_at": "document_start"
    } ],
    // 权限申请
    "permissions": [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
    "omnibox": { "keyword" : "go" },
    // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
    "devtools_page": "devtools.html"
}

其中的content_scripts是关键，我们就是通过这个test.js把HTML中的，aside隐藏

test.js代码

1
2
3
4
5
6
7
8
document.addEventListener('DOMContentLoaded', function()
{
    // 为了防止有js控制iframe的显示之类的问题，这里一直循环，有性能考虑的话就去掉
    window.setInterval(function () {
        $("aside").remove();
        $("iframe").remove();
    },1000);
});

此处用了jQuery，所以还需要引用文件

在Chrome中打开开发模式，引入本地已经解压的扩展程序

然后就可以了