chrome浏览器插件content.js和background.js还有popup都是什么,怎么通讯

popup

在用户点击扩展程序图标时(下图中的下载图标),都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的(比如就叫popup.js)。它会在每次点击插件图标——popup页面弹出时,重新载入。

content_scripts脚本

content_script 是植入型的,它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的DOM。一切平时做前端的一些操作它都可以做,像什么添加、修改、删除 DOM,获取 DOM 值,监听事件等等,都可以很容易的做到。所以,如果想获取人家的登录帐户和密码,就是件非常容易的事,只需要添加content_script,监听帐户和密码的文本框,获得值后将数据发送到自己的服务器就可以了。因此,特别说明,别乱装扩展,特别是不从官方扩展库里下载的扩展。配置如下:

 "content_scripts": [{"matches": [ "http://*/*", "https://*/*" ],"js": ["content_scripts.js"]}],

这样,在页面加载完成后,就会加载 content.js,在 content.js 里,就可以控制页面元素。可在浏览器进行调试,位置如图,调试的方法就是浏览器调试js的方法,加断点,执行: 

background_script脚本

插件存在则存在, 随着浏览器的打开而打开,随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在background里面。它没办法控制页面元素,但可以通过 content_script 告诉它。ajax同理,如果要在页面打开时向别的服务器请求数据,这时就可以告诉 background_script,让它去请求,然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。

background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。

使用 background_script
要使用 background_script,需要在 manifest.json 中配置,如下:

    "background": {"scripts": ["background.js"],"persistent": false},

如果要调试,可以打开插件一个tab页或者popup页的检查,或者点击背景图:

消息传递

在网页实际运行过程中,原始web+注入的的content_scripts+background.js=新的web页面,当打开多个页面时,就会存在多个新的web页面。因为每个页面都注入content_scripts。那么在通信的时候,后台脚本或则popup页面,怎么确定是与那个页面进行消息交互呢,通过tabID。

tab是什么呢?

上图就有三个tab标签,也就是在浏览器中打开的网页对应着一个tab,图中第二个和第三个虽然url相同,但tabid不一样。三个主要部分消息交互机制如下图:

background 和 content_scripts 的通信

接收消息:chrome.runtime.onMessage.addListener

发送消息:chrome.runtime.sendMessage 

content_scripts发送和接收消息:

let btn = document.querySelector('button');  // 页面DOM
btn.onclick = function () {sendMsg()
};// 发送消息
function sendMsg() {chrome.runtime.sendMessage({ origin: 'pageJs' }, function (data) {// 接受返回信息console.log("🔷: content_scripts.js  send");console.log("🔷: content_scripts.js  sendBack", data);console.log('.....................');});
}// 接受信息
function receiveMsg() {chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log("👀: content_scripts.js  receive", data);console.log("👀: content_scripts.js  receiveFn");sendResponse(data);console.log('.....................');});
};
receiveMsg();

background发送和接收消息:

// 接收到信息
function receiveMsg() {// data数据  sender发送方  sendResponse回调chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log("😝: background.js  receive", data);console.log("😝: background.js  receiveFn");sendResponse(data)console.log('.....................');tabs();});
};
receiveMsg();// 监测到新的tab
async function tabs() {const tabId = await getCurrentTabId();// 在背景页面发送消息,需要当前 tabIDchrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {console.log("📌: background.js  send");console.log("📌: background.js  sendBack", data);console.log('.....................');});
};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) => {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};

所有通信之前,发送方和接收方必须都存在,否则报错。

background 和 popup的通信

收消息:在background中: chrome.extension.getViews() 获取当前插件内每个运行页面的窗口数组([window, window])

发送消息:在右上角弹出框中:chrome.extension.getBackgroundPage() 获取背景页面的窗口对象(window)

background.js在原来基础上增加一个通信函数:

/*** 通信函数*/
function backFun(...arg) {const allViews = chrome.extension.getViews()console.log(arg);console.log('chrome.extension.getViews():', allViews)
}

popup.js页面增加: 

let btn = document.getElementById('submit');// 可以获取到background.js中设置的函数,
const background = chrome.extension.getBackgroundPage();// 点击按钮
btn.onclick = function (e) {var name = document.getElementById('name').value;var password = document.getElementById('password').value;// sendMsg(name, password);background.backFun(name, password)
}

content_scripts 和 popup的通信

content_scripts.js里面:

