本文旨在数控系统解密，如果需要深入开发，可以去 chrome 官网进行学习。
官方提供的了一个修改网页背景颜色的demo，可以点击下载，如果你的下载有问题可以去 github
本文将会列举一些常用的概念说明，包含 5种js 类型对比、 6个核心、消息通信和一些动态化注入、打包发布等。
本文最后会列举一个将页面变为暗黑模式的 chrome demo
demo 演示效果如下：
通过上面的展示效果大家会发现有个小细节，就是在 jd.com tab页面时，插件是会高亮展示，在其他 tab 页面颜色会置灰，这是怎么实现的呢，后面的 demo 会为大家进行解析
什么是 chrome 插件？
本文讲的 chrome 插件真正的叫法应该是 chrome 扩展(Chrome Extension), 真正的插件是指更底层浏览器功能扩展，可能需要对chrome 源码有一定的了解才能去开发。
本文的 chrome 插件是指我们日常使用的一些 chrome 扩展插件。
Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
复制代码Chrome Extension 是可以定制浏览体验的小型软件程序。它们使用户可以根据个人需要或偏好来定制 Chrome 功能和行为。它基于Web技术（例如HTML，JavaScript和CSS）构建。
为什么要学习 Chrome Extension 开发呢？
会了 Chrome Extension 开发，可以方便我们定制属于自己的浏览器，增强一些浏览器功能，加强自己学习能力，也可以对我们的业务有一些其他方面的思考。
技多不压身，多会点，说不定你再找下一家公司的时候，会多一些技术点。
6 个核心
6 个核心概念包括 Manifest Format、Manage Events、Design User Interface、Content Scripts、Declare Permissions and Warn Users、 Give Users Options
Manifest Format - 官方文档
每个数控系统解密都有一个 JSON 格式的清单文件，名为 manifest.json，提供重要信息。
用来配置所有和插件相关的配置，必须放在项目根目录下面。
简单配置如下所示
{
“name”: “TimeStone”,
“manifest_version”: 2,
“version”: “1.0”,
“description”: “TimeStone 扩展程序”,
“page_action”: {
“default_icon”: “images/icon.png”,
“default_title”: “TimeStone 插件”,
“default_popup”: “html/home.html”
},
“background”: {
“scripts”: [“js/background.js”]
},
“options_page”: “html/options.html”,
“homepage_url”: “https://juejin.im/user/5940a1d2fe88c2006a44b609”,
“permissions”: [
“tabs”,
“storage”,
“activeTab”
]
}
复制代码配置介绍如下：
【注意】必须要有加粗标识，推荐使用有高亮
manifest_version - 必须要有，还只能是2
name - 插件名称
version - 版本号
description - 描述
icons - 图标
homepage_url - 插件主页，哈哈，我一般设置为自己掘金主页
background - 会一直常驻的后台JS或后台页面,有两种指定方式"background":
{
// 2种指定方式，如果指定JS，那么会自动生成一个背景页
“page”: “background.html”
//“scripts”: [“js/background.js”]
}
复制代码
browser_action、page_action、app - 浏览器右上角展示，三则只能选其一"browser_action":
{
“default_icon”: “img/icon.png”,
// 图标悬停时的标题，可选
“default_title”: “这是一个示例Chrome插件”,
“default_popup”: “popup.html”
}
“page_action”:
{
“default_icon”: “img/icon.png”,
“default_title”: “我是pageAction”,
“default_popup”: “popup.html”
}
复制代码
permissions - 插件权限申请设置"permissions":
[
“contextMenus”, // 右键菜单
“tabs”, // 标签
“notifications”, // 通知
“webRequest”, // web请求
“webRequestBlocking”,
“storage”, // 插件本地存储
]
复制代码
web_accessible_resources - 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
chrome_url_overrides - 覆盖浏览器默认页面
options_ui - 插件配置页写法
omnibox - 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字"omnibox": { “keyword” : “rick” }
复制代码
default_locale - 默认语言
devtools_page - devtools页面入口，注意只能指向一个 HTML 文件，不能是 JS 文件
Manage Events with Background Scripts（使用后台脚本管理事件） - 官方文档
Chrome Ex 是基于事件的程序，用于修改或增强 Chrome 浏览器的体验，事件是浏览器触发器，例如，导航到新页面，删除书签或关闭选项卡。扩展程序在其后台脚本中监视这些事件，然后按照指定的指示进行响应。
后台页面在需要时被加载，而在空闲时被卸载。事件的一些示例包括：
该扩展程序首先安装或更新为新版本。
后台页面正在监听事件，并且已调度该事件。
内容脚本或其他扩展 发送消息。
程序中的另一个视图（例如弹出窗口）调用 runtime.getBackgroundPage。
有效的后台脚本将保持休眠状态，直到事件监听火灾，对指定指令做出反应然后卸载为止。
注册后台脚本（Register Background Scripts）
在 manifest.json 中进行配置，如下
{
“name”: “Awesome Test Extension”,
…
“background”: {
“scripts”: [“js/background.js”],
“persistent”: false
},
…
}
复制代码初始化扩展
监听 runtime.onInstalled 事件,使用此事件可以设置状态或进行一次初始化.例如上下文菜单。
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
“id”: “sampleContextMenu”,
“title”: “Sample Context Menu”,
“contexts”: [“selection”]
});
});
复制代码设置监听器
围绕扩展依赖的事件构建背景脚本。定义功能上相关的事件可使后台脚本处于休眠状态，直到这些事件被触发为止，并防止扩展错过重要的触发器。
侦听器必须从页面开始同步注册。
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
“id”: “sampleContextMenu”,
“title”: “Sample Context Menu”,
“contexts”: [“selection”]
});
});
// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(function() {
// do something
});
复制代码不要异步注册侦听器，因为它们不会被正确触发。
chrome.runtime.onInstalled.addListener(function() {
// ERROR! Events must be registered synchronously from the start of
// the page.
chrome.bookmarks.onCreated.addListener(function() {
// do something
});
});
复制代码扩展程序可以通过调用将侦听器从其后台脚本中删除 removeListener。如果事件的所有侦听器都被删除，Chrome将不再为该事件加载扩展程序的后台脚本。
chrome.runtime.onMessage.addListener(function(message, sender, reply) {
chrome.runtime.onMessage.removeListener(event);
});
复制代码筛选事件
使用支持事件过滤器的 API 将侦听器限制在扩展关心的情况下。如果扩展程序正在监听 tabs.onUpdated 事件，请尝试使用 webNavigation.onCompleted 带有过滤器的事件，因为tabs API不支持过滤器。
chrome.webNavigation.onCompleted.addListener(function() {
alert(“This is my favorite website!”);
}, {url: [{urlMatches : ‘https://www.google.com/’}]});
复制代码响应事件
事件触发后，存在侦听器可以触发功能。要对事件做出反应，请在侦听器事件内部构造所需的反应。
chrome.runtime.onMessage.addListener(function(message, callback) {
if (message.data == “setAlarm”) {
chrome.alarms.create({delayInMinutes: 5})
} else if (message.data == “runLogic”) {
chrome.tabs.executeScript({file: ‘logic.js’});
} else if (message.data == “changeColor”) {
chrome.tabs.executeScript(
{code: ‘document.body.style.backgroundColor=“orange”’});
};
});
复制代码卸载后台脚本
数据应定期保存，以免重要信息丢失而导致扩展名崩溃而无法接收 onSuspend。使用storage API可以帮助完成此任务。
chrome.storage.local.set({variable: variableInformation});
复制代码如果扩展使用消息传递，请确保所有端口均已关闭。在关闭所有消息端口之前，后台脚本不会卸载。侦听runtime.Port.onDisconnect事件将提供有关打开的端口何时关闭的见解。使用runtime.Port.disconnect手动关闭它们。
chrome.runtime.onMessage.addListener(function(message, callback) {
if (message == ‘hello’) {
sendResponse({greeting: ‘welcome!’})
} else if (message == ‘goodbye’) {
chrome.runtime.Port.disconnect();
}
});
复制代码通过监视扩展的条目何时从Chrome的任务管理器中出现和消失，可以观察到后台脚本的寿命。
点击Chrome菜单，将鼠标悬停在更多工具上，然后选择“任务管理器”，即可打开任务管理器。
几秒钟不活动后，后台脚本会自行卸载。如果需要最后一分钟的清理，请收听runtime.onSuspend事件。
chrome.runtime.onSuspend.addListener(function() {
console.log(“Unloading.”);
chrome.browserAction.setBadgeText({text: “”});
});
复制代码但是，与相比，应首选持久数据runtime.onSuspend。它不允许进行尽可能多的清理，并且在崩溃时没有帮助。
Design User Interface - 官方文档
扩展用户界面应有目的且最少。就像扩展本身一样，UI应该自定义或增强浏览体验，而不会分散注意力。
在所有页面上激活扩展名
当扩展程序的功能在大多数情况下可用时， 请使用browser_action。
在 manifest.json 注册 browser_action
{
“name”: “My Awesome browser_action Extension”,
…
“browser_action”: {
…
}
…
}
复制代码声明时"browser_action"，图标保持彩色，表示扩展名可供用户使用。
Add a badge
所谓badge就是在图标上显示一些文本，在浏览器图标上方显示一个彩色横幅，最多包含四个字符。它们只能由"browser_action"在其清单中声明的扩展使用 。
通过调用设置徽章的文本，通过调用 设置横幅的颜色 。 chrome.browserAction.setBadgeText chrome.browserAction.setBadgeBackgroundColor
在所选页面上激活扩展
当扩展程序的功能仅在定义的情况下可用时， 请使用 page_action。
在 manifest.json 注册 page_action {
“name”: “My Awesome page_action Extension”,
…
“page_action”: {
…
}
…
}
复制代码"page_action" 仅当扩展名对用户可用时， 声明才会使图标变色，否则它将以灰度显示。
定义激活扩展的规则
通过 在后台脚本中chrome.declarativeContent 的runtime.onInstalled侦听器下调用， 定义何时可以使用扩展的规则 。通过URL 进行的页面操作示例扩展设置了一个条件，即该URL必须包含“ g”。如果满足条件，则分机呼叫。 declarativeContent.ShowPageAction()
[注意]: 这里就是回答在 jd.com tab页面时，插件是会高亮展示，在其他 tab 页面颜色会置灰
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules …
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule …
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page’s URL contains a ‘g’ …
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: ‘jd.com’ },
})
],
// And shows the extension’s page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
复制代码
启用或禁用扩展
扩展程序使用 “page_action” 可以通过调用pageAction.show和来 动态激活和禁用 pageAction.hide。
该 MAPPY 样本扩展扫描网页的地址，并显示在静态地图上的位置弹出。由于扩展名取决于页面内容，因此无法声明规则来预测哪些页面将是相关的。相反，如果在页面上找到地址，它将调用 pageAction.show 以使图标变色并发出该扩展名在该选项卡上可用的信号。
chrome.runtime.onMessage.addListener(function(req, sender) {
chrome.storage.local.set({‘address’: req.address})
chrome.pageAction.show(sender.tab.id);
chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});
复制代码
提供扩展图标
扩展程序至少需要一个图标来表示它。尽管可以接受WebKit支持的任何格式，包括BMP，GIF，ICO和JPEG，但以PNG格式提供的图标可以提供最佳的视觉效果。
指定工具栏图标
工具栏特定的图标注册在manifest.json "default_icon"下 browser_action或 page_action清单中的 字段 中。鼓励包括多个尺寸以适应16倾角空间。建议至少使用16x16和32x32尺寸。
{
“name”: “My Awesome page_action Extension”,
…
“page_action”: {
“default_icon”: {
“16”: “extension_toolbar_icon16.png”,
“32”: “extension_toolbar_icon32.png”
}
}
…
}
复制代码所有图标应为正方形，否则可能会变形。如果没有提供图标，则Chrome会将通用图标添加到工具栏。
创建并注册其他图标 - 在工具栏外使用以下尺寸的其他图标。
图标大小
图标使用
16x16
扩展页面上的网站图标
32x32
Windows计算机通常需要此大小。提供此选项将防止尺寸失真缩小48x48选项。
48x48
显示在扩展程序管理页面上
128x128
显示在安装中和Chrome Webstore中
{
“name”: “My Awesome Extension”,
…
“icons”: {
“16”: “extension_icon16.png”,
“32”: “extension_icon32.png”,
“48”: “extension_icon48.png”,
“128”: “extension_icon128.png”
}
…
}
复制代码
其他UI功能
Popup
弹出窗口是一个HTML文件，当用户单击工具栏图标时，它将显示在特殊窗口中。弹出窗口的工作原理与网页非常相似；它可以包含指向样式表和脚本标签的链接，但不允许内联JavaScript。
Drink Water Event 示例弹出窗口显示可用的计时器选项。用户通过单击提供的按钮之一来设置警报。
Sample Second 15 Minutes 30 Minutes Cancel Alarm 复制代码上面的设置可以在 browser_action 或者 page_action 中生命 { "name": "Drink Water Event", ... "browser_action": { "default_popup": "popup.html" } ... } 复制代码也可以通过调用或 来动态设置弹出窗口 。browserAction.setPopup、 pageAction.setPopup chrome.storage.local.get('signed_in', function(data) { if (data.signed_in) { chrome.browserAction.setPopup({popup: 'popup.html'}); } else { chrome.browserAction.setPopup({popup: 'popup_sign_in.html'}); } }); 复制代码 Tooltip - 将鼠标悬停在浏览器图标上时，请使用 Tooptip 向用户提供简短说明或说明。
Tooltip 提示已在"default_title"字段 browser_action或 page_action中注册。
{
“name”: “Tab Flipper”,
…
“browser_action”: {
“default_title”: “Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs”
}
…
}
复制代码Tooltips 的内容也可以通过方法进行更新 browserAction.setTitle and pageAction.setTitle.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: “You are on tab:” + tab.id});
});
复制代码
Omnibox
用户可以通过多功能框调用扩展功能 。将数控系统解密的"omnibox"字段包括在清单中并指定关键字。在 网址列新标签搜索 样本扩展使用“NT”为关键字。
{
“name”: “Omnibox New Tab Search”,
…
“omnibox”: { “keyword” : “nt” },
“default_icon”: {
“16”: “newtab_search16.png”,
“32”: “newtab_search32.png”
}
…
}
