Chrome 插件开发之 mainfest.json

前言

Chrome 作为目前最流行的浏览器,备受前端推崇,原因除了其对于前端标准的支持这一大核心原因之外,还有就是其强大的扩展性,基于其开发规范实现的插件如今已经非常庞大,在国内也是欣欣向荣,如天猫开发了大量的扩展,用于检测页面质量以及页面性能,淘宝开发了许多的扩展以供运营工具的优化等等。其强大性不言而喻。

与 Chrome 应用类似,Chrome 扩展主要是用于扩充 Chrome 浏览器的功能。他体现为一些文件的集合,包括前端文件(HTML/CSS/JS),配置文件 manifest.json。主要采用 JavaScript 语言进行编写。个别扩展可能会用到 DLL 和 SO 动态库,不过出于安全以及职责分离的考虑,在后续的标准中,将会被舍弃,这里不再赘述。

Chrome扩展能做的事情:

  • 基于浏览器本身窗口的交互界面
  • 操作用户页面:操作用户页面里的 DOM
  • 管理浏览器:书签,cookie,历史,扩展和应用本身的管理,其中甚至修改 Chrome 的一些默认页面,地址栏关键字等,包括浏览器外观主题都是可以更改的

这里需要着重提一下,前端开发者喜欢的 DevTools 工具,在这里也能进行自定义

  • 网络通信:http,socket,UDP/TCP 等
  • 跨域请求不受限制:
  • 常驻后台运行
  • 数据存储:采用3种方式(localStorage,Web SQL DB,Chrome 提供的存储 API(文件系统))
  • 扩展页面间可进行通信:提供 runtime 相关接口
  • 其他功能:下载、代理、系统信息、媒体库、硬件相关(如 usb 设备操作,串口通信等)和国际化

上面转自Chrome 插件开发简介(一)——开发入门本文就记录下开发插件必备的 mainfest.json 的相关知识,以备后用。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
{
// Required 必须要求部分
"manifest_version": 2, // manifest 版本从 chrome 18 之后都应该是 2, 此处不需要变化
"name": "My Extension", // 名字是插件主要的 identifier
"version": "1.0.3",
// 插件版本号, string, 最多为4个以 dot 分开的 interger, e.g. "3.1.2.4567"
// 版本号不能随意乱写, chrome 的自动更新系统会根据版本号判断是否需要将插件更新至新的版本


// Recommended
"default_locale": "en",
// 如果需要指定不同 locale 使用不同的资源文件, 例如在中国显示中文, 在日本显示为日语等
// 则会在根目录中添加 `_locale` 文件夹;
// 若没有 `_locale` 文件夹, 则不能出现该项配置
"description": "A plain text description",
// 描述插件是干啥的, 描述需要适合在 chrome web store 上显示
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
// 图标可以是1个, 或者多个
// 一般来说最好的方案是提供3个:
// - 128x128: 在从 chrome web store 安装的过程中需要使用, Required
// - 48x48: chrome://extensions 插件管理页面中使用
// - 16x16: 插件页面当做 favicon 使用


// Pick one (or none) - browser_action / page_action
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
// icon 是随意提供多少个, chrome 选取最接近的尺寸, 为了适配不同屏幕, 提供多种尺寸是很实用的
"default_title": "Google Mail", // optional; shown in tooltip
// tooltip, 光标停留在 icon 上时显示
"default_popup": "popup.html" // optional
// 如果有 popup 的页面, 则用户点击图标就会渲染此 HTML 页面
},
// 参考 https://developer.chrome.com/extensions/browserAction
// 如果有 browser_action, 即在 chrome toolbar 的右边添加了一个 icon

"page_action": {...},
// 如果并不是对每个网站页面都需要使用插件, 可以使用 page_action 而不是 browser_action
// browser_action 应用更加广泛
// 如果 page_action 并不应用在当前页面, 会显示灰色



// Optional
"author": ...,
"automation": ...,
"background": {
"scripts": ["background.js"],
// "page": "background.html", // 如果有必要, 也可以指定 background HTML
"persistent": false // Recommended
// 此处设定为 false 为如果这个 process 并没有在运行, 即释放内存和系统资源
},
// 参考: https://developer.chrome.com/extensions/background_pages
// 如字面意思, background 即插件后台 process, 一般不需要 html, 只需要一个 js 文件, 类似一个监听器
// 如果在 browser_action 或者其他情况下 state 变化, 就会告诉 background 来更新 view
"background_page": ...,
"chrome_settings_overrides": {
"homepage": "http://www.homepage.com",
"search_provider": {
"name": "name.__MSG_url_domain__",
"keyword": "keyword.__MSG_url_domain__",
"search_url": "http://www.foo.__MSG_url_domain__/s?q={searchTerms}",
"favicon_url": "http://www.foo.__MSG_url_domain__/favicon.ico",
"suggest_url": "http://www.foo.__MSG_url_domain__/suggest?q={searchTerms}",
"instant_url": "http://www.foo.__MSG_url_domain__/instant?q={searchTerms}",
"image_url": "http://www.foo.__MSG_url_domain__/image?q={searchTerms}",
"search_url_post_params": "search_lang=__MSG_url_domain__",
"suggest_url_post_params": "suggest_lang=__MSG_url_domain__",
"instant_url_post_params": "instant_lang=__MSG_url_domain__",
"image_url_post_params": "image_lang=__MSG_url_domain__",
"alternate_urls": [
"http://www.moo.__MSG_url_domain__/s?q={searchTerms}",
"http://www.noo.__MSG_url_domain__/s?q={searchTerms}"
],
"encoding": "UTF-8",
"is_default": true
},
"startup_pages": ["http://www.startup.com"]
}, // 覆盖 chrome 设定, Homepage, Search Provider, and Startup Pages
"chrome_ui_overrides": {
"bookmarks_ui": {
"remove_bookmark_shortcut": true, // 去掉添加书签的快捷键,
"remove_button": true // 去掉了地址栏右边的 star button, 可以将 browser_action 的 icon 放在此处
}
}, // 覆盖 bookmark ui 设置, 需要 Chrome Dev Release, 较新的 api 吧
"chrome_url_overrides": {
"pageToOverride": "myPage.html"
// 替换页面 HTML/CSS/JS, 可以替换的页面:
// - 书签管理页面 chrome://bookmarks
// - 浏览历史页: chrome://history
// - 新标签页: chrome://newtab
},
"commands": {
// commands API 用来添加快捷键
// 需要在 background page 上添加监听器绑定 handler
"toggle-feature-foo": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y"
},
"description": "Toggle feature foo",
"global": true
// 当 chrome 没有 focus 时也可以生效的快捷键
// 仅限 Ctrl+Shift+[0..9]
},
"_execute_browser_action": {
"suggested_key": {
"windows": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y",
"chromeos": "Ctrl+Shift+U",
"linux": "Ctrl+Shift+J"
}
},
"_execute_page_action": {
"suggested_key": {
"default": "Ctrl+Shift+E",
"windows": "Alt+Shift+P",
"mac": "Alt+Shift+P"
}
},
...
},
"content_capabilities": ...,
// content_scripts 是在当前网页中插入并执行的脚本, 可以对网页进行各种操作
// content_scripts 中可以监听插件发来的 message, 并进行某些操作
// 可以选择是否永远插入, 或者只在一部分网页中 inject
// content_scripts 执行环境称为 isolated world, 和正常页面中的 JS 不在相同环境中
// 保证不同 script 不会冲突, 也不会和网页本身冲突
// 也说明互相无法访问或使用其中的变量或函数
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
// 指定那些页面需要 inject
"css": ["mystyles.css"], // 按照顺序 inject
"js": ["jquery.js", "myscript.js"], // 按照顺序 inject
"run_at": "document_idle", // 什么时候 inject js, "document_start", "document_end", or "document_idle".
}
],
"content_security_policy": "policyString",
// https://developer.chrome.com/extensions/contentSecurityPolicy
"converted_from_user_script": ...,
"current_locale": ...,
"devtools_page": "devtools.html",
// 对 DevTools 的扩展, 例如 React, Redux develop tools
"event_rules": [{...}],
// 添加规则将某些 JS 事件转为 manifest (?)
"externally_connectable": {
// 指定哪些插件/ app/ 网站可以连接到你的插件上
// 此处 ids 指允许连接的其他插件 id
// 注意: 如果不写, 则认为所有其他插件都不能连接
"ids": [
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
...
// 使用 wildcard "*" 允许所有其他插件连接
"*"
],
"matches": ["*://*.example.com/*"]
},
"file_browser_handlers": [...], // 仅能在 Chrome OS 上使用, 对文件的操作
"file_system_provider_capabilities": {
// 仅能在 Chrome OS 上使用, 对文件的操作
"configurable": true,
"multiple_mounts": true,
"source": "network"
},
"homepage_url": "http://path/to/homepage",
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
// 如果有 shared module, 在提供 shared module 的 extension 中则会有 "export"
"incognito": "spanning, split, or not_allowed",
// 隐身模式下, "spanning" -> chrome app, "split" -> ext
"input_components": ...,
"key": "publicKey", // 不怎么需要用到了
"minimum_chrome_version": "versionString", //version 相同
"nacl_modules": [{
"path": "OpenOfficeViewer.nmf",
"mime_type": "application/vnd.oasis.opendocument.spreadsheet"
}], // 使用 Native Client Module 对网络上某种 MIME 类似资源进行操作, 但貌似 deprecated 了, 往 WebAssembly发展了
"oauth2": ...,
"offline_enabled": true,
"omnibox": {
"keyword": "aString"
// 注册一个 keyword显示在 address bar 的前面
// 当用户在 address bar 中输入 keyword 后, 用户就是和插件在交互了
},
"optional_permissions": ["tabs"], // 其他需要的 permission, 在使用 chrome.permissions API 时用到, 并非安装插件时需要
"options_page": "options.html",
// 允许用户进行某些配置来定制插件功能, 并使用 chrome.storage.sync api 来保存设置
"options_ui": {
"chrome_style": true, //默认使用 Chrome user agent stylesheet
"page": "options.html",
"open_in_tab": false // 不建议打开新 tab, 以后会删除此项
}, // 新版配置功能 api, 支持 chrome40 以上, 打开 dialogue, 使用 chrome.runtime.openOptionsPage api 打开 option 页面
"permissions": ["tabs"],
//-> https://developer.chrome.com/extensions/declare_permissions
// 有很多选择, 书签/右键菜单/剪贴板/cookie/下载/....
"platforms": ...,
"plugins": [...],
"requirements": {
"3D": {
"features": ["webgl"]
}
}, // 要求某些可能需要用户安装某些额外的 tech, 例如 webGL
"sandbox": [...], // chrome 57 以上不再允许外部 web 内容
"short_name": "Short Name", // 插件名字简写
"signature": ...,
"spellcheck": ...,
"storage": {
"managed_schema": "schema.json"
}, // 使用 storage.managed api 的话, 需要一个 schema 文件指定存储字段类型等, 类似定义数据库表的 column
"system_indicator": ...,
"tts_engine": {
"voices": [
{
"voice_name": "Alice",
"lang": "en-US",
"gender": "female",
"event_types": ["start", "marker", "end"]
},
{
"voice_name": "Pat",
"lang": "en-US",
"event_types": ["end"]
}
]
}, // text-to-speech(TTS) engine, permission 需要加上 ttsEngine
"update_url": "http://path/to/updateInfo.xml", // 如果不是通过 chrome web store 自动更新插件
"version_name": "aString", // 版本号名称, 如 "1.0 beta", 只是为了展示, 更加描述性
"web_accessible_resources": [...]
// 提供插件pkg中某些资源是当前 web page 可以使用的
// 默认插件中的资源对于网页是 blocked, 需要说明哪些是要使用的 图片/图标/css/js
}

欢迎大家在评论区留下你的想法和感受!

欢迎大家关注知乎专栏:全栈成长之路

也欢迎大家加入学习交流QQ群:637481811

LeviDing wechat
欢迎扫描上方微信公众号,订阅博客获得实时动态!
坚持原创技术分享,您的支持将支持我更好的创作!
  • 本文作者: LeviDing
  • 本文链接: http://www.dingxuewen.com/2017/09/28/mainfest.json/
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请先通过 E-mail 等方式告知,并在文章开头明显位置注明原文链接和作者等相关信息,明确指出修改(如有),谢谢合作!
0%