我正在写一个扩展,我为它做了一个菜单,用户输入了一些数据。有必要使点击按钮(在扩展菜单中)这些数据。
以下是它必须如何工作:background.js
是扩展菜单中负责js的文件。 content.js
是负责在站点上更改DOM的文件。
document.getElementById('btn').onclick = function() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
//sending in content.js
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">
content.js
获取数据:
chrome.extension.onMessage.addListener(function(request){
if(request=='hello'){
console.log('1. Get: ', request);
}
});
但是从background.js
我什么都没得到。
这是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"
}
]
}
事实证明,我需要使用按钮send
将输入的数据发送到一个文件,该文件将把这些数据插入到我需要的页面中。怎么做?帮助,因为如果我把它在我的js
文件中执行的代码,那么它会尝试从页面上的input
获取此数据,而不是从扩展菜单中获取。
这是结构:
好的,这里似乎有几个n00b问题:
background.js
是一个在所有选项卡/页面的背景中运行的脚本。 (manifest.json
中的“背景”部分指定了这一点)。 PS:调试background.js
的方法是打开chrome的扩展页面(chrome://extensions/
),然后点击“Inspect Views:background page”。通常,这是您的大多数代码所在的位置。content.js
将自动插入所有google.com
页面。popup.html
和它的代码才存在。它通常很轻,代码很少。所以,在你的popup.html
中,删除你现有的两个<script>
条目,并使用一个脚本(通常是popup.js):
<script type =“text / javascript”src =“popup.js”> </ script>google.com
),您使用通用代码:
// Get the current tab & tell it to do something
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var currentTab = tabs[0];
var id = currentTab.id;
chrome.tabs.sendMessage(id,
{ action: 'foo', data:... },
response => { console.log('some response from content.js is:' + response); });
});
但要向后台发送消息(来自google.com内的页面或内容脚本),您只需使用此chrome.runtime.sendMessage({action:'foo', data:...});
所以,你的代码应该是这样的:
popup.html
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>...
popup.js:
document.getElementById('btn').onclick = function() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
//sending in content.js
var foo_data="I am foo";
// Get the current tab & tell it to do something
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var currentTab = tabs[0];
var id = currentTab.id;
chrome.tabs.sendMessage(id,
{ action: 'hello', foo:foo_data, first:first, second:second },
response => { console.log(response); });
});
}
background.js
(没有)
content.js
chrome.runtime.onMessage.addListener(function(request,sender, sendResponse){
if(request.action=='hello'){
console.log(request.foo + ' ' request.first + ' ' + request.second);
sendResponse('I got foo!');
}
});
如果有任何帮助,我会在这里使用一个小项目来开始webextension项目:https://github.com/cmroanirgo/webextension-template。它有一些代码可以帮助它跨浏览器工作(Firefox,Opera和Edge)
我希望这有帮助。