1、插件文件结构
1.1、manifest.json
每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息。
一个最基本的配置例子:
{
"name": "browser action demo",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "开关灯",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"page": "background.html"
},
"manifest_version": 2
}
1.2、popup
插件的弹窗,上面配置中的browser_action中default_popup就是这个页面。
1.3、background page
绝大多数应用都包含一个背景页面(background page),用来执行应用的主要功能。
1.4、Content scripts
通过content script可以使应用和web页面交互,content script是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将content script看做是网页的一部分,而不是它所在的应用的一部分。
2、文件之间的交互
popup弹窗中可以直接调用背景页面中的函数。
Content script可以读取并修改当前web页面的dom树,但是它并不能修改它所在应用的背景页面(background)的dom树。
Content script与应用之间的交互:可以互相发送消息
3、为web页面注入JS(Content scripts)文件:
方法一,在manifest.json文件中配置:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
方法二,通过executeScript():
向页面注入JavaScript 脚本执行。
chrome.tabs.executeScript(integer tabId, object details, function callback)
chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});