浏览器扩展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?)

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

什么！你还不会Redis？跟着我讲透Redis【上篇之初识与安装】

什么！你还不会Redis？跟着我讲透Redis【上篇之初识与安装】

1 NoSQL是什么 1.1 NoSQL数据库概述 NoSQL(NoSQL Not Only SQL )&#xff0c;意即”不仅仅是SQL“&#xff0c;泛指非关系型的数据库。 NoSQL 不依赖业务逻辑方式存储&#xff0c;而以简单的key-value模式存储。因此大大的增加了数据库的扩展能力。 不遵循SQL标准。不支持A…
阅读更多...
PKG打包sqlite3项目，如何添加node_sqlite3.node依赖

PKG打包sqlite3项目，如何添加node_sqlite3.node依赖

项目地址&#xff1a;https://github.com/helson-lin/pkg_sqlite 在ffandown项目内&#xff0c;由于项目使用了sqlite3&#xff0c;在跨平台打包的时候&#xff0c;除了本机外其他平台打包之后运行缺少node_sqlite3.node依赖。 为了解决问题&#xff0c;百度了很久&#xff0c…
阅读更多...
思维导图麒麟liunx系统

思维导图麒麟liunx系统

系统管理与计划任 ” 使用at命令提交任务。 6.2.1 at任务概述 6.1.4 定时任务的使用场景 at任务是指使用at命令安排的&#xff0c;只执行一次的任务它允许用户指定在未来某个特定时间执行命令或脚本定时更新系统软件包。定时清理系统临时文件。自动备份文件和数据库。 at:用于一…
阅读更多...
【websocket】websocket网课视频记录

【websocket】websocket网课视频记录

仅个人方便回顾。 【WebSocket入门与案例实战-哔哩哔哩】 https://b23.tv/2p1f9t2 课程对应代码仓库: https://gitee.com/duoli-java/websocket-demo.git
阅读更多...
C++编程（二）引用

C++编程（二）引用

文章目录 一、C中的引用&#xff08;一&#xff09;引用1. 语法格式2. 作用3. 注意事项 &#xff08;二&#xff09;常引用2. 其他场景 &#xff08;三&#xff09;引用和函数结合使用1. 引用可以作为函数的参数2. 引用可以作为函数的返回值 &#xff08;四&#xff09;引用和指…
阅读更多...
记因hive配置文件参数运用不当导致 sqoop MySQL导入数据到hive 失败的案例

记因hive配置文件参数运用不当导致 sqoop MySQL导入数据到hive 失败的案例

sqoop MySQL导入数据到hive报错 ERROR tool.ImportTool: Encountered IOException running import job: java.io.IOException: Hive exited with status 64 报错解释&#xff1a; 这个错误表明Sqoop在尝试导入数据到Hive时遇到了问题&#xff0c;导致Hive进程异常退出。状态码…
阅读更多...
HarmonyOS Next开发学习手册——通过startAbility拉起文件处理类应用

HarmonyOS Next开发学习手册——通过startAbility拉起文件处理类应用

使用场景 开发者可以通过调用startAbility接口&#xff0c;由系统从已安装的应用中寻找符合要求的应用来实现打开特定文件的意图&#xff0c;例如&#xff1a;浏览器下应用下载PDF文件&#xff0c;可以调用此接口选择文件处理应用打开此PDF文件。开发者需要在请求中设置待打开…
阅读更多...
0625_ARM2

0625_ARM2

练习&#xff1a; 汇编实现1-100累加&#xff0c;结果保存在r0 .text .global _start start:mov r0,#0mov r1,#1b loop loop:add r0,r0,r1add r1,r1,#1cmp r1,#101bne loop .end思维导图&#xff1a;
阅读更多...
C#——SortedList 排序列表详情

C#——SortedList 排序列表详情

SortedList 排序列表 SortedList 类用来表示键/值对的集合&#xff0c;这些键/值对按照键值进行排序&#xff0c;并且可以通过键或索引访问集合中的各个项。 我们可以将排序列表看作是数组和哈希表的组合&#xff0c;其中包含了可以使用键或索引访问各项的列表。如果您使用索…
阅读更多...
AI文档助手：提升文档处理效率

AI文档助手：提升文档处理效率

随着人工智能技术的飞速发展&#xff0c;AI文档助手已经成为我们提升工作效率的重要工具。小编就来和大家分享几款AI文档助手&#xff0c;它们能够通过智能化的功能帮助我们快速、准确地完成各种文档任务。 1.百度文库AI助手 百度文库AI助手是百度基于文心一言重构的一站式智能…
阅读更多...
全景图片/老照片/动漫图片一键无损放大与修复

全景图片/老照片/动漫图片一键无损放大与修复

在日常生活中&#xff0c;我们经常使用系统自带的图片处理软件来对图片进行缩放操作&#xff0c;从而实现放大或缩小图片。然而&#xff0c;这种方法会带来一个问题&#xff1a;如果原始图片较小&#xff0c;放大后会导致精度损失&#xff0c;使图片变得模糊。 近年来&#xf…
阅读更多...
vue uniapp MEQX JWT认证

vue uniapp MEQX JWT认证

1.下载依赖 npm install mqttimport * as mqtt from "mqtt/dist/mqtt.min" ​ 我是用的uniapp vue3 vite这里尝试了很多方式,都导入不进去后来我就采用的本地引入方式, 把mqtt.min.js下载到本地然后在index.html 中导入<script src"./MEQX/mqtt.js" typ…
阅读更多...
rapidocr-onnxruntime库及在open-webui上传PDF 图像处理 (使用 OCR)应用

rapidocr-onnxruntime库及在open-webui上传PDF 图像处理 (使用 OCR)应用

背景 rapidocr-onnxruntime是一个跨平台的OCR库&#xff0c;基于ONNXRuntime推理框架。 目前已知运行速度最快、支持最广&#xff0c;完全开源免费并支持离线快速部署的多平台多语言OCR。 缘起&#xff1a;百度paddle工程化不是太好&#xff0c;为了方便大家在各种端上进行oc…
阅读更多...
一款强大的上位机模拟通讯工具----HslCommunicationDemo

一款强大的上位机模拟通讯工具----HslCommunicationDemo

目录 引言 工具概述 官网下载链接 安装步骤 使用教程 引言 在工业自动化和机器人控制领域&#xff0c;上位机模拟通讯工具是工程师和开发者日常工作中不可或缺的一部分。这些工具不仅能帮助我们验证设备间的通信状态&#xff0c;还能在设备调试和集成过程中提供极大的便利。…
阅读更多...
38.控制功能实现

38.控制功能实现

上一个内容&#xff1a;37.添加简易的调试功能 以 37.添加简易的调试功能 它的代码为基础进行修改 效果图&#xff1a; 下图红框位置的功能实现 Dlls项目中添加一个Dialog Dialog如下 然后给它添加一个类&#xff0c;MFC添加的类可能会报错添加 #include "afxdialogex.h…
阅读更多...
聚酰胺-酰亚胺（PAI）应用前景广阔 酰氯法和异氰酸酯法为其主流制备方法

聚酰胺-酰亚胺（PAI）应用前景广阔 酰氯法和异氰酸酯法为其主流制备方法

聚酰胺-酰亚胺&#xff08;PAI&#xff09;应用前景广阔 酰氯法和异氰酸酯法为其主流制备方法 聚酰胺-酰亚胺又称PAI&#xff0c;是一种分子链呈酰亚胺环和酰胺键有规则交替排列的高性能热塑性树脂。PAI具有耐磨耗性能好、摩擦系数低、尺寸稳定性好、耐高温、耐辐射、化学稳定性…
阅读更多...
如何选择OLED弧形屏厂家

如何选择OLED弧形屏厂家

在选择OLED弧形屏厂家时&#xff0c;为确保采购到高质量且符合需求的产品&#xff0c;需要综合考虑多个因素。以下是一份详细的指南&#xff0c;帮助您清晰、系统地选择OLED弧形屏厂家&#xff1a; 一、技术实力 研发能力&#xff1a;了解厂家在OLED显示技术方面的研发能力&…
阅读更多...
亮数据，一款新的低代码爬虫利器！

亮数据，一款新的低代码爬虫利器！

在当今数据驱动型时代&#xff0c;数据采集和分析能力算是个人和企业的核心竞争力。然而&#xff0c;手动采集数据耗时费力且效率低下&#xff0c;而且容易被网站封禁。 我之前使用过一个爬虫工具&#xff0c;亮数据&#xff08;Bright Data&#xff09; &#xff0c;是一款低…
阅读更多...
力扣随机一题 哈希表 排序 数组

力扣随机一题 哈希表 排序 数组

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2491.划分技能点相等的团队【中等】 题目&#xff1a; 给你一个正整数数组…
阅读更多...
【深海王国】小学生都能玩的单片机？零基础入门单片机Arduino带你打开嵌入式的大门！（9）

【深海王国】小学生都能玩的单片机？零基础入门单片机Arduino带你打开嵌入式的大门！（9）

Hi٩(๑o๑)۶, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~辛勤工作的你今天也辛苦啦 (o゜▽゜)o☆ 今天大都督继续为大家带来系列——小学生都能玩的单片机&#xff01;带你一周内快速走进嵌入式的大门&#xff0c;let’s go&#xff01; &#xff08;9&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023