简介
Chrome扩展是一种可以为浏览器添加额外功能的小应用程序。它们可以通过与浏览器页面进行交互来改变页面的外观和行为。
在某些情况下，Chrome扩展可能需要从其内容脚本中向popup.html脚本发送数据。本文将介绍如何实现此功能，并提供示例代码。
从内容脚本向popup.html发送数据
要在Chrome扩展中从内容脚本向popup.html发送数据，您需要执行以下步骤：
- 首先，在contentscript.js文件中定义一个端口对象：
var port = chrome.runtime.connect({name: "port-from-cs"});- 接下来，使用以下代码将数据发送到该端口：
port.postMessage({data: "hello from content script!"});- 最后，在popup.js脚本中监听该端口，以便接收从内容脚本发送的数据：
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "port-from-cs");
port.onMessage.addListener(function(msg) {
console.log(msg.data);
});
});这样，您就可以从内容脚本向popup.html发送数据了。
示例代码
以下是一个完整的Chrome扩展示例，其中包含从内容脚本向popup.html发送数据的代码：
manifest.json
-- -------------------- ---- -------
-
------------------- --
------- -------- -----------
---------- ------
------------------ -
-
---------- ---------------
----- --------------------
-
--
------------- -
---------- -----------------
--
----------------- -
---------------- ------------
-
-contentscript.js
var port = chrome.runtime.connect({name: "port-from-cs"});
port.postMessage({data: "hello from content script!"});popup.html
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------- ------ ------- ------------------------ ------- -------
popup.js
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "port-from-cs");
port.onMessage.addListener(function(msg) {
console.log(msg.data);
});
});总结
本文介绍了如何在Chrome扩展中从内容脚本向popup.html脚本发送数据。使用这种技术，您可以为您的Chrome扩展添加更多的功能，并提高其交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14291