【作者主页】：小鱼神1024
【擅长领域】：JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等
chrome.runtime API 提供了一系列的方法和事件，可以通过它来管理和维护 Chrome 扩展的生命周期、消息传递、获取清单（manifest）等
掌握它，是浏览器扩展开发必不可少的。我们一起看看它有那些用法吧。
先新建一个 popup.html，因为本节主要学习 chrome.runtime 相关知识，popup.html 内容随便编写就行，如下即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>chrome.runtime</title>
</head>
<body>
<p>chrome.runtime</p>
</body>
</html>
然后，新建 manifest.json 配置文件
{
"manifest_version": 3,
"name": "chrome.runtime",
"description": "chrome.runtime API 基础用法",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
}
}
其他配置项应该都好理解，service_worker 是服务工作线程，可以在扩展后台运行，可以理解为“后端”服务。
既然配置了 service_worker，我们在根目录还缺一个 background.js 文件。
新建 background.js 如下：
chrome.runtime.onInstalled.addListener(function () {
console.log("插件已安装");
});
ok，我们基础扩展开发完成了。在浏览安装成功后，如下：
chrome.runtime.onInstalled.addListener(listener)
点击 Service Worker 后，弹出的 DelTools 就能看到打印出： 插件已安装
说明 chrome.runtime.onInstalled 监听的事件，在扩展安装时会执行一次。
当刷新或者更新扩展时， chrome.runtime.onInstalled 监听的事件依然会执行。
这里点击刷新按钮后，其实相当于是：先卸载扩展，再重新安装扩展，后续就有体现。
当我们需要扩展安装成功后，立即做一些任务（逻辑），chrome.runtime.onInstalled 就是很好的选择了。
注意：它只有在初次安装扩展、或者更新扩展时才执行一次，后续将不在执行！
2、chrome.runtime.onStartup.addListener(listener)
chrome.runtime.onStartup 从名称上大概就能猜出来，其实浏览器启动时，执行其监听的事件。
我们在 background.js 中添加如下代码：
chrome.runtime.onInstalled.addListener(function () {
console.log("插件已安装");
});
chrome.runtime.onStartup.addListener(function () {
console.log("浏览器重新启动");
});
当我们重新启动浏览器，打开扩展程序的 DevTools 调试面板可以看到，已经打印出： 浏览器重新启动
当我们需要扩展每次打开浏览器时执行一些任务（逻辑），chrome.runtime.onStartup 是不错的选择。
注意：它只有在浏览器重新启动时才执行一次。
3、chrome.runtime.setUninstallURL(url, callback?)
它的作用是：卸载扩展时打开指定URL，通常用于展示问卷调查。
那我们也尝试验证下吧。
我们想在卸载时，跳转到一个问卷调查页面（我们也没有啊）。那就先跳转到百度界面，验证其功能即可
// 安装、更新时执行
chrome.runtime.onInstalled.addListener(function () {
console.log("插件已安装");
});
// 浏览器重新启动时执行
chrome.runtime.onStartup.addListener(function () {
console.log("浏览器重新启动");
});
// 卸载时执行
chrome.runtime.setUninstallURL(
"https://www.baidu.com/",
function () {
console.log("插件已卸载");
}
);
我先验证下刷新按钮的功能：
能清楚的看到，点击刷新按钮后，先执行了卸载，然后再执行了安装操作。
当卸载扩展后，立刻就跳转到了百度界面。
4、chrome.runtime.getURL(path)
它的作用：将一个扩展内部的相对路径转换为完整的 URL
如果我们想获取 background.js 的完整路径时，可以这样写：
// 获取 background.js 的绝对路径
const url = chrome.runtime.getURL("background.js")
console.log("url", url)
打印的结果：
同样的，也可以获取 pupup.html 的扩展内部路径：
const popup_url = chrome.runtime.getURL("popup.html")
console.log("popup_url", popup_url)
Service Worker 打印结果为：
那小伙伴可能问了，拿到资源（js、css、html、jpg等等）的 url 有什么作用呢？
其实，作用很简单，就使用它们。比如，如果我们想在扩展安装成功后，立即打开一个popup.html窗口，实现如下：
// 安装成功，立即打开一个popup窗口
chrome.runtime.onInstalled.addListener(function () {
chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
});
这里我们使用了 chrome.tabs API，可以用它打开一个新窗口，后续会讲到。使用tabs之前要在manifest.json声明它，如下:
{
"manifest_version": 3,
"name": "chrome.runtime",
"description": "chrome.runtime API 基础用法",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"tabs"
]
}
效果如下：
当我们需要用到资源路径时，chrome.runtime.getURL(path) 绝对是一个不错的选择。
5、chrome.runtime.getManifest()
它的作用是：返回当前扩展清单文件的详细信息。
比如我们要获取扩展的版本信息：
// manifest 配置信息
const manifest_info = chrome.runtime.getManifest();
console.log("manifest_info", manifest_info);
const { version } = manifest_info;
console.log("version", version);
打印结果：
6、chrome.runtime.sendMessage
在扩展中，总会用到扩展页面、内容脚本和工作服务线程之间互相通信，这个时候就会用到了 chrome.runtime.sendMessage(message, callback?) 和 chrome.runtime.onMessage.addListener(listener) 了，前者是发送消息，后者是接收消息。
举个例子，当扩展页面加载完成时，发送一个消息，在后台服务中接收并打印。
首先，在根目录新建 popup.js ，内容如下：
// 当前页面加载完成后
document.addEventListener("DOMContentLoaded", function () {
// 发送消息
chrome.runtime.sendMessage({ message: "hello" }, function (response) {
console.log("收到来自接收者的回复：", response);
});
});
然后在 popup.html 中引入，如下：
在后台服务 background.js 中接收：
打印效果如下：
其中形参：
- message：这是发送的消息，可以是任意类型。
- sender：包含关于消息发送者的信息，例如哪个标签页发送的，哪个扩展发送的等。
- sendResponse：用于向发送者回复一个消息。如果这个函数在事件监听器中返回了 true，那么表示异步回复
代码地址：传送门
总结
- 首次安装或者更新时执行，用 chrome.runtime.onInstalled.addListener(listener) 监听
- 浏览器启动时执行，用 chrome.runtime.onStartup.addListener(listener) 监听
- 卸载时执行并跳转，用 chrome.runtime.setUninstallURL(url, callback?)
- 获取扩展内部绝对路径时，用 chrome.runtime.getURL(path)
- 获取扩展清单时，用 chrome.runtime.getManifest()
- 后台服务监听消息、脚本或扩展页面发送消息是，用 chrome.runtime.onMessage.addListener(listener) 和 chrome.runtime.sendMessage(message, callback?)
创作不易，动动您发财的小手，点赞关注一波，支持我创作更多对您有帮助的文章！
