前言
简单地说，浏览器插件，可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能：捕捉特定网页的内容，捕捉HTTP报文，捕捉用户浏览动作，改变浏览器地址栏/起始页/书签/Tab等界面元素的行为，与别的站点通信，修改网页内容……给你增加许多想象空间，试想想看，你可以用它来识别一些网站上的广告代码，并直接把这些代码删掉，这样你就不会受到广告的困扰了，没错，如你所愿，这样的插件别人已经开发好了，你可以直接用。不过，也要说浏览器插件的弊端，那就是：会带来一些安全隐患，也可能让你的浏览器变得缓慢甚至不稳定。
快速上手
Coding
1、新建manifest.json文件，所有插件都要有这个文件，这是插件的配置文件，可看作插件的“入口”。
{
"name": "经济指标对比",
"description": "2019年与2018年企业主要经济指标对比",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": [
"jquery.js",
"background.js"
],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "2019年与2018年企业主要经济指标对比"
},
"content_scripts": [{
"matches": [
"http://210.*.*.*/*"
],
"js": [
"content.js"
]
}],
"manifest_version": 2
}
- manifest_version：固定为2
- permissions：允许插件做哪些事情，访问哪些站点
- browser_action：这是一个浏览器级的动作
- default_icon：定义图标
- default_title：定义标题
- background：它在chrome扩展启动的时候就启动了，做着它的事，而且等待着你给他的指令。它没办法控制页面元素，但可以通过content_script告诉它。
- content_scripts：它会被植入到符合匹配的网站页面上，在页面加载完成后执行，可以操作网站页面上的DOM。除了可以加载js，content_scripts里还可以加载CSS文件
- matches：它是用来配置，符合扩展使用的网址。
2、新建background.js文件，在文件监听浏览器的一些事件。
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log('Turning ' + tab.url + ' red!');
//chrome.tabs.executeScript({
// code: 'document.getElementsByClassName("ant-row")[0].appendChild(document.createElement("div"))'
//});
});
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse) {
console.log(objRequest.txt);
sendResponse({'status':200});
});
3、新建content.js文件，负责业务逻辑处理。这里添加了span标签。
var cur_url = document.location.href
if (cur_url.indexOf("http://210.*.*.*/*.html#/*/") > -1) {
var id = cur_url.substr(cur_url.lastIndexOf('/') + 1)
chrome.extension.sendMessage({'id':id}, function(d) {
console.log(d);
});
var row = document.getElementsByClassName("formContainer___3s37N")[0].getElementsByClassName("ant-input-number-input");
for (i=0; i<row.length; i++) {
var node = document.createElement("span");
node.innerText = "test";
row[i].parentNode.appendChild(node);
}
}
4、添加jQuery.js文件
安装插件到浏览器
打开浏览器，输入chrome://extensions，将项目文件夹拖进去即可。
注意：因为是开发环境，所以打包不了插件。
调试
如果没有修改manifest.json文件，进入扩展程序页面，点击刷新按钮即可；如果有修改，则需要重新安装插件。
向background发送请求
chrome.extension.sendMessage({}, callBack);
sendMessage()方法，它有两个参数，第一个要发送的数据，就像post请求一样，第二个是回调函数。如在content_script中，点击一个按钮，将一个字符串发送到background_script。
$(function(){
$("#button").click(function(){
chrome.extension.sendMessage({'txt': '这里是发送的内容'}, function(d){
console.log(d); // 将返回信息打印到控制台里
});
});
})
在background中监听content请求
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){});
- objRequest，即为请求的参数，在上一个例子就是{‘txt’: ‘这里是发送的内容’}，可以通过objRequest.txt来获取内容。其实就是一个字典。
- sendResponse，为返回值方法，可以将数据返回给content_script，那么一个简单的例子就是：
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){
var strText = objRequest.txt;
// 将信息能过Ajax发送到服务器
$.ajax({
url: 'http://www.jgb.cn/',
type: 'POST',
data: {'txt': strText},
dataType: 'json',
}).then(function(){
// 将正确信息返回content_script
sendResponse({'status': 200});
}, function(){
// 将错误信息返回content_script
sendResponse({'status': 500});
});
});