将数据从弹出窗口发送到Extension.js不起作用
-
21-12-2019 - |
题
我正在使用crossrider的浏览器扩展。我需要将弹出窗口的一些数据发送到Extension.js
我的popup代码
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
/************************************************************************************
This is your Popup Code. The crossriderMain() code block will be run
every time the popup is opened.
For more information, see:
http://docs.crossrider.com/#!/api/appAPI.browserAction-method-setPopup
*************************************************************************************/
function crossriderMain($) {
// var to store active tab's URL
var activeTabUrl = null;
// Message listener for response from active tab
appAPI.message.addListener(function(msg) {
if (msg.type === 'active-tab-url') activeTabUrl = msg.url;
});
// Request URL from active tab
appAPI.message.toActiveTab({type: 'active-tab-url'});
alert(activeTabUrl);
// THE REST OF YOUR CODE
}
</script>
</head>
<body>
Hello World
</body>
</html>
.
extension.js的代码
appAPI.ready(function($) {
// Message listener
appAPI.message.addListener(function(msg) {
if (msg.type === 'active-tab-url')
// Send active tab's URL to popup
appAPI.message.toPopup({
type: 'active-tab-url',
url:encodeURIComponent(location.href)
});
});
// THE REST OF YOUR CODE
});
.
ActiveTaburl的值未更新。它提供空值。 P.S:我能够在Background.js和popup之间进行通信。但是对于某种原因,Appapi.Message.toActivetab函数不适用于我。我在哪里做错了?
background.js(编辑)
var tabUrl='';
/* appAPI.tabs.getActive(function(tabInfo) {
tabUrl = tabInfo.tabUrl;
}); */
appAPI.message.addListener(function(msg) {
appAPI.tabs.getActive(function(tabInfo) {
tabUrl = tabInfo.tabUrl;
});
var dataString = '{"url":"'+tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
alert(dataString);
appAPI.request.post({
url: 'REST API URL',
postData: dataString,
onSuccess: function(response, additionalInfo) {
var details = {};
details.response = response;
appAPI.message.toPopup({
response:response
});
},
onFailure: function(httpCode) {
// alert('POST:: Request failed. HTTP Code: ' + httpCode);
}
});
});
.
background.js
的工作代码appAPI.message.addListener(function(msg) {
appAPI.tabs.getActive(function(tabInfo) {
var dataString = '{"url":"'+tabInfo.tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
// alert(dataString);
appAPI.request.post({
url: 'http://fostergem.com/api/bookmark',
postData: dataString,
onSuccess: function(response, additionalInfo) {
var details = {};
details.response = response;
appAPI.message.toPopup({
response:response
});
},
onFailure: function(httpCode) {
// alert('POST:: Request failed. HTTP Code: ' + httpCode);
}
});
});
});
. 解决方案
在此代码示例中,只有在从 Extension.js 文件接收到响应时,才会设置alert(activeTabUrl);
时,尚未收到消息的消息尚未收到 Extension.js 代码,因此该值仍然为空而初始化。
使用 activeTaburl 变量,您必须等待来自 Extension.js 文件的Mesage,因此您应该将代码放在回调中的变量中消息侦听器,最好是函数。另请注意,使用弹出窗口中的警报使弹出窗口关闭,因此不应在弹出范围内使用。
我测试了以下弹出代码,它与变量远离变量以避免混淆,并将活动选项卡URL作为参数传递给消息侦听器中的函数,它按预期工作:
function crossriderMain($) {
// Message listener for response from active tab
appAPI.message.addListener(function(msg) {
if (msg.type === 'active-tab-url') ShowPageUrl(msg.url);
});
function ShowPageUrl(url) {
$('#page-url').html('<b>Page URL</b>: ' + url);
}
// Request URL from active tab
appAPI.message.toActiveTab({type: 'active-tab-url'});
//alert(activeTabUrl);
// THE REST OF YOUR CODE
}
.
[免责声明:我是一个跨越员工]
不隶属于 StackOverflow