浏览器扩展V3开发系列之 chrome.runtime 的用法和案例

小鱼神1024

已于 2024-06-26 09:44:28 修改

阅读量1.6k

点赞数 39

分类专栏：浏览器插件系列文章标签：浏览器插件开发浏览器扩展开发 chrome.runtime

于 2024-06-20 14:48:45 首次发布

本文链接：https://blog.csdn.net/studypy1024/article/details/139832516

版权

浏览器插件系列专栏收录该内容

6 篇文章 7 订阅

订阅专栏

【作者主页】：小鱼神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?)

创作不易，动动您发财的小手，点赞关注一波，支持我创作更多对您有帮助的文章！