【教程向】从零开始创建浏览器插件(三)解决 Chrome 扩展中弹出页面、背景脚本、内容脚本之间通信的问题

第三步:解决 Chrome 扩展中弹出页面、背景脚本、内容脚本之间通信的问题

Chrome 扩展开发中,弹出页面(Popup)、背景脚本(Background Script)、内容脚本(Content Script)各自拥有独立的 JavaScript 执行环境。这种设计可以增强安全性,但同时也带来了数据共享和传递上的问题。

本文将详细探讨弹出页面、背景脚本、内容脚本之间的通信方式,并提供解决方案的代码示例。

在这里插入图片描述

问题概述

弹出页面、背景脚本、内容脚本的独立运行环境带来了以下问题:

  1. 数据共享难题:它们各自拥有不同的执行环境,无法直接访问彼此的 JavaScript 变量或对象。
  2. 事件监听问题:弹出页面关闭后,其事件监听器会被卸载,无法保持持久监听状态。
  3. 权限隔离:内容脚本与弹出页面的权限各自独立,内容脚本无法直接访问弹出页面的 DOM 元素,反之亦然。

解决方案:相互通信的方式

Chrome 扩展提供了多种通信方式来解决这些问题:

1. 使用 chrome.runtime 消息传递

chrome.runtime API 提供了弹出页面、背景脚本和内容脚本之间通信的机制。

弹出页面与背景脚本的通信

背景脚本 (background.js):

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {if (message.type === "getData") {// 获取数据并通过 sendResponse 返回给弹出页面const data = {info: "background data"};sendResponse(data);}return true;
});

弹出页面 (popup.js):

// popup.js
document.addEventListener("DOMContentLoaded", function () {// 向背景脚本请求数据chrome.runtime.sendMessage({type: "getData"}, (response) => {console.log("Received data from background:", response);});
});
内容脚本与背景脚本的通信

背景脚本 (background.js):

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {if (message.type === "fetchContentData") {// 从后台处理数据并返回给内容脚本const data = {content: "Processed data from background"};sendResponse(data);}return true;
});

内容脚本 (content.js):

// content.js
chrome.runtime.sendMessage({type: "fetchContentData"}, (response) => {console.log("Received data from background:", response);
});
弹出页面与内容脚本的通信

直接通信方式不可行,但可以通过背景脚本作为中介实现通信。

弹出页面 (popup.js):

// popup.js
function sendMessageToContentScript(tabId, message) {chrome.tabs.sendMessage(tabId, message, (response) => {console.log("Response from content script:", response);});
}document.addEventListener("DOMContentLoaded", function () {chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {sendMessageToContentScript(tabs[0].id, {type: "greeting", text: "Hello from popup!"});});
});

内容脚本 (content.js):

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {if (message.type === "greeting") {console.log("Received message from popup:", message.text);sendResponse({text: "Hello from content script!"});}
});

2. 使用 chrome.storage 共享数据

chrome.storage API 允许持久化并共享数据,以便在不同环境间传递。

背景脚本 (background.js):
// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {if (message.type === "saveData") {chrome.storage.local.set({sharedData: message.data}, () => {sendResponse({status: "Data saved"});});} else if (message.type === "loadData") {chrome.storage.local.get("sharedData", (result) => {sendResponse({data: result.sharedData});});}return true;
});
弹出页面 (popup.js):
// popup.js
document.addEventListener("DOMContentLoaded", function () {// 向背景脚本请求数据chrome.runtime.sendMessage({type: "loadData"}, (response) => {console.log("Data loaded from storage:", response.data);});// 保存数据到 storagechrome.runtime.sendMessage({type: "saveData", data: "New shared data"}, (response) => {console.log(response.status);});
});
内容脚本 (content.js):
// content.js
chrome.runtime.sendMessage({type: "loadData"}, (response) => {console.log("Data loaded from storage:", response.data);
});

3. 使用 chrome.tabs API 与当前活动标签通信

chrome.tabs API 可以帮助我们确定活动标签,并使用 chrome.scripting 在该标签中注入代码。

弹出页面 (popup.js):
// popup.js
document.addEventListener("DOMContentLoaded", function () {chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {chrome.scripting.executeScript({target: {tabId: tabs[0].id},func: () => {document.body.style.backgroundColor = "pink";}});});
});

总结

由于 Chrome 扩展的不同脚本运行环境是相互独立的,所以开发者在设计扩展时需要使用不同的通信机制来确保数据共享和功能协同。本文提供了多种解决方案,开发者可以根据需求选择最合适的方式:

  1. chrome.runtime 消息传递
  2. chrome.storage 数据持久化
  3. chrome.tabs 标签控制与代码注入

希望本文能够帮助你在 Chrome 扩展开发中更好地处理弹出页面、背景脚本和内容脚本之间的通信问题!

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

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

相关文章

互联网轻量级框架整合之HibernateMyBatis

持久层框架 Hibernate 假设有个数据表&#xff0c;它有3个字段分别是id、rolename、note, 首先用IDEA构建一个maven项目Archetype选择org.apache.maven.archetypes:maven-archetype-quickstart即可&#xff0c;配置如下pom <project xmlns"http://maven.apache.org/…

攻防世界-web-unseping

题目 知识点 PHP代码审计PHP序列化和反序列化PHP中魔术方法命令执行绕过方式 解读源码 <?php highlight_file(__FILE__);class ease{private $method;private $args;function __construct($method, $args) {$this->method $method;$this->args $args;}function …

【算法】动态规划之背包DP问题(2024.5.11)

前言&#xff1a; 本系列是学习了董晓老师所讲的知识点做的笔记 董晓算法的个人空间-董晓算法个人主页-哔哩哔哩视频 (bilibili.com) 动态规划系列 【算法】动态规划之线性DP问题-CSDN博客 01背包 步骤&#xff1a; 分析容量j与w[i]的关系&#xff0c;然后分析是否要放…

户籍管理系统的设计与实现

【免费】户籍管理系统的设计与实现.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89296790 ​​​​​​​户籍管理系统的设计与实现 摘 要 当今社会人们生活质量越来越高&#xff0c;人们对生活品质的追求不断提升&#xff0c;对于孩子求学&#xff0c;变更住…

Selenium中的隐式等待和显式等待

在Selenium中&#xff0c;“等待”在执行测试中起着重要作用。在本文中&#xff0c;您将学习Selenium中“隐式”和“显式”等待的各个方面。 在本文中&#xff0c;您将学习到 1. 为什么我们需要在selenium中等待&#xff1f; 2. 隐瞒等待 3. 明确等待 4. 流利的等待 为什么…

Join优化规则及应用层BI系统实践

目录 一、背景 二、查询优化器概述​编辑 2.1 System R Optimizer 2.2 Volcano Optimizer 2.3 Cascade Optimizer 三、Join相关优化规则 3.1 JoinReorder 3.1.1 少量表的Reorder 3.1.2 大量表的Reorder 3.1.3 星型模型的Reorder 3.2 外连接消除 3.3 Join消除 3.4 谓…

UDP多播

1 、多播的概念 多播&#xff0c;也被称为组播&#xff0c;是一种网络通信模式&#xff0c;其中数据的传输和接收仅在同一组内进行。多播具有以下特点&#xff1a; 多播地址标识一组接口&#xff1a;多播使用特定的多播地址&#xff0c;该地址标识一组接收数据的接口。发送到多…

C#面:Session 喜欢丢值且占内存,Cookis不安全,请问 C# 可以用什么办法代替这两种原始的方法

可以使用 用 ViewState&#xff0c;stateserver。 在 C# 中&#xff0c;ViewState、StateServer 和 Session 都是用于在 Web 应用程序中存储和管理状态信息的机制。它们可以用来在不同的页面之间传递数据或者在同一页面的不同请求之间保持数据的持久性。 ViewState&#xff1…

[Vision Board创客营]--使用openmv识别阿尼亚

文章目录 [Vision Board创客营]使用openmv识别阿尼亚介绍环境搭建训练模型上传图片生成模型 使用结语 [Vision Board创客营]使用openmv识别阿尼亚 &#x1f680;&#x1f680;五一和女朋友去看了《间谍过家家 代号&#xff1a;白》&#xff0c;入坑二刺螈&#xff08;QQ头像也换…

在prompt使用占位符实现提高信息替换成功率和替换位置准确率【prompt】【LLM】

文章目录 问题占位符解决 问题 造数据集的时候遇到的&#xff0c;llm不能很好的帮你替换&#xff0c;替换的内容不对&#xff0c;或者是替换的位置不对&#xff0c;比如这里就是替换位置不对&#xff0c;只盯着doc2替换&#xff0c;无视你的替换位置的变化。 待处理文本 {&quo…

函数作用域(局部变量和全局变量)(狠狠爱住啦)

在Python中&#xff0c;变量可以分为局部变量和全局变量两种类型&#xff0c;它们的作用域不同&#xff0c;对于程序的执行有着不同的影响。 在函数内部定义的变量属于局部作用域&#xff0c;在函数外部定义的变量属于全局作用域。在函数内部&#xff0c;可以使用 global 关键…

小程序地理位置接口申请教程来啦4步学会

小程序地理位置接口有什么功能&#xff1f; 如果我们提审后驳回理由写了“当前提审小程序代码包中地理位置相关接口( chooseAddress、getLocation )暂未开通&#xff0c;建议完成接口开通后或移除接口相关内容后再进行后续版本提审”&#xff0c;如果你也碰到类似问题&#xff…

电火灶是燃气灶吗?节能、环保效果怎么样?

随着科技的进步&#xff0c;厨房中的传统设备也逐步被新型、高效且环保的设备所替代。电火灶&#xff0c;作为一种新型的电火烹饪设备&#xff0c;逐渐进入人们的视野。那么&#xff0c;电火灶是否与传统的燃气灶有所区别&#xff1f;其节能与环保效果又如何呢&#xff1f;下面…

使用 Spring Boot 构建 RESTful API 的最佳实践

在现代的软件开发中&#xff0c;构建高效、稳定的 RESTful API 是非常重要的一环。Spring Boot 是一个流行的 Java 开发框架&#xff0c;它提供了简化开发的工具和约定&#xff0c;使得构建 RESTful API 变得更加简单和快速。 本文将介绍使用 Spring Boot 构建 RESTful API 的…

2024.5.8 关于 SpringCloud —— Ribbon 的基本认知

目录 Ribbon 负载均衡原理 工作流程 Ribbon 负载均衡规则 Ribbon 负载均衡自定义化 代码方式修改规则 配置文件方式修改规则 小总结 Ribbon 设定饥饿加载 Ribbon 负载均衡原理 工作流程 order-service 使用 RestTemplate 发送请求&#xff0c;随后该请求将会被 Ribbon 所…

【强训笔记】day20

NO.1 思路&#xff1a;先判断能对砍几个回合&#xff0c;取最小值&#xff0c;因为回合数是整数&#xff0c;所以可能存在都大于0的情况&#xff0c;再判断一下如果都存活就再对砍一次&#xff0c;直到一家存活或者都死亡。 代码实现&#xff1a; #include<iostream>u…

土地档案管理关系参考论文(论文 + 源码)

【免费】javaEE土地档案管理系统.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89296786 土地档案管理关系 摘 要 研究土地档案管理关系即为实现一个土地档案管理系统。土地档案管理系统是将现有的历史纸质档案资料进行数字化加工处理&#xff0c;建成标准化的…

TikTok海外运营:云手机的四种快速变现方法

随着TikTok用户基数的持续扩大&#xff0c;这个平台已成为全球创业者和品牌的新战场。其用户群接近20亿&#xff0c;并以年轻用户为主力军&#xff0c;市场渗透率逐年攀升。无论是大型组织、知名品牌&#xff0c;还是个人创业者&#xff0c;都无法忽视TikTok所带来的巨大商机。…

视频监控系统中,中心录像服务器的录像文件实际大小和理论值相差很大的问题解决

目录 一、现象描述 二、视频监控的录像文件计算 &#xff08;一&#xff09;计算方法 1、仅视频部分 2、视频和音频部分 3、使用平均码率 &#xff08;二&#xff09;计算工具 1、关注威迪斯特公众号 2、打开“计算容量”的小工具 三、原因分析 &#xff08;一&…

SharePoint 使用renderListDataAsStream方法查询list超过5000时的数据

问题&#xff1a; 当SharePoint List里的数据超过5000时&#xff0c;如果使用常用的rest api去获取数据&#xff0c;例如 await this.sp.web.lists.getByTitle(Document Library).rootFolder.files.select(*, listItemAllFields).expand(listItemAllFields).filter(listItemA…