大家好,又见面了,我是你们的朋友全栈君。
💥 当前文档基于 manifest v2, 最新版的 manifest v3 有很大不同,建议查看官方文档
manifest.json 用于描述 Chrome 插件的源数据,配置信息等,基本内容如下
{
"name": "名称",
"description": "描述",
"version": "打包完成后用于判断插件是否需要更新",
"manifest_version": 2,
"browser_action": {
"default_popup": "xxx.html 右上角点击后的弹窗,可以用一个页面定义",
"default_icon": "xxx.png 显示在右上角的图标button"
},
}
manifest_version
必填清单文件格式的版本, Chrome 18 开发 写
2
即可
name
必填插件名称
version
必填插件版本,发布新版本后,浏览器会比较其已安装的插件的版本,有更新的版本则会自动更新
description
插件的描述,132个字符限制
icons
插件的图标,可以用在 Chrome 商店展示(128 * 128) | 插件管理界面 (48 * 48) | 扩展页图标 (16 * 16) 最好是 png 格式
browser_action
可以用来定义点击图标后展示的窗口,对应接口
chrome.browserAction
,这项配置与page_action
是对立的,只能二选一,以下是browser_action
子项的配置
default_icon: Object | string
一个或者一组图标的路径default_title
设置 tooltipdefault_popup
指定弹出的窗口,可以是任意 htmlpage_action
代表可以在当前页面执行的操作,不活动时显示灰色,对应接口
chrome.pageAction
default_icon: Object | string
一个或者一组图标的路径pageAction.(show|hide)
改变插件活动状态
browser_action
和page_action
都用来定义放置在工具栏右上角的图标点击情况,但是两者的活动状态展示 | 点击后的展示 | 主要负责场景是不一致的猜测
browser_action
适用于用户需要点击图标后在弹窗中操作的场景page_action
试用与在后台运行,重要工作是监听用户行为的插件官方建议:如果要实现的功能只针对某一个页面有用则建议使用
page_action
否则使用browser_action
background
用来定义后台脚本部分
扩展是基于事件的程序,这些事件包括导航到新页面、删除书签、或者关闭选项卡,扩展在他们的后台脚本中监视这些事件,然后用指定的指令进行响应
关于后台脚本的状态
以下情况会需要调用到后台脚本
content_script
或者其他扩展中调用了 sendMessage后台脚本定义选项
{
...
"background": {
"scripts": ["bg1.js", "bg2.js"], // 后台脚本可以注册多个
"persistent": false // 是否是持久的,一般为 false, 某些特殊情况需要参考文档
}
}
事件过滤器,有些事件支持事件过滤,比如选项卡的切换可以监听
// background.js
chrome.webNavigation.onCompleted.addListener(function () {
}, {
url: [{
urlMatches: 'http://www.baidu.com'}] // 过滤
});
chrome_settings_overrides
配置,详细配置查看文档chrome_ui_overrides
配置,详细配置查看文档,可以设置一些书签方面的规则chrome_url_overrides
配置,详细配置查看文档,标签页、历史页、新 tab 都可替换commands
可以通过
commands
选项定义触发扩展事件的快捷键
{
...,
commands: {
"xxx": {
"suggested_key": {
"default": "Ctrl+X",
"mac": "Command+X",
"windows": "Ctrl+X"
}
},
"_execute_browser_action": {...},
"_execute_page_action": {...}
}
}
操作快捷键后,插件后台会监听到对应的事件
// background.js
chrome.commands.onCommand.addListener(function(command) {
});
注意:
\ _execute_browser_action
\ _execute_page_action
这两个命令不会被监听,他们是触发 popup 弹出的,要监听 窗口弹出事件可以使用 popup_page 的onDomReady
content_scripts
content_script
在一个特殊的环境中运行,可以称之为隔离环境,在这里可以访问所注入页面的DOM,但是不能访问里边的任何 javascript 变量和函数,反之,页面中的js 也不能访问content_script
中的变量和函数访问目标网站的 DOM ,可以用来进行通信
分为两种情况,一种是声明型注入脚本,使用
content_scripts
配置项,另一种是编程方式注入使用permissions: ["activeTab"]
选项,
content_scripts
值可以是一个数组,设置不同站点的不同注入文件 matches: ["http://"]
指定匹配的网址,js
设置注入脚本css
设置注入样式run_at
定义注入要本的时机 document_idle
表示浏览器帮你把握时机,会在 DOM 完成 与 window.onload 之后注入;document_start
在 CSS 注入之后,其他任何脚本或者 DOM 之前注入;document.end
DOM 完成之后立即注入,但是在图像等资源之前permissions: ["tabs"]
编程方式注入会在 chrome.tabs.executeScript(tabId, details, callback)
接口中详细介绍通信案例,通过 content_script 与页面 共享 DOM,来实现页面与扩展间的通信
// page.js 页面中触发一个postMessage
document.getElementById('btn').addEventListener('click', () => {
window.postMessage({
type: 'TO_CONNECT_EXTERNAL', data: 'data'});
})
// content_script.js 中做中转
var port = chrome.runtime.connect();
window.addEventListener('message', (e) => {
if (e.source !== window) {
return};
if (event.data.type && (event.data.type == "FROM_PAGE")) {
port.postMessage(event.data.data); // 发消息给扩展
}
}, false);
externally_connectable
这项配置直接实现网站与插件间通信,但是需要在 manifest.json 中作出如下配置
{
"externally_connectable": {
"matches": ["http://*.xx.com"] // 只有匹配的网站才可以通信
}
}
// page.js 中发出请求
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
chrome.runtime.sendMessage(
editorExtensionId,
{
type: 'MsgFromPage', msg: 'Hello, I am page~'},
function(response) {
console.log(response);
}
);
// background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
// 可以针对sender做一些白名单检查
// sendResponse返回响应
if (request.type == 'MsgFromPage') {
sendResponse({
tyep: 'MsgFromChrome', msg: 'Hello, I am chrome extension~'});
}
});
offline_enabled
扩展是否需要离线工作,默认为 true, 当chrome 检测到离线时,程序会被高亮显示
permissions
| optional_permissions
声明 权限(插件实现基础功能所需要的) | 可选权限 (插件中可选的特性所需要的),两者的子配置项是一样的
选项的值是一个数组,代表每一个权限,权限可以是已知的权限字符串 也可以是一个主机的匹配模式 权限字符串大多都对应着一个同名的
chrome[permissionName]
API,全部的权限字符串可以点击上边链接查看,一下列出常用的权限
activeTab
允许用户在调用扩展时临时访问当前活动的选项卡,background
后台权限,可以用来增加Chrome 运行时间,即开机即运行(虽然是不可见的)bookmarks
书签操作权限browsingData
浏览器数据操作权限,主要用来清除浏览器数据 cookie storage 等contentSettings
浏览器设置权限contextMenus
上下文菜单添加权限cookies
cookie 的查询、修改、onChange 监听history
浏览器历史记录操作权限storage
chrome.storage 的使用权限(注意不是浏览器的 localStorage)tabs
选项卡权限,允许创建、修改、重新排列选项卡webNavigation
请求进行过程中的操作权限webRequest
| webRequestBlocking
开放 正在运行请求的 拦截、阻塞、或修改的权限web_accessible_resources
指定打包资源的的路径字符串数组,这些资源是在扩展中是可用了,例如
content_script
会用到的资源等,
content_security_policy
内容安全策略, 默认的安全策略为
script-src 'self'; object-src 'self'
他会有如下限制
<script>
块和内联事件处理程序(例如,<button onclick="…">
)可以通过 白名单 使用通配符设置哪些外部资源是可以访问的(仅支持 https),如下
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/128164.html原文链接:https://javaforall.cn