步骤
- 将此AJAX请求移动到后台页面。
- 在单击按钮(您的对话框注入到页面的位置)时，向后台脚本传递消息以存储tab.id(请参见下一个要点)。
- 使用从浏览器操作接收到的tab.id执行删除对话框代码(需要Tab id，因为用户可以随时切换他的活动选项卡\窗口)。
参考资料
编辑1
在清单文件中添加以下内容，确保您在后台页面中注册了背景和jquery。
"background":{
"scripts":["js/jquery.js","background.js"]
},
请在background.js中添加以下代码：
此代码将 AJAX 调用迁移到后台页面，并在 5 秒阈值后执行对话框框的删除。
function invokeAJAX(tabid) {
$.ajax({
url: 'localhost url here....',
data: data,
dataType: 'json',
method: 'post',
success: function (r) {
if (r.success) {
window.close();
var notification = webkitNotifications.createNotification(
'img/48.png',
'Done!',
'The page has been saved successfully :)');
notification.show();
setTimeout(function () {
notification.cancel();
}, 5000);
} else {
if (r.error) {
$ediv.text(r.error).fadeIn('fast');
}
}
},
error: function (r) {
$ediv.text('Unknown error, please try again later.').fadeIn('fast');
},
complete: function (r) {
chrome.tabs.executeScript(
tabid, {
code: "document.body.removeChild(document.getElementById('__wnoverlay__'))"
});
}
});
}
您的popup.js文件看起来像是直接调用背景页面函数的样子
document.addEventListener("DOMContentLoaded", function () {
$('#btn').click(function () {
chrome.tabs.executeScript(null, {
"code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
});
chrome.tabs.query({}, function (tab) {
chrome.extension.getBackgroundPage().invokeAJAX(tab.id);
});
});
});
编辑 2
popup.js
popup.js 的更改如下：
- 修改了
tabs.query，仅获取 当前活动的浏览正常窗口
- 回调函数返回 Tab 数组所以使用了 tab[0] 索引。
这些更改后，它会发送正确的消息。
document.addEventListener("DOMContentLoaded", function () {
$('#btn').click(function () {
var $this = $(this);
chrome.tabs.executeScript(
null, {
"code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.background="url(http://groot.com/WebNote_HTML/ChromeExtension/img/spinner.gif) center no-repeat #999999";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
});
chrome.tabs.query({
"active": true,
"status": "complete",
"currentWindow": true,
"windowType": "normal"
}, function (tab) {
chrome.extension.getBackgroundPage().invokeAJAX(tab[0].id, $this.closest('form').serialize());
});
});
});
background.js
对 background.js 进行的更改：
- 删除了
$ediv.text代码引用，因为在后台页面中未定义。
经过这些更改，以下是最终代码。
function invokeAJAX(tabid, data) {
data = data || '';
$.ajax({
url: 'http://groot.com/WebNote_HTML/ChromeExtension/savePage.php',
data: data,
dataType: 'json',
method: 'post',
success: function (r) {
if (r.success) {
var notification = webkitNotifications.createNotification(
'img/48.png',
'Done!',
'The page has been saved successfully :)');
notification.show();
setTimeout(function () {
notification.cancel();
}, 5000);
} else {
if (r.error) {
console.log("Error .." + r);
}
}
},
error: function (r) {
console.log("Error .." + r);
},
complete: function (r) {
chrome.tabs.executeScript(
tabid, {
code: "document.body.removeChild(document.getElementById('__wnoverlay__'))"
});
}
});
}
编辑 3
$('#btn').click(function () {
var $this = $(this);
chrome.tabs.query({
"active": true,
"status": "complete",
"currentWindow": true,
"windowType": "normal"
}, function (tab) {
chrome.tabs.executeScript(
tab[0].id, {
"code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.background="url(http://groot.com/WebNote_HTML/ChromeExtension/img/spinner.gif) center no-repeat #999999";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
});
$('#url').val(tab[0].url);
$('#title').val(tab[0].title);
$loader.hide();
chrome.extension.getBackgroundPage().invokeAJAX(tab[0].id, $this.closest('form').serialize());
});
});
使用setTimeout函数，加载框会在一段时间后被移除。然而，这仅在弹出窗口本身可见时起作用。如果我在弹出窗口上点击按钮，然后转到其他选项卡并返回或单击选项卡页面的其他位置，则弹出窗口隐藏但加载框仍然可见。