我如何在background.js和popup.js之间进行通信？ [英] How can I communicate between background.js and popup.js?
问题描述
background：{
scripts： [scripts / background.js]
}，
和内容脚本：
content_scripts：[
{
matches：[*：// * / * ]，
js：[scripts / content_script.js]
}
]，
一个弹出窗口（popup.html）和一个弹出脚本（popup.js）。 popup.js未注册到清单中，它处理popup.html外观，并监听popup.html中的用户操作，例如单击按钮。
我想做一个扩展，通过电子邮件发送当前标签的页面，为此，我需要使用 content_script 获取页面DOM，数据（DOM）到后台脚本。在此之后，当用户在popup.html中触发事件时，popup.js会捕获此事件，并且我希望popup.js能够从background.js获取传递的数据（DOM）。我怎么能做到这一点？所以，我的问题是，我怎么能在background.js和popup.js之间进行通信？
我发现对我自己的问题的回答：
谢谢埃尔维斯，我想我解决了这个问题;我只需要在内容脚本中获取网站的DOM，但我的问题的解决方案是这样的：
$ b
content_script.js
//将DOM结构发送到后台页面
chrome.extension.sendRequest（{dom：page DOM here}）;
background.html
< html>
< head>
< script>
chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
if（request.dom！=）
var theDOM = request.dom;
console.log（request.dom）; //页面DOM here - >工程
chrome.extension.sendRequest（{theDOM：theDOM}）; // theDOM：页面DOM在这里
}） ;
< / script>
< / head>
< body>
< / body>
< / html>
popup.js
var dom;
chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
if（request.theDOM！=）{
console.log（popup request：+ request.theDOM）;
dom = request.theDOM;
}
}）;
// HANDLE TAB_1请求（电子邮件地址）
// --------------------------- ------
$（＃send）。click（function（）{
console.log（dom）; //页面DOM here
}
感谢您的帮助;）
在你的内容脚本中使用它：
chrome.extension.sendRequest（{greeting：hello}，function（response ）{
console.log（response.farewell）;
}）;
它发送 {greeting：hello} 到背景。注意指定的回调
后台页面可以使用以下方式监听这些请求：
function（request，sender，sendResponse）{
if（request.greeting ==hello）
sendResponse（{farewell：goodbye }）;
}）;
sendResponse 函数的参数是传递给回调
I have an extension, with a background script:
"background": {
"scripts": ["scripts/background.js"]
},
and a content script:
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["scripts/content_script.js"]
}
],
a popup window (popup.html), and a popup script (popup.js). popup.js is not registrated into manifest,and it deals with popup.html look, and listen for user actions made in popup.html, such as clicking a button.
I want to make an extension, what emails the current tab's page, and for this, I need to get the page DOM with the content_script, pass data (DOM) to the background script. After this, when the user triggers an event in popup.html, popup.js catches this event, and I want popup.js to be able to get the passed data(DOM) from background.js. How could I make this? So, my question is, how could I communicate between background.js and popup.js?
I found an answer to my own question:
Thanks Elvis, I think I solved the problem; I only need to get the DOM of site in content script, but my question's solution was this:
content_script.js
// SEND DOM structure to the background page
chrome.extension.sendRequest({dom: "page DOM here"});
background.html
<html>
<head>
<script>
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.dom != "")
var theDOM = request.dom;
console.log(request.dom); // page DOM here -> works
chrome.extension.sendRequest({theDOM: theDOM}); // theDOM : "page DOM here"
});
</script>
</head>
<body>
</body>
</html>
popup.js
var dom;
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.theDOM != ""){
console.log("popup request: "+request.theDOM);
dom = request.theDOM;
}
});
// HANDLE TAB_1 REQUESTS (EMAIL PAGE)
// ---------------------------------
$("#send").click(function(){
console.log(dom); // page DOM here
}
Thanks for the help ;)
You can do Message Passing. From the documentation:
Use this in your content script:
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
It sends {greeting: "hello"} to the background. Notice the callback specified
The background page can listen to these requests using:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
The arguments to the sendResponse function will be passed to the callback
这篇关于我如何在background.js和popup.js之间进行通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
