一个插件由一个文件夹及文件夹内的若干文件构成。 插件必须要有一个manifest.json文件。
1 插件体系结构
插件一般包含如下5个组件:
- Manifest
- Background Script
- UI Elements
- Content Script
- Options Page
manifest文件必须要有,其它组件可选。
1.1 manifest 文件
插件的定义文件,命名固定为manifest.json。包含了插件的信息及配置信息,数据格式为json。下面是一个manifest.json定义,其中包含了插件名称,版本等信息。
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
// Recommended
"default_locale": "en",
"description": "A plain text description",
"icons": {...},
// Pick one (or none)
"browser_action": {...},
"page_action": {...},
// Optional
"action": ...,
"author": ...,
"automation": ...,
"background": {
// Recommended
"persistent": false,
// Optional
"service_worker_script":
},
"chrome_settings_overrides": {...},
"chrome_ui_overrides": {
"bookmarks_ui": {
"remove_bookmark_shortcut": true,
"remove_button": true
}
},
"chrome_url_overrides": {...},
"commands": {...},
"content_capabilities": ...,
"content_scripts": [{...}],
"content_security_policy": "policyString",
"converted_from_user_script": ...,
"current_locale": ...,
"declarative_net_request": ...,
"devtools_page": "devtools.html",
"event_rules": [{...}],
"externally_connectable": {
"matches": ["*://*.example.com/*"]
},
"file_browser_handlers": [...],
"file_system_provider_capabilities": {
"configurable": true,
"multiple_mounts": true,
"source": "network"
},
"homepage_url": "http://path/to/homepage",
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
"incognito": "spanning, split, or not_allowed",
"input_components": ...,
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": [...],
"oauth2": ...,
"offline_enabled": true,
"omnibox": {
"keyword": "aString"
},
"optional_permissions": ["tabs"],
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
"permissions": ["tabs"],
"platforms": ...,
"requirements": {...},
"sandbox": [...],
"short_name": "Short Name",
"signature": ...,
"spellcheck": ...,
"storage": {
"managed_schema": "schema.json"
},
"system_indicator": ...,
"tts_engine": {...},
"update_url": "http://path/to/updateInfo.xml",
"version_name": "aString",
"web_accessible_resources": [...]
}
1.2 background script
用来处理事件。包含了浏览器的事件监听器。当浏览器事件产生时,相关处理逻辑被执行。
例如在background脚本处理插件安装完毕的事件。当插件安装完毕后该事件处理方法会被触发,并弹出一个对话框。
manifest.json
{
"name": "extension tutorials",
"version": "1.0",
"description": "learn chrome extension",
"page_action":{
"default_title":"learn chrome browser_action",
"default_popup":"popup.html"
},
"background":{
"scripts": ["background.js"]
},
"manifest_version": 2
}
background.js
chrome.runtime.onInstalled.addListener(function() {
alert("installed");
})
1.3 UI 元素
用来定义了用户界面。例如定义弹出窗口,快捷键等。UI元素可以提升浏览体验。一般都有 browser action 或 page action。但也可以包含其它UI元素。如context menus,omnibox或快捷键。
browser action:可以将图标放置浏览器工具条上。此外还可以设计提示,图标和弹出框。对浏览器所有内所有标签页生效。
page action:可以将图标放置浏览器工具条上。此外还可以增加提示,图标和弹出框。但不是对所有标签页生效。并不对所有标签页可用,仅对满足条件的标签页处于激活状态可用。当处于非激活状态,图标为灰色。
UI界面,例如弹出框,可以包含带有Js脚本的html页面。此外也可以调用tabs.create或window.open来显示html文件。使用了page action和popup弹出框的插件可以使用 declarative content api在background script中来设置规则,确定什么时候弹出框可用。当条件满足的时候,弹出框对用户可用。
1.4 Content script
插件通过Content script来对页面操作,可以修改所访问的页面dom对象,样式等。比如用来修改页面的背景色。
1.5 Options Page
插件的配置选项页面。通过该页面可以对插件功能进行配置。点击插件详情信息 - 扩展程序选项,即可看到这项配置。
2 使用chrome api
除了正常浏览器中使用的页面DOM API,插件还可以使用chrome提供的扩展API。这些api 分异步与同步两种。
2.1 页面间通信
html页面可以通过chrome.extension的方法,如getViews()与getBackgroundPage()找到其它页面对象。此外还可以通过storage API以共享数据的方式通信。
2.2 数据存储与隐身模式
数据存储用到storage API,或者发送请求将数据存放到服务器上。插件无法运行在隐身模式下。所以存储数据前要先检查是否处于隐身模式。可以通过tabs的incognito属性或 windows.Window对象来检测。
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}