浏览器扩展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，一经查实，立即删除！

相关文章

让GNSSRTK不再难【第14讲-第二部分】

让GNSSRTK不再难【第14讲-第二部分】

14.1.2 多个系统多个频率 在 10.3 节中，我们介绍了卫星码偏差产生原因，信号发出的是天线相位中心，而不是信号发生器。同样的，对于接收机也存在相同的问题，即从模拟机的天线相位中心到内部信号跟踪环路这段的时延我们是无法知晓的。 如果多个系统仅仅使用一个地点进行定位…
阅读更多...
什么！你还不会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…
阅读更多...
构建RESTful API：PHP框架中的实践与策略

构建RESTful API：PHP框架中的实践与策略

随着Web服务的兴起&#xff0c;RESTful API成为前后端分离架构中的关键组件。PHP作为一种广泛使用的服务器端脚本语言&#xff0c;通过各种现代框架提供了构建RESTful API的强大工具和灵活性。本文将详细介绍如何在PHP框架中实现RESTful API&#xff0c;探讨设计原则、实现步骤…
阅读更多...
NLP 相关知识

NLP 相关知识

NLP 相关知识 NLPLLMPrompt ChainingLangChain NLP NLP&#xff08;Natuarl Language Processing&#xff09;是人工智能的一个分支&#xff0c;中文名自然语言处理&#xff0c;专注于处理和理解人类使用的自然语言。它涵盖了多个子领域&#xff0c;如文本分类、情感分析、机器…
阅读更多...
思维导图麒麟liunx系统

思维导图麒麟liunx系统

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

pytorch 源码阅读(2)——torch._dynamo.optimize

0 torch._dynamo.optimize(backend, *, nopython, guard_export_fn, guard_fail_fn, disable, dynamic)&#xff0c;TorchDynamo 的主入口点 1 参数说明 backend&#xff0c;一般有两种情况&#xff1a; 一个包含 torch.fx.GraphModule 和 example_inputs&#xff0c;返回一个…
阅读更多...
【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;引用和指…
阅读更多...
在 C/C++ 中使用 popen去执行linux命令样例，失败场景

在 C/C++ 中使用 popen去执行linux命令样例，失败场景

在 C/C 中使用 popen 函数去执行 Linux 命令是一种常见的方式&#xff0c;但确实存在多种可能导致失败的场景。以下是一些可能导致 popen 失败的常见原因和样例&#xff1a; 命令不存在或路径错误&#xff1a; 如果你尝试执行的命令不存在于系统的 PATH 环境变量中&#xff0c;…
阅读更多...
记因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文件。开发者需要在请求中设置待打开…
阅读更多...
三个方法计算两张图片的相似度

三个方法计算两张图片的相似度

import cv2 import numpy as np from skimage.metrics import structural_similarity as ssim import osdef is_similar(image1, image2, threshold0.95):对图像的颜色信息敏感&#xff0c;能快速计算。对图像的旋转、缩放等几何变换不敏感。缺点:对图像的结构、纹理等信息不敏…
阅读更多...
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;其中包含了可以使用键或索引访问各项的列表。如果您使用索…
阅读更多...
tensorflow学习1.3-创建会话，启动会话

tensorflow学习1.3-创建会话，启动会话

tensorflow学习1.3-创建会话&#xff0c;启动会话 会话的由来与作用由来作用 会话的定义与结构定义 用法基本用法上下文管理器执行部分计算图获取多个结果 总结 练习代码报错原因&#xff1a;TensorFlow 2.x中的Eager Execution使用兼容模式来启用SessionEager Execution和计算…
阅读更多...
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…
阅读更多...
最新文章

Copyright @ 2022~2023