"沟通"内容js和后台js文件扩展名 [英] "Communicate" the contents js and background js files in extension
问题描述
我正在写一个扩展，我遇到了一个问题：我无法从扩展菜单发送数据到 content.js 。在扩展菜单中，我有几个直觉，在填写并单击按钮之后，我记下了它们的值，并且我想将它们发送到 content.js ，其中this数据将用于 html 中的实现。但由于某些原因，数据未发送。 $ b
document.getElementById（'btn'）。onclick = function（）{var first = document.getElementById（'first'）。value; var second = document.getElementById（'second'）.value; //发送内容chrome.extension.sendMessage（'hello'）;}
< HEAD> < script type =text / javascriptsrc =content.js>< / script> < script type =text / javascriptsrc =background.js>< / script>< / head>< input type =textid =first>< input type = textid =second>< input type =buttonid =btnvalue =send>
以下是 manifest.json （可能有错）
{
manifest_version：2，
version：1.3，
description： $ name，
browser_action：{
default_popup：content / popup.html
}，
background：{
persistent ：false，
scripts：[content / background.js]
}，
content_scripts：[
{
matches：[ https://google.com/*]，
js：[content / content.js]，
css：[content / qq.css]，
run_at：document_end
}
]
}
content.js ：从ba获取数据ckground
chrome.extension.onMessage.addListener（function（request）{
if（request =='hello' ）{
console.log（'1。 Принято：'，request）;
}
}）;
正如我所看到的一切， background.js 是在扩展菜单中负责 js 的文件。 content.js 是负责在网站上对DOM进行更改的文件。
你的文件结构不清楚： popup.html 的内容是什么？为什么你在同一页面加载 content.js 和 background.js ？
下面是一个例子，它可以完成你想要完成的 。 >它的工作原理是这样的：
弹出窗口将显示用户填写的输入 s。
当按下按钮时，输入的值被发送到后台脚本，后者又将它们发送到内容脚本。内容脚本然后以您想要的方式使用这些值：例如，填充主机网页中的输入。
$ b manifest.json
{
manifest_version：2，
version：1.3 ，
description：name，
browser_action：{
default_popup：content / popup.html
}，
background ：{
persistent：true，
scripts：[content / background.js]
}，
content_scripts：[
{
匹配：[https://google.com/*]，
js：[content / content.js]，
css：[content /qq.css]，
run_at：document_end
}
]
}
background.js
var contentTabId;
chrome.runtime.onMessage.addListener（函数（msg，sender）{
if（msg.from ==content）{//获取内容脚本标签ID
contentTabId = sender.tab.id;
}
if（msg.from ==popup&& contentTabId）{//从弹出窗口获得消息
chrome.tabs.sendMessage（ contentTabId，{//将它发送到内容脚本
从：background，
first：msg.first，
second：msg.second
））;
}
}）;
content.js
chrome.runtime.sendMessage（{from：content}）; //首先，告诉后台页面，这是想要接收消息的选项卡。
chrome.runtime.onMessage.addListener（function（msg）{
if（msg.from ==background）{
var first = msg.first;
var second = msg.second;
//在这里您可以根据需要使用这些值，例如：
//document.getElementById(\"InInput\").value = first;
}
}）;
popup.html
< html>
< body>
< input type =textid =first>
< input type =textid =second>
< button id =send>发送< / button>
< script src =popup.js>< / script>
< / body>
< / html>
popup.js （此文件必须位于与 popup.html ）
document.getElementById（send）。 onclick = function（）{
chrome.runtime.sendMessage（{//向后台脚本发送消息
从：popup，
first：document.getElementById（first） .value，
second：document.getElementById（second）。value
}）;
}
我希望有帮助。
I am writing an extension and I encountered a problem: I can not send data from the extension menu to content.js. In the extension menu I have a couple of intuitions, after filling in and clicking on the button, I write down their values and I want to send them to content.js where this data will be used for implementation inhtml But for some reason, the data is not sent.
document.getElementById('btn').onclick = function() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
//send in content
chrome.extension.sendMessage('hello');
}
<head>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="background.js"></script>
</head>
<input type="text" id="first">
<input type="text" id="second">
<input type="button" id="btn" value="send">
Here is the manifest.json (maybe there's something wrong)
{
"manifest_version": 2,
"version": "1.3",
"description": "name",
"browser_action":{
"default_popup": "content/popup.html"
},
"background": {
"persistent": false,
"scripts": ["content/background.js"]
},
"content_scripts": [
{
"matches": [ "https://google.com/*" ],
"js": ["content/content.js"],
"css": ["content/qq.css"],
"run_at": "document_end"
}
]
}
content.js: get data from background
chrome.extension.onMessage.addListener(function(request){
if(request=='hello'){
console.log('1. Принято: ', request);
}
});
As I can see everything, background.js is the file that is responsible forjs in the extension menu. content.js is the file that is responsible for making changes to the DOM on the sites.
Your files' structure is unclear: what is the content of popup.html? why do you load both content.js and background.js in the same page?
Here is an example that does what I think you try to accomplish.
It works like this:
The popup screen will display the inputs for the user to fill.
When the button is pressed, the value of the inputs is sent to the background script which, in turn, sends them to the content script. The content script then uses those values in the way you want: for instance, to fill an input in the host webpage.
manifest.json
{
"manifest_version": 2,
"version": "1.3",
"description": "name",
"browser_action":{
"default_popup": "content/popup.html"
},
"background": {
"persistent": true,
"scripts": ["content/background.js"]
},
"content_scripts": [
{
"matches": [ "https://google.com/*" ],
"js": ["content/content.js"],
"css": ["content/qq.css"],
"run_at": "document_end"
}
]
}
background.js
var contentTabId;
chrome.runtime.onMessage.addListener(function(msg,sender) {
if (msg.from == "content") { //get content scripts tab id
contentTabId = sender.tab.id;
}
if (msg.from == "popup" && contentTabId) { //got message from popup
chrome.tabs.sendMessage(contentTabId, { //send it to content script
from: "background",
first: msg.first,
second: msg.second
});
}
});
content.js
chrome.runtime.sendMessage({from:"content"}); //first, tell the background page that this is the tab that wants to receive the messages.
chrome.runtime.onMessage.addListener(function(msg) {
if (msg.from == "background") {
var first = msg.first;
var second = msg.second;
//here you use the values as you wish, for example:
//document.getElementById("anInput").value = first;
}
});
popup.html
<html>
<body>
<input type="text" id="first">
<input type="text" id="second">
<button id="send">Send</button>
<script src="popup.js"></script>
</body>
</html>
popup.js (this file must be located in the same directory as popup.html)
document.getElementById("send").onclick = function() {
chrome.runtime.sendMessage({ //send a message to the background script
from: "popup",
first: document.getElementById("first").value,
second: document.getElementById("second").value
});
}
I hope that helps.
这篇关于"沟通"内容js和后台js文件扩展名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
