现在要实现一个chrome扩展,其功能是:当打开百度时,将百度的背景换为灰色。
分析功能:当打开一个URL时,对其进行匹配,若是百度,则直接注入js,将背景色修改。希望让扩展显示在地址栏右侧,但不需要弹出气泡界面。
于是,需要使用browser_action,background环境不需要,content_scripts需要。
首先新建一个文件夹,并添加manifest.json和3个文件夹:
1. 制作3个图标,大小分别为16×16、48×48、128×128,作为扩展使用的图标,放在image文件夹下。
2. 在js文件夹下创建一个js文件,命名为content.js,用于content_scripts。
3. content_scripts中希望使用jquery,于是将jquery库放在lib文件夹下。
最终结构如下:
然后修改manifest.json:
{
// 必须字段
"name": "Plugin Template",
"version": "1.0",
"manifest_version": 2,
// 建议字段
"description": "This is atemplate.",
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
// 可选
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Test Template"
},
// 自定义
"content_scripts": [
{
"matches": [
"*://www.baidu.com/*"
],
"js": [
"lib/jquery-3.3.1.min.js",
"js/content.js"
]
}
]
}
其中:
1. 必须字段是必填的。
2. 建议字段可选填。注意icons数组,与添加的png一一对应。
3. 由于要在地址栏右侧显示图标,所以可选字段使用browser_action。不希望点击图标弹出气泡页面,所以不设置其default_popup属性。
4. 由于只需要一个js注入功能,所以自定义字段只需要一个content_scripts,permissions在这里可以省略。content_scripts需要设置mathces属性来匹配百度的页面,然后指定要注入的js。因为要引用jquery库,所以先注入jquery,再注入自定义的content.js。
manifest.json配置完成,接下来需要编写content.js:
var changeBKColor = function() { $("body").css("background-color", "lightgray"); }; changeBKColor();
content.js定义了一个修改body背景色的函数,并调用了它。这样,当js注入到页面且被调用后,页面背景色就会被修改。
打开chrome浏览器并进入扩展程序页面,开启开发者模式,点击加载已解压的扩展程序,选择上面的文件夹。
然后打开百度:
可见背景色已被修改。进入百度学术:
由于百度学术的网址是http://xueshu.baidu.com/,与content_scripts中的matches属性"*://www.baidu.com/*"不符合,所以百度学术并没有被注入js。