Chrome插件开发学习心得（五）之注入脚本

时隔一年多，最近又在做一个插件，发现之前整理的，最“流氓”的地方并且最好用的地方还没有整理，这就是注入脚本，因为浏览器的同源原则，所以就有跨域等问题，同时比如你想往网页嵌入脚本很难实现。但是，当你用插件的时候，你就会发现，so easy。你可以轻轻松松的往任何网页里面注入JS代码并且执行。

chrome.tabs

使用 chrome.tabs API 与浏览器的标签页系统交互。您可以使用该 API 创建、修改和重新排列浏览器中的标签页。换言之就是操控页面。

页面注入JS代码

首先要申明权限permissions，前面一个插件能执行的网页，第二个是操作网页的权限

{
"name": "demo",
"version": "1.0",
"manifest_version": 2,
"description": "demo",
"browser_action": {
"default_icon": "ly.png",
"default_popup": "Popup.html"
},
"background":{"scripts":["background.js"]},
"permissions": [
"*://*/*","tabs"
]
}

在background.js里面加上

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if(changeInfo.status === 'complete')
{
chrome.tabs.executeScript(tabId, {code:"alert(1111);"});
}
});

解释下就是，先添加一个事件，当tab页面刷新时候触发，然后通过tabId找到页面id，注入code里面的JS代码（PS:if判断的原因最后会解释），访问CSDN效果图



这时候大家就会问了，如果JS代码太多了怎么办，没关系，这里可以引用JS文件

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if(changeInfo.status === 'complete')
{
chrome.tabs.executeScript(tabId, {file: "rule.js"});
}
});

页面注入JS代码

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if(changeInfo.status === 'complete')
{
chrome.tabs..insertCSS(tabId, {file: "rule.css"});
}
});

这里就和上面相同，就不多做解释了，其中参数不止file，code两项，还有其他allFrames是否所有iframe都执行等等，这个大家可以去看官方文档，写的很详细，这里就不多说了。

这样是不是发现可以干很多事了，比如做网页表单的自动填充，自定义规则去除网页广告，自动操作脚本等等，当然，我不会告诉你可以获取用户cookie干坏事，这个权限是很大的，使用要慎重。这里有个问题，如果是https网页，里面注入的异步一定是https的接口，这个大家应该很容易理解。

还有就是不同源的问题，就是说，你注入的js和页面原本的js不共用的，相当于两个独立的盒子，唯一共享的就是dom树。比如你用到jquery，你必须自己引用，页面的jquery你是不能使用的

PS：

上面那个判断的原因，当页面刷新时，会四次触发update事件，也就是说会执行四次脚本，这个其实没有意义的，下面是changeInfo四次返回的参数



第一次是状态loading

第二次是网站的图标

第三次是网页标题

第四次是状态complate

所以这里加上了判断