1、核心概念 （1）manifest.json 每一个chrome插件都必须有一个JSON格式的清单文件放在根目录。下面是一些常见的配置项，其中manifest_version、name、version为三个必填项。 { // 必须 "manifest_version": 2, // 清单文件的版本，必须为2 "name": "插件名称", "version": "1.0.0",
// 推荐
"default_locale": "en",
"description": "插件描述",
"icons": {...}, // 图标
// 可选
"background":{
"page": "background.html" // 指定后台页面
"scripts": ["js/background.js"] // 指定后台脚本
"persistent": false // 推荐设置后台脚本为非持久
},
"browser_action": { // 工具栏图标（或page_action）
"default_icon": "icon.png",
"default_title": "图标标题",// 图标悬停时的标题，可选
"default_popup": "popup.html"
},
"content_scripts": // 插入网页的脚本
[
{
"matches": ["http://*/*", "https://*/*"], // 匹配页面url，<all_urls> 表示匹配所有地址
"js": ["content.js"], // 多个JS按顺序注入
"css": ["css/custom.css"],
"run_at": "document_start"// 代码注入的时间，可选值： "document_start", "document_end", "document_idle"，最后一个表示页面空闲时，默认document_idle
},
{...}, // 可以配置多个规则
],
"permissions": // 权限申请
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"storage", // 插件本地存储
],
"default_locale": "zh_CN", // 默认语言
"devtools_page": "devtools.html"// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
} 复制代码（2）content_script 通过content_script，我们可以向指定页面注入JS或CSS。它与插入的页面共享dom，即脚本中使用的window对象与页面中的window对象一致。 content_script可以使用如下几种chrome APIs
i18n storage runtime（connect, getManifest, getURL, id, onConnect, onMessage, sendMessage)
（3）background background是一个运行与浏览器的后台脚本/页面，与当前浏览页面无关。在配置中，可以通过page引入页面，或通过scripts引入JS文件。 通过设置persistent为false，我们可以让background在需要时被加载，在空闲时被卸载，从而释放系统资源。唯一保持后台脚本持续活动的情况是扩展使用chrome.webRequest API来阻止或修改网络请求。webRequest API与非持久性后台页面不兼容。 （4）popup popup是点击浏览器工具栏上小图标打开的窗口，焦点离开页面即关闭，可做临时性交互。右键后点击“检查”可开启开发者工具进行调试。 可以通过browser_action与page_action进行设置。browser_action可作用于任何页面，page_aciton可作用与部分页面。如vue tools插件，当检测到页面没有使用vue时，插件图标显示为不可用。
作者：饿了么新餐饮前端团队 链接：juejin.cn/post/684490… 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文由一文多发运营工具平台 EaseWrite 发布
