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

【作者主页】：小鱼神1024

【擅长领域】：JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等

chrome.runtime API 提供了一系列的方法和事件，可以通过它来管理和维护 Chrome 扩展的生命周期、消息传递、获取清单（manifest）等

掌握它，是浏览器扩展开发必不可少的。我们一起看看它有那些用法吧。
先新建一个 popup.html，因为本节主要学习 chrome.runtime 相关知识，popup.html 内容随便编写就行，如下即可：
image.png

<!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 配置文件
image.png

{
  "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 如下：
image.png

chrome.runtime.onInstalled.addListener(function () {
  console.log("插件已安装");
});

ok，我们基础扩展开发完成了。在浏览安装成功后，如下：
image.png

chrome.runtime.onInstalled.addListener(listener)

点击 Service Worker 后，弹出的 DelTools 就能看到打印出： 插件已安装
说明 chrome.runtime.onInstalled 监听的事件，在扩展安装时会执行一次。
image.png

当刷新或者更新扩展时， chrome.runtime.onInstalled 监听的事件依然会执行。
5.gif

这里点击刷新按钮后，其实相当于是：先卸载扩展，再重新安装扩展，后续就有体现。

当我们需要扩展安装成功后，立即做一些任务（逻辑），chrome.runtime.onInstalled 就是很好的选择了。
注意：它只有在初次安装扩展、或者更新扩展时才执行一次，后续将不在执行！

2、chrome.runtime.onStartup.addListener(listener)

chrome.runtime.onStartup 从名称上大概就能猜出来，其实浏览器启动时，执行其监听的事件。
我们在 background.js 中添加如下代码：
image.png


chrome.runtime.onInstalled.addListener(function () {
  console.log("插件已安装");
});

chrome.runtime.onStartup.addListener(function () {
  console.log("浏览器重新启动");
});

当我们重新启动浏览器，打开扩展程序的 DevTools 调试面板可以看到，已经打印出： 浏览器重新启动
image.png

当我们需要扩展每次打开浏览器时执行一些任务（逻辑），chrome.runtime.onStartup 是不错的选择。
注意：它只有在浏览器重新启动时才执行一次。

3、chrome.runtime.setUninstallURL(url, callback?)

它的作用是：卸载扩展时打开指定URL，通常用于展示问卷调查。
那我们也尝试验证下吧。
我们想在卸载时，跳转到一个问卷调查页面（我们也没有啊）。那就先跳转到百度界面，验证其功能即可
image.png

// 安装、更新时执行
chrome.runtime.onInstalled.addListener(function () {
  console.log("插件已安装");
});

// 浏览器重新启动时执行
chrome.runtime.onStartup.addListener(function () {
  console.log("浏览器重新启动");
});

// 卸载时执行
chrome.runtime.setUninstallURL(
  "https://www.baidu.com/",
  function () {
    console.log("插件已卸载");
  }
);

我先验证下刷新按钮的功能：
5.gif
能清楚的看到，点击刷新按钮后，先执行了卸载，然后再执行了安装操作。

5.gif
当卸载扩展后，立刻就跳转到了百度界面。

4、chrome.runtime.getURL(path)

它的作用：将一个扩展内部的相对路径转换为完整的 URL

如果我们想获取 background.js 的完整路径时，可以这样写：
image.png

// 获取 background.js 的绝对路径
const url = chrome.runtime.getURL("background.js")
console.log("url", url)

打印的结果：
image.png

同样的，也可以获取 pupup.html 的扩展内部路径：
image.png

const popup_url = chrome.runtime.getURL("popup.html")

console.log("popup_url", popup_url)

Service Worker 打印结果为：image.png
那小伙伴可能问了，拿到资源（js、css、html、jpg等等）的 url 有什么作用呢？

其实，作用很简单，就使用它们。比如，如果我们想在扩展安装成功后，立即打开一个popup.html窗口，实现如下：
image.png

// 安装成功，立即打开一个popup窗口
chrome.runtime.onInstalled.addListener(function () {
  chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
});

这里我们使用了 chrome.tabs API，可以用它打开一个新窗口，后续会讲到。使用tabs之前要在manifest.json声明它，如下:
image.png

{
    "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"
    ]
}

效果如下：
5.gif
当我们需要用到资源路径时，chrome.runtime.getURL(path) 绝对是一个不错的选择。

5、chrome.runtime.getManifest()

它的作用是：返回当前扩展清单文件的详细信息。

比如我们要获取扩展的版本信息：
image.png

// manifest 配置信息
const manifest_info = chrome.runtime.getManifest();
console.log("manifest_info", manifest_info);

const { version } = manifest_info;
console.log("version", version);

打印结果：
image.png

6、chrome.runtime.sendMessage

在扩展中，总会用到扩展页面、内容脚本和工作服务线程之间互相通信，这个时候就会用到了 chrome.runtime.sendMessage(message, callback?) 和 chrome.runtime.onMessage.addListener(listener) 了，前者是发送消息，后者是接收消息。

举个例子，当扩展页面加载完成时，发送一个消息，在后台服务中接收并打印。
首先，在根目录新建 popup.js ，内容如下：
image.png

// 当前页面加载完成后
document.addEventListener("DOMContentLoaded", function () {
  // 发送消息
  chrome.runtime.sendMessage({ message: "hello" }, function (response) {
    console.log("收到来自接收者的回复：", response);
  });
});

然后在 popup.html 中引入，如下：
image.png

在后台服务 background.js 中接收：
image.png

打印效果如下：
5.gif

其中形参：

  • 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?)

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/746441.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

揭示优化Prompt的秘诀：如何让API表现媲美网页版

揭示优化Prompt的秘诀：如何让API表现媲美网页版

为什么用GPT API&#xff08;GPT-3.5-turbo&#xff09;进行程序分析时&#xff0c;效果好像比网页版的GPT-3.5差一点&#xff1f;这可能有几个原因&#xff0c;咱们细说一下。 1. Prompt不同 这是最常见的问题之一。API调用时的指令&#xff08;prompt&#xff09;往往比较简…
阅读更多...
Android13 WMS窗口层级树

Android13 WMS窗口层级树

1&#xff0c;认识层级树 可以通过dumpsys activity containers 看到 WMS 层级树的结构 ACTIVITY MANAGER CONTAINERS (dumpsys activity containers) ROOT typeundefined modefullscreen override-modeundefined requested-bounds[0,0][0,0] bounds[0,0][1440,2960]#0 Displa…
阅读更多...
【每日刷题】Day75

【每日刷题】Day75

【每日刷题】Day75 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 1833. 雪糕的最大数量 - 力扣&#xff08;LeetCode&#xff09; 2. 面试题 17.14. 最小K个数 - 力扣…
阅读更多...
【数据库】Oracle安装报错（win10安装oracle提示环境不满足最低要求）

【数据库】Oracle安装报错（win10安装oracle提示环境不满足最低要求）

目录 一、问题场景&#xff1a; 二、问题描述 三、原因分析&#xff1a; 四、解决方案&#xff1a; 一、问题场景&#xff1a; 安装Oracle数据库 二、问题描述 安装之前提示&#xff08; [INS-13001]环境不满足最低要求。 是否确实要继续? &#xff09; 如图所示&…
阅读更多...
C# unknow column “p0.TaskTypeId‘ in ‘field list‘

C# unknow column “p0.TaskTypeId‘ in ‘field list‘

这个问题就是数据库出现问题&#xff0c;去 日志中去看 &#xff0c;找个具体表去 看实体类&#xff0c;与数据库中的表&#xff0c;是否存在字段。
阅读更多...
若依项目实战------企业人力资源管理平台

若依项目实战------企业人力资源管理平台

一、数据库名称规范化及建表相关 1.术语名称 1.系统名称&#xff1a;企业人力资源管理平台英文翻译&#xff1a;Enterprise Human Resource Management Platform缩写&#xff1a;EHR 2.员工信息管理&#xff08;Employee Information Management 缩写&#xff1a;EIM&#…
阅读更多...
Vue-双向数据绑定指令

Vue-双向数据绑定指令

v-model指令 双向数据绑定就是当数据设置给表单元素时&#xff0c;修改这个数据会修改表单元素的值&#xff0c; 修改表单元素的值同样也会修改这个数据 <body><div id"app"><input type"text" v-model"name"><p>{{name…
阅读更多...
GPTCache：革新大模型缓存，降低成本，提升效率

GPTCache：革新大模型缓存，降低成本，提升效率

GPTCache介绍 随着应用程序越来越受欢迎并遇到更高的流量水平，与 LLM API 调用相关的费用可能会变得相当可观。此外，LLM 服务的响应时间可能会很慢，尤其是在处理大量请求时。GPTCache是一个致力于构建用于存储 LLM 响应的语义缓存的项目。 项目架构 数字人助力传统客服 1…
阅读更多...
成熟ICT测试系统与LabVIEW定制开发的比较

成熟ICT测试系统与LabVIEW定制开发的比较

ICT&#xff08;In-Circuit Test&#xff09;测试系统是电子制造行业中用于电路板&#xff08;PCB&#xff09;组件检测的重要工具。市场上有许多成熟的ICT测试系统&#xff0c;如Keysight、Teradyne、SPEA等公司提供的商用解决方案。此外&#xff0c;LabVIEW作为一种强大的图形…
阅读更多...
Dubbo运行原理

Dubbo运行原理

目录 Dubbo通讯协议 Dubbo负载均衡策略 RPC和HTTP有什么区别&#xff1f; 让你设计一个RPC框架&#xff0c;如何考虑数据序列化问题&#xff1f; Dubbo 是一款高性能、轻量级的开源 RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;主要用于构建分布式服务和微服务…
阅读更多...
分享一个微信管理工具

分享一个微信管理工具

