4.popup.js。 popup.html引入的js。这里我们用户它的做的事是向content_scripts中发送一个消息。相当于发一个命令。告诉content script,去办事吧。content_scripts的内容在后面,看完再回过来看一次这里。
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
// console.log(response.farewell);
});
});
chrome.tabs.getSelected()这个函数能获取到当前标签的信息对象并传递给回调函数。
5.back.js。也是我们这个插件中的content script。
这个文件是我们插入到当前标签页中运行的代码。它可以访问标签页面中的dom节点。
我们这里用它来是监听消息,消息来了就运行设置标签的函数。操作标签页中的dom节点。
对应配置文件中content_scripts下的back.js。
这个参数中的内容会被加载到当前打开的网页中,可以访问当前标签页的节点。
所以,我们对页面的操作往往会写在这个脚本里。有需要的话甚至可以加载个jQuery到里面。
代码:
function setA(){
var aDoms = document.getElementsByTagName('a');
var len = aDoms.length;
for (var i = 0; i < len; i++) {
aDoms[i].setAttribute("target","_blank")
}
}
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello"){
setA();
// sendResponse({farewell: "goodbye"});
}else{
// sendResponse({});
}
}
);
可能比较要注意的一点是popup.html与content_script之间的通信。
popup.html向标签页中的content_script发送消息。
content_script接收到消息,执行操作。
6.调试方式:
popup.html加载的js调试。
右键点击插件图标,选择审查弹出内容。(或者在弹出框里右键点击检查。)会弹出一个控制台。
点source可以看到我们的html和js资源。