当然也可以通过属性"page"替换"scripts"来引入.html文件,不过scripts和page只能两选其一,如下所示:
"background": { "page": "background.html" }
顾名思义,可以理解为背景页面脚本,或者直接解释为后台脚本。background用来处理插件本身的一些逻辑,比如插件加载时需要执行的处理,运行中需要统一维护的数据等等,background只会在插件加载的时候运行一次,你可以在这个过程中让它绑定一些运行中的事件。比如background中可以直接访问chrome.browserAction对象来设置和定义browserAction,如:
chrome.browserAction.onClicked.addListener(function(){
......
});
{
"browser_action": {
"default_icon": "icon19.png",
"default_title": "Google Mail",
"default_popup": "popup.html"
}
}
var bg = chrome.extension.getBackgroundPage();
bg.testBG();
chrome.tabs.executeScript(null, {code:"document.body.style.backgroundColor=blue"});
var element = document.body.firstChild;
var div = document.createElement("div");
document.body.insertBefore(div, element);
chrome.tabs.sendRequest(tab.id, data, function(data) {});
chrome.extension.sendRequest(data, function(data) {});
以下是官方文档中的例子:
一次简单的请求
如果你仅仅需要给你自己的扩展的另外一部分发送一个消息(可选的是否得到答复),你可以简单地使用chrome.extension.sendRequest()或者chrome.tabs.sendRequest()方法。这个方法可以帮助你传送一次JSON序列化消息从content script到扩展,反之亦然。如果接受消息的一方存在的话,可选的回调参数允许处理传回来的消息。
像下面这个例子一样,可以从content script 发起一个请求:
contentscript.js
================
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
传递一个请求到扩展很容易,你需要指定哪个标签发起这个请求。下面这个例子展示了如何指定标签发起一个请求。
background.html
===============
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
接受消息的一方,需要启动一个chrome.extension.onRequest事件监听器用来处理消息。这个方法在content script和扩展中都是一样的。这个请求将会保留直到你做出了回应。下面的这个例子是一个很好的做法调用一个空对象请求然后得到答复的例子。
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
小提示:如果多个页面都发起了相同的请求,都在等待答复,只有第一个发起请求的页面会得到响应,其他的将会被忽略。
content script除了跟background可以交互,跟web page本身也可以有信息交互。一方面content script可以直接访问page的dom,同时还可以通过dom的Event来跟页面进行交互。
document.addEventListener("EventName",function() {});
var ev = document.createEvent('HTMLEvents');
ev.initEvent('EventName', false, false);
document.dispatchEvent(ev);
"page_action" : {
"default_icon" : "icon.png",
"default_title" : "Page Action"
}
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (tab.url.indexOf("mail") > -1) {
chrome.pageAction.show(tabId);
}
});
"plugins": [
{ "path": "plugin1.dll", "public": true },
{ "path": "plugin2.dll" }
]
<embedtype="application/x-plugin1"id="pluginId">
<script>
var plugin = document.getElementById("pluginId");
var result = plugin.PluginMethod(); //调用plugin中定义的方法
</script>