聚合管理多个微信号 1、聚合聊天 支持多微信账号消息&#xff0c;在统一端口接收回复 2、话题素材库 可提前把话题准备好用到的时候一键发送 3、朋友圈互动 支持在聊天窗口直接看到当前客户朋友圈实时点赞评论互动 批量多号添加好友 1、批量添加联系人&#xff0c;导入联系…
阅读更多...
蓝牙模块在车载系统中的应用与集成：现状、挑战与未来展望

蓝牙模块在车载系统中的应用与集成：现状、挑战与未来展望

随着科技的快速发展&#xff0c;蓝牙技术已经深入到我们生活的方方面面&#xff0c;其中车载系统中的应用尤为显著。蓝牙模块作为一种无线通信技术&#xff0c;不仅为驾驶者提供了更加便捷的操作体验&#xff0c;同时也提升了驾驶的安全性。本文旨在分析蓝牙模块在车载系统中的…
阅读更多...
LabVIEW在脑机接口（BCI）研究中的应用

LabVIEW在脑机接口（BCI）研究中的应用

脑机接口&#xff08;Brain-Computer Interface&#xff0c;BCI&#xff09;技术通过解读大脑活动&#xff0c;将人类思维与计算机或其他设备连接起来&#xff0c;广泛应用于神经康复、认知研究和人机交互等领域。LabVIEW作为强大的图形化编程环境&#xff0c;在BCI研究中发挥着…
阅读更多...
Firefox 火狐浏览器现在允许您在其 Nightly 版本中选择您喜欢的 AI 聊天机器人

Firefox 火狐浏览器现在允许您在其 Nightly 版本中选择您喜欢的 AI 聊天机器人

Firefox Nightly版本是Mozilla推出的一个特殊的频道&#xff0c;用户可以在这里试用最新的功能和更改。这个版本每天都会更新&#xff0c;并且持续发布新的功能和修复。例如&#xff0c;在2023年10月8日发布的版本中&#xff0c;引入了一个新的按钮&#xff0c;用于快速重置隐私…
阅读更多...
避免柔宇科技破产，唯有掌门人完成六项修炼

避免柔宇科技破产，唯有掌门人完成六项修炼

柔宇科技&#xff0c;创始团队来自清华与斯坦福科学家、估值一度高达435亿元的独角兽&#xff0c;但不幸的是&#xff0c;已经正式进入破产清算流程。 据深圳市中级人民法院公告&#xff0c;已裁定受理柔宇科技破产清算一案&#xff0c;定于9月13日上午召开第一次债权人会议。…
阅读更多...
贪吃蛇项目：GameRun与GameEnd部分：游戏的主体运行与善后部分

贪吃蛇项目：GameRun与GameEnd部分：游戏的主体运行与善后部分

准备工作&#xff1a;打印得分信息 在进行GameStart之前&#xff0c;我们需要在地图的右侧打印帮助信息&#xff0c;以及目前玩家的得分情况和一个食物在当前速度下的得分情况&#xff08;加速的状态下按比例增加食物的分数&#xff0c;减速的状态下则相反&#xff09;&#xf…
阅读更多...
第 27 篇 : 搭建maven私服nexus

第 27 篇 : 搭建maven私服nexus

官网文档 1. 下载应该很慢, 最好是能翻墙 nexus-3.69.0-02-java8-unix.tar.gz 2. 上传到/usr/local/src, 解压及重命名 tar -zxvf nexus-3.69.0-02-java8-unix.tar.gz rm -rf nexus-3.69.0-02-java8-unix.tar.gz mv nexus-3.69.0-02 nexus ls3. 修改配置 cd /usr/local/sr…
阅读更多...
人工智能与大数据：新时代的技术融合与未来展望

人工智能与大数据：新时代的技术融合与未来展望

引言 在信息化和数字化迅猛发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;和大数据&#xff08;Big Data&#xff09;已成为推动社会变革和技术进步的两大支柱。随着互联网的普及、计算能力的提升以及数据获取手段的多样化&#xff0c;AI和大数据技术的应用愈发广泛…
阅读更多...
GD32调试篇：ST-LINK utility工具下载安装

GD32调试篇：ST-LINK utility工具下载安装

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 向上代码兼容GD32F450ZGT6中使用 后续项目主要在下面该专栏中发布&#xff1a; https://blog.csdn.net/qq_62316532/category_12608431.html?spm1001.2014.3001.5482 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转…
阅读更多...
怎么打印加密的pfd文件，有那些方法？

怎么打印加密的pfd文件，有那些方法？

现在人们的保密意识越来越强了,越来越多的人在完成pdf文档后就会对文档进行保护&#xff0c;但有的PDF文档被添加了密码&#xff0c;限制了打印的权限&#xff0c;导致我们想打印PDF文档的时候就提示我们要输入密码。面对这种情况&#xff0c;我们要怎样才能把PDF文档打印出来呢…
阅读更多...
最新文章

Copyright @ 2022~2023