let btn = document.getElementById('submit');// 点击按钮
btn.onclick = function (e) {var name = document.getElementById('name').value;var password = document.getElementById('password').value;tabs(name, password);
}// 去链接,对应的tab标签页面
async function tabs(...arg) {const tabId = await getCurrentTabId();const connect = chrome.tabs.connect(tabId, { name: 'popup' }); // 和指定tabID建立链接,并设置信号名字// 发送信息connect.postMessage(arg);// 接受返回信息connect.onMessage.addListener(mess => {console.log(mess)})
};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) => {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};

popup.js:

// 监听链接
chrome.runtime.onConnect.addListener(res => {if (res.name == "popup") {res.onMessage.addListener(mes => {console.log('🥓: popup.js receive', mes);res.postMessage('📣: popup.js receiveBack')});}
});

弹出框只要点击插件才能弹出,而当你操作页面的时候,插件弹框又会消失…消失之后,弹框的.js等都会销毁…所以,可以向background通信,然后点击弹出之后,弹出框和background通信,或者弹出之后直接向content_scripts通信。

content_scripts 和 popup的通信也可以通过另外方式传递

content_scripts.js:

// 点击按钮
btn.onclick = function (e) {var name = document.getElementById('name').value;var password = document.getElementById('password').value;tabs(name, password);
}// 去链接,对应的tab标签页面
async function tabs(...arg) {const tabId = await getCurrentTabId();// 页面发送消息,需要当前 tabIDchrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {console.log("📌: background.js  send");console.log("📌: background.js  sendBack", data);console.log('.....................');});};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) => {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};

popup.js:

 chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log("👀: popup.js  receive", data);console.log("👀: popup.js  receiveFn");sendResponse(data);console.log('.....................');});

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

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

相关文章

Spring之Bean详解

Spring之Bean详解 什么是Bean? 在Spring中,Bean是指由Spring容器管理的对象,这些对象是由Spring IoC容器负责创建、组装和管理的。Bean可以是Java类的实例,也可以是其他Spring管理的组件,例如数据源、事务管理器等。…

FPGA——三速自适应以太网设计(2)GMII与RGMII接口

FPGA——以太网设计(2)GMII与RGMII 基础知识(1)GMII(2)RGMII(3)IDDR GMII设计转RGMII接口跨时钟传输模块 基础知识 (1)GMII GMII:发送端时钟由MAC端提供 下…

NextJs教程系列(三):路由layout

可复用的布局 Next.js的layout是一个可复用的布局&#xff0c;不同的子页面可以共享布局容器&#xff0c;页面跳转时&#xff0c;layout容器不会重新渲染。 children props export default function RootLayout({ children }) {return (<html lang"en"><…

怎么做加密文件二维码?分享文件更安全

怎么做一个加密文件二维码&#xff1f;在日常的工作和生活中&#xff0c;通过扫描二维码来查看或者下载文件的方式&#xff0c;被越来越多的人所使用&#xff0c;一方面是二维码的成本低&#xff0c;另一方面有利于提升便捷性和用户体验。 为了保证内容的隐私性和安全性&#…

【XR806开发板试用】串口驱动JQ8900播放音乐

一、硬件连接 1.JQ8900引脚定义 通过阅读JQ8900的数据手册&#xff0c;可以了解到驱动JQ8900有许多种方式&#xff0c;IO驱动&#xff0c;一线串口驱动&#xff08;VPP&#xff09;&#xff0c;两线串口驱动&#xff08;RX&#xff0c;TX&#xff09;&#xff0c;这里我使用两…

VSCode设置

VSCode设置 VSCode设置1.双击和点击显示设置2.快捷键设置 VSCode设置 1.双击和点击显示设置 VSCode设置双击才能打开文件、文件夹 打开文件夹&#xff1a;在设置页中搜索 expandMode,将 singleClick 改为 doubleClick 即可。 双击打开文件&#xff1a;在设置页中搜索workben…

Unity性能优化篇(八) 导入的模型网格优化设置

模型导入Unity后&#xff0c;可以选中这个模型&#xff0c;在Inspector窗口设置它的属性。下面说的都是可自定义选择优化的地方 Model选择卡: 1.在Model选项卡&#xff0c;启用Mesh Compression可以压缩模型&#xff0c;压缩程度越高&#xff0c;模型精度越低&#xff0c;但是…

Python实现插入排序算法

Python实现插入排序算法 以下是使用Python实现插入排序算法的示例代码&#xff1a; def insertion_sort(arr):n len(arr)for i in range(1, n):key arr[i]j i - 1# 将比key大的元素向右移动一位while j > 0 and arr[j] > key:arr[j 1] arr[j]j - 1arr[j 1] key# …

(3)(3.3) MAVLink高延迟协议

文章目录 前言 1 配置 2 说明 3 消息说明 前言 ArduPilot 支持 MAVLink 高延迟协议(MAVLink High Latency)。该协议专为卫星或 LoRA 等低带宽或高成本链路而设计。 在此协议中&#xff0c;每 5s 只发送一次 HIGH_LATENCY2 MAVLink 信息。对 MAVLink 命令或请求&#xff08…

【力扣hot100】刷题笔记Day24

前言 组会前一点不慌&#xff0c;反正跑不出好东西&#xff0c;能应付就行&#xff0c;早上直接刷题 70. 爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 动态规划 class Solution:def climbStairs(self, n: int) -> int:dp [0] * (n1) # dp[n]表示爬n阶楼梯需要多少格…

npm run dev(pnpm run dev) 的过程都做了什么?

pnpm run dev 命令执行的过程通常涉及以下步骤: 解析命令: 当你在项目中运行 pnpm run dev 时,pnpm 首先会查找项目根目录下的 package.json 文件。在这个文件的 scripts 字段里,它会找到名为 "dev" 的脚本定义。执行脚本: 根据 package.json 中 "dev"…

no main manifest attribute, in demo.jar的原因和解决办法

一、问题描述 当我们用java -jar demo.jar --httpPorts8081打算启动我们的jar文件时&#xff0c;系统给出了题目中的错误提示&#xff1a; no main manifest attribute, in demo.jar 二、问题分析 根据提示&#xff0c;很明显是说找不到main入口&#xff0c;为什么是这样呢&a…

sql执行计划需要关注那些内容?

执行explain会返回那些字段(加粗标红为主要关注字段)&#xff1f; 1、id&#xff1a;执行计划中每个操作的唯一标识&#xff0c;多表联查的时候会出现多条数据id是一样的 2、select_type&#xff1a;查询类型&#xff0c;常见类型有&#xff1a;SIMPLE、PRIMARY、UNION、SUBQUE…

什么是 Golang 类型断言

类型断言&#xff1a;用于检查某个接口是否包含某个具体类型&#xff0c;语法x.(T)&#xff0c;x是一个接口类型表达式&#xff0c;T是具体的类型&#xff0c;如果x包含的值可以被转换成T类型&#xff0c;则是ok 在Go语言中&#xff0c;任何类型的值都属于空接口类型。空接口类…

pytest测试框架使用基础06 fixture——parametrize

pytest.mark.parametrize 允许在测试函数或类中定义多组参数和 fixtures。 参数化场景&#xff1a; 只有测试数据和预期结果不一样&#xff0c;但操作步骤是一样的测试用例是可以用上参数化的。 创建test_cases02.py文件 示例一&#xff1a;未参数化 1.脚本代码&#xff1a; #…

nginx代理参数proxy_pass

proxy_pass参数用于配置反向代理&#xff0c;指定客户端请求被转发到后端服务器&#xff0c;后端地址可以是域名、ip端口URI 代理后端报错提示本地找不到CSS文件、JavaScript文件或图片 例如&#xff1a; nginx &#xff1a;10.1.74.109 后端服务&#xff1a;http://10.1.74.…

「MyBatis」MyBatis面试宝典:全面解析常见问题和难点

这里写目录标题 1. 什么是mybatis&#xff1f;2.怎么理解持久层&#xff1f;3. 说一说Mybaits的优点和缺点4. #{}和${}的区别是什么&#xff1f;5. PreparedStatement类6. mybatis的一级缓存和二级缓存7. Mybatis中 Dao接口和XML文件的SQL如何建立关联 面试题-》&#xff1a;My…

Hive Thrift Server

hive-site.xml配置文件 <property><name>hive.server2.thrift.bind.host</name><value>node1</value> </property>hive.server2.thrift.bind.host: This property determines the host address to which the HiveServer2 Thrift service …

pyqt学习网站

PySide 6.PyQt 6快速开发与实战最新章节_孙洋洋著_掌阅小说网 PyQt6开发及实例 - 知乎 Python开发GUI常用库PyQt6和PySide6介绍之一&#xff1a;简介与安装_pyside6 pyqt-CSDN博客 Qt for Python

HBase 的安装与部署

目录 1 启动 zookeeper2 启动 Hadoop3 HBase 的安装与部署4 HBase 高可用 1 启动 zookeeper [huweihadoop101 ~]$ bin/zk_cluster.sh start2 启动 Hadoop [huweihadoop101 ~]$ bin/hdp_cluster.sh start3 HBase 的安装与部署 &#xff08;1&#xff09;将 hbase-2.0.5-bin.tar.…