Javascript Chrome-Extension:从background.js向content.js发送消息时出错
我的chrome扩展具有以下功能： 1）当用户单击应用程序图标时，将触发一个新的弹出页面，其中有3个字段需要完成 2）按下submit按钮时，将调用getBackgroundPage（），输入值存储在background.js中 3）在将这些值存储在后台之后，我希望以某种方式在我的内容脚本中使用这些值。我知道每个选项卡都是一个新的进程，它们之间的消息发送有点棘手，并且是异步完成的，但是应该有一种简单的方法来完成。如果您有可行的解决方案，请尽可能清楚地说明 代码如下： Manifest.jsJavascript Chrome-Extension:从background.js向content.js发送消息时出错,javascript,jquery,ajax,google-chrome,google-chrome-extension,Javascript,Jquery,Ajax,Google Chrome,Google Chrome Extension,我的chrome扩展具有以下功能： 1）当用户单击应用程序图标时，将触发一个新的弹出页面，其中有3个字段需要完成 2）按下submit按钮时，将调用getBackgroundPage（），输入值存储在background.js中 3）在将这些值存储在后台之后，我希望以某种方式在我的内容脚本中使用这些值。我知道每个选项卡都是一个新的进程，它们之间的消息发送有点棘手，并且是异步完成的，但是应该有一种简单的方法来完成。如果您有可行的解决方案，请尽可能清楚地说明 代码如下： Manifest.js {
{
"name": "My Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"tabs", "<all_urls>","storage" , "activeTab"
],
"content_scripts": [
{
"matches": [ "https://www.linkedin.com/*"],
"js": ["userInfo.js"]
}]
}
chrome.browserAction.onClicked.addListener(function(tab) {
{
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
localStorage["tabid"]=tab.id;
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
height: 350, width:400
});
});
}
return true;
});
function setCredentials(username,password,token) {
console.log(username);
console.log(password);
console.log(token);
{
chrome.tabs.executeScript( parseInt(localStorage.tabid), {
file: "userInfo.js"
}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
}
};
document.forms[0].onsubmit = function(e) {
e.preventDefault(); // Prevent submission
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var token= document.getElementById('token').value;
chrome.runtime.getBackgroundPage(function(bgWindow) {
bgWindow.setCredentials(username,password,token);
window.close(); // Close dialog
});
};
alert("got it");
{
"name": "My Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"tabs", "<all_urls>","storage" , "activeTab"
],
"content_scripts": [
{
"matches": [ "https://www.linkedin.com/*"],
"js": ["userInfo.js"]
}]
}
chrome.browserAction.onClicked.addListener(function(tab) {
{
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
localStorage["tabid"]=tab.id;
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
height: 350, width:400
});
});
}
return true;
});
function setCredentials(username,password,token) {
console.log(username);
console.log(password);
console.log(token);
{
chrome.tabs.executeScript( parseInt(localStorage.tabid), {
file: "userInfo.js"
}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
}
};
document.forms[0].onsubmit = function(e) {
e.preventDefault(); // Prevent submission
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var token= document.getElementById('token').value;
chrome.runtime.getBackgroundPage(function(bgWindow) {
bgWindow.setCredentials(username,password,token);
window.close(); // Close dialog
});
};
alert("got it");
{
"name": "My Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"tabs", "<all_urls>","storage" , "activeTab"
],
"content_scripts": [
{
"matches": [ "https://www.linkedin.com/*"],
"js": ["userInfo.js"]
}]
}
chrome.browserAction.onClicked.addListener(function(tab) {
{
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
localStorage["tabid"]=tab.id;
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
height: 350, width:400
});
});
}
return true;
});
function setCredentials(username,password,token) {
console.log(username);
console.log(password);
console.log(token);
{
chrome.tabs.executeScript( parseInt(localStorage.tabid), {
file: "userInfo.js"
}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
}
};
document.forms[0].onsubmit = function(e) {
e.preventDefault(); // Prevent submission
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var token= document.getElementById('token').value;
chrome.runtime.getBackgroundPage(function(bgWindow) {
bgWindow.setCredentials(username,password,token);
window.close(); // Close dialog
});
};
alert("got it");
<!DOCTYPE html>
<html>
<head>
<style>
#leadinformation { text-align: left; font: 16px; position :absolute; padding:20px 20px 20px 20px; }
#formwrapper {padding:10px 20px 20px 20px; width:200px;}
#formsubmit {padding:0px 20px 20px 25px;}
leadinformation input{ position:relative;}
#ok { position: relative; top: 30%; font-family: Arial;font-weight: bold; font-size: 13px; color: #ffffff; padding: 5px 5px 5px 5px;background-image: webkit-linear-gradient(top, #287bbc 0%,#23639a 100%);background-color: #287bbc; border-width: 1px; border-style: solid; border-radius: 3px 3px 3px 3px; boder-color: #1b5480; width: 160px; height: 35px;}
#titleParagraph {font-weight:bold; font-size:20px;}
</style>
</head>
<body>
<div id="leadinformation">
<p id="titleParagraph">Provide your Salesforce login information!</p>
<form>
<div id="formwrapper">
Username: <input id="username" type="username">
Password: <input id="password" type="password">
Security Token: <input id="token" type="token">
</div>
<div id="formsubmit">
<input id="ok" type="submit" value="OK">
</div>
</form>
<script src="dialog.js"></script>
<div>
</div>
</body>
</html>
#引线信息{文本对齐：左；字体：16px；位置：绝对；填充：20px 20px 20px 20px；}
#formwrapper{填充：10px 20px 20px 20px；宽度：200px；}
#formsubmit{填充：0px 20px 20px 25px；}
leadinformation输入{位置：相对；}
#ok{位置：相对；顶部：30%；字体系列：Arial；字体重量：粗体；字体大小：13px；颜色：ffffffff；填充：5px 5px 5px 5px；背景图像：webkit线性渐变（顶部，#287bbc 0%，#23639a 100%）；背景色：#287bbc；边框宽度：1px；边框样式：实心；边框半径：3px 3px 3px 3px；boder颜色：#1b5480；宽度：160px；高度：35px；}
#标题栏{字体大小：粗体；字体大小：20px；}
提供您的Salesforce登录信息
用户名：
密码：
安全令牌：
因此，我想要实现的功能非常简单，用户单击图标->午餐弹出窗口-->类型信息-->接受-->在内容脚本中进一步使用信息 在background.js中，我添加了一个onmessagelistener来与我的内容脚本对话
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getStatus")
sendResponse({status: localStorage['username']});
else
sendResponse({}); // snub them.
});
function setCredentials(username,password,token) {
localStorage['username']=username;
}