步骤
- 将此 AJAX 请求移至后台页面。
- 点击按钮（对话框被注入到页面的位置）将消息传递到后台脚本以存储 tab.id（检查下一点）。
- 使用从浏览器操作收到的 tab.id 执行您的删除对话框代码（需要标签 ID，因为用户可以随时切换他的活动标签\窗口）。
参考文献
编辑 1
在清单文件中添加以下内容，确保您使用背景页面注册背景和 jquery。
"background":{
"scripts":["js/jquery.js","background.js"]
},
在background.js中添加以下代码
此代码将 AJAX 调用迁移到后台页面并在 5 秒阈值后执行删除对话框。
function invokeAJAX(tabid) {
$.ajax({
url: 'localhost url here....',
data: data, // this is searialized form 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 看起来像这样，您可以直接调用后台 Page 的函数
document.addEventListener("DOMContentLoaded", function () {
$('#btn').click(function () {
// show loading message
// chrome.extension.sendRequest({}, function(response) {});
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) {//Get current tab
chrome.extension.getBackgroundPage().invokeAJAX(tab.id);//DO Ajax call and delete div added after 5 sec to current tab only
});
});
});
编辑 2
popup.js
对popup.js的更改
- 使 tabs.query 仅获取 当前活动浏览正常窗口
- 回调返回标签数组，所以使用 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);'
});
//Proper Query Formation
chrome.tabs.query({
"active": true,
"status": "complete",
"currentWindow": true,
"windowType": "normal"
}, function (tab) { //Get current tab
//DO Ajax call
//tab is an array so we need to access its first index
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) {
// 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');
console.log("Error .." + r);
}
}
},
error: function (r) {
//$ediv.text('Unknown error, please try again later.').fadeIn('fast');
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);
//Proper Query Formation
chrome.tabs.query({
"active": true,
"status": "complete",
"currentWindow": true,
"windowType": "normal"
}, function (tab) { //Get current tab
//DO Ajax call
//tab is an array so we need to access its first index
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());
});
});