参考
Manifest文件
每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件,叫manifest.json,里面提供了重要的信息 。
字段说明
下面的JSON示例了manifest支持的字段,每个字段都有连接指向专有的说明。必须的字段只有:name和version。
{
// 必须的字段
"name": "My Extension",
"version": "versionString",
"manifest_version": 3,
// 建议提供的字段
"description": "A plain text description",
"icons": { ... },
"default_locale": "en",
"action": {...},
"theme": {...},
"app": {...},
// 根据需要提供
"background": {...},
"chrome_url_overrides": {...},
"content_scripts": [...],
"content_security_policy": "policyString",
"file_browser_handlers": [...],
"homepage_url": "http://path/to/homepage",
"incognito": "spanning" or "split",
"intents": {...}
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": [...],
"offline_enabled": true,
"omnibox": { "keyword": "aString" },
"options_page": "aFile.html",
"permissions": [...],
"plugins": [...],
"requirements": {...},
"update_url": "http://path/to/updateInfo.xml",
"web_accessible_resources": [...]
}
name
扩展的名称
version
扩展的版本,扩展的版本用一个到四个的数字表示,中间用点隔开。跟大部分的版本要求一致
自动升级系统将比较版本来确定一个已经安装的扩展是否需要升级。如果一个发布的扩展有一个更新的版本字符串,比一个安装的扩展,这个扩展将自动升级。
manifest_version
用整数表示manifest文件自身格式的版本号。现在要求版本为3,版本2将在2023年废弃,新开发的插件已经不能使用2
"manifest_version": 3
description
扩展的描述
icons
个或者多个图标来表示扩展,app,和皮肤。你通常可以提供一个128x128的图标,这个图标将在webstore安装时候使用。扩展需要一个48x48的图标,扩展管理页面需要这个图标。同时,你还可以提供给一个16x16的图标作为扩页面的fa网页图标 。
图标要求是png格式,因为png格式是对透明支持最好的
"icons":
{
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
default_locale
默认语言,中文应该是cn
,英文是en
"default_locale": "en",
theme
扩展的主题,后面学习到了再说
permissions
扩展或app将使用到的权限。每个权限是一列已知字符串列表中的一个,例如:
"permissions":
[
"tabs",
"bookmarks",
"http://www.blogger.com/",
"http://*.google.com/",
"unlimitedStorage"
],
权限 | 描述 |
---|---|
match pattern | 指定HOST权限。如果扩展希望与页面上运行的代码交互,则需要。许多扩展功能,如跨源XMLHttp请求、以编程方式注入的内容脚本和Cookie API,都需要主机权限。有关语法的详细信息,请参见匹配模式。 |
background | 后台权限,只要浏览器运行,扩展也会运行 |
bookmarks | 如果扩展使用chrome,则需要。书签模块。 |
“chrome://favicon/” | 没太看懂翻译,具体内容见:权限 |
contextMenus | 如果扩展使用chrome,则需要。上下文菜单模块。 |
cookies | 如果扩展使用chrome,则需要。cookies模块。 |
experimental | 如果扩展使用任何chrome,则需要。实验。*API。 |
geolocation | 允许扩展使用建议的HTML5地理定位API,而无需提示用户许可。 |
history | 如果扩展使用chrome,则需要。历史模块。 |
idle | 如果扩展使用chrome,则需要。空闲模块。 |
management | 如果扩展使用chrome,则需要。管理模块。 |
notifications | 允许扩展使用建议的HTML5通知API,而无需调用权限方法(如检查权限)。有关详细信息,请参阅桌面通知。 |
tabs | 如果扩展使用chrome,则需要。标签或windows模块。 |
unlimitedStorage | 为存储HTML5客户端数据(如数据库和本地存储文件)提供无限配额。没有此权限,扩展限制为5 MB的本地存储。注意:此权限仅适用于Web SQL数据库和应用程序缓存 |
actions
这样的Google Chrome扩展可以适用于任何页面。图标往往位于浏览器地址栏外右侧。点击图标将弹出窗口。
"action": {
//指定点击图标,打开的页面
"default_popup": "hello.html",
//指定显示的图标
"default_icon": "hello_extensions.png"
}
现在 manifest_version
3版本只有 action
了,原来的 browser_action
和 page_action
已经废弃
其它属性暂时用不到,后面用到了,再具体学习。
Hello World 案例
- 创建一个目录,用来放扩展的代码和资源
- 创建manifest.json,内容如下
{
"name": "Hello World",
"description": "Hello world Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
- 在该目录下创建
hello.html
和引入图标文件 - 在浏览器里加载,我这里用的是edge浏览器
打包
成功之后会生成下面两个文件
第一个就是我们熟悉的扩展文件,第二个文件打开看了一下应该是密钥之类的东西
打包后的扩展文件直接在浏览器的扩展界面拖进来即可加载