Javascript 如何使用页面操作显示每个url的弹出窗口？_Javascript_Ajax_Google Chrome_Google Chrome Extension

Javascript 如何使用页面操作显示每个url的弹出窗口？

javascript ajax google-chrome google-chrome-extension

Javascript 如何使用页面操作显示每个url的弹出窗口？,javascript,ajax,google-chrome,google-chrome-extension,Javascript,Ajax,Google Chrome,Google Chrome Extension,我需要一些关于如何实现这类事情的指导我想做的事情是使用page_操作来显示特定URL的弹出窗口。我想要实现的是这样的目标：当用户在浏览器中加载url时，会向我的服务发送一个AJAX请求以检查url。如果在我的服务上找到url，就说我将返回一些关于它的文本。然后，该文本将显示在弹出窗口中为此，我使用了chrome.tabs.onUpdated.addListener函数。它的问题是，每当用户打开一个新选项卡时，就会调用此函数，然后更新弹出页面，删除以前打开的选项卡的消息有解决办法吗更新：

我需要一些关于如何实现这类事情的指导

我想做的事情是使用page_操作来显示特定URL的弹出窗口。我想要实现的是这样的目标：

当用户在浏览器中加载url时，会向我的服务发送一个AJAX请求以检查url。如果在我的服务上找到url，就说我将返回一些关于它的文本。然后，该文本将显示在弹出窗口中

为此，我使用了

chrome.tabs.onUpdated.addListener

函数。它的问题是，每当用户打开一个新选项卡时，就会调用此函数，然后更新弹出页面，删除以前打开的选项卡的消息

有解决办法吗

更新：我正在粘贴我的代码，有人能检查一下问题出在哪里吗

manifest.json

{
    "manifest_version" : 2,

    "name" : "Know your cashback for a site!",
    "version" : "1.0",
    "description" : "Find out about the cashback of the visiting website right in your browser",

    "background" : { "scripts" : ["jquery.js","records.js"]},
    "permissions" : [ "http://*/*", "https://*/*", "tabs" ],    

    "page_action" : {
                    "default_icon"  : "images/icon.png"
                    }
}

{
    "manifest_version" : 2,

    "name" : "Know your cashback for a site!",
    "version" : "1.0",
    "description" : "Find out about the cashback of the visiting website right in your browser",

    "background" : { "scripts" : ["jquery.js","records.js"]},
    "permissions" : [ "http://*/*", "https://*/*", "tabs" ],    

    "page_action" : {
                    "default_icon"  : "images/icon.png"
                    }
}

records.js

var result;
function checkForValidUrl(tabId, changeInfo, tab) {
    if (tab.url !== undefined && changeInfo.status == "complete") {
            $.ajax({
            url: 'http://localhost/chrome_extension/index.php',
            data: "url=" + encodeURIComponent(tab.url),
            type:'GET',
            success: function(resp) {
                    if(resp=="not_found"||resp=="invalid_request") {
                        // do nothing
                    } else {
                        resp = JSON.parse(resp);
                        chrome.pageAction.show(tabId);
                        chrome.pageAction.setTitle({
                                                   tabId: tabId,
                                                   title: resp.cashback
                                                   });
                        chrome.pageAction.setPopup({
                                                   tabId: tabId,
                                                   popup: "popup.htm"
                                                   });
                        window.result = resp;
                        //alert('update successful');
                    }               
                }
            });
    }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

function checkForValidUrl(tabId, changeInfo, tab) {
    if (tab.url !== undefined && changeInfo.status == "complete") {
            $.ajax({
            url: 'http://localhost/chrome_extension/index.php',
            data: "url=" + encodeURIComponent(tab.url),
            type:'GET',
            success: function(resp) {
                    if(resp=="not_found"||resp=="invalid_request") {
                        // do nothing                       
                    } else {
                        resp = JSON.parse(resp);
                        chrome.pageAction.show(tabId);
                        chrome.pageAction.setTitle({
                                                   tabId: tabId,
                                                   title: resp.cashback
                                                   });
                        chrome.pageAction.setPopup({
                                                   tabId: tabId,
                                                   popup: "popup.htm"
                                                   });
                    window.window["tab" + tabId] = resp.cashback;
                    window.window["store" + tabId] = resp.store;                
                    }               
                }
            });
    }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

popup.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<span id="request"></span>
<a href="#" id="ref_link"></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<span id="request"></span>
<a href="#" id="ref_link"></a>
</body>
</html>

我使用单个变量在弹出窗口上显示结果。使用localStorage（用于存储选项卡ID和每个选项卡的其他值）解决了我的问题

更新：我现在使用window对象而不是localStorage，以防止在新的浏览器窗口上加载旧数据

manifest.json

{
    "manifest_version" : 2,

    "name" : "Know your cashback for a site!",
    "version" : "1.0",
    "description" : "Find out about the cashback of the visiting website right in your browser",

    "background" : { "scripts" : ["jquery.js","records.js"]},
    "permissions" : [ "http://*/*", "https://*/*", "tabs" ],    

    "page_action" : {
                    "default_icon"  : "images/icon.png"
                    }
}

{
    "manifest_version" : 2,

    "name" : "Know your cashback for a site!",
    "version" : "1.0",
    "description" : "Find out about the cashback of the visiting website right in your browser",

    "background" : { "scripts" : ["jquery.js","records.js"]},
    "permissions" : [ "http://*/*", "https://*/*", "tabs" ],    

    "page_action" : {
                    "default_icon"  : "images/icon.png"
                    }
}

records.js

var result;
function checkForValidUrl(tabId, changeInfo, tab) {
    if (tab.url !== undefined && changeInfo.status == "complete") {
            $.ajax({
            url: 'http://localhost/chrome_extension/index.php',
            data: "url=" + encodeURIComponent(tab.url),
            type:'GET',
            success: function(resp) {
                    if(resp=="not_found"||resp=="invalid_request") {
                        // do nothing
                    } else {
                        resp = JSON.parse(resp);
                        chrome.pageAction.show(tabId);
                        chrome.pageAction.setTitle({
                                                   tabId: tabId,
                                                   title: resp.cashback
                                                   });
                        chrome.pageAction.setPopup({
                                                   tabId: tabId,
                                                   popup: "popup.htm"
                                                   });
                        window.result = resp;
                        //alert('update successful');
                    }               
                }
            });
    }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

function checkForValidUrl(tabId, changeInfo, tab) {
    if (tab.url !== undefined && changeInfo.status == "complete") {
            $.ajax({
            url: 'http://localhost/chrome_extension/index.php',
            data: "url=" + encodeURIComponent(tab.url),
            type:'GET',
            success: function(resp) {
                    if(resp=="not_found"||resp=="invalid_request") {
                        // do nothing                       
                    } else {
                        resp = JSON.parse(resp);
                        chrome.pageAction.show(tabId);
                        chrome.pageAction.setTitle({
                                                   tabId: tabId,
                                                   title: resp.cashback
                                                   });
                        chrome.pageAction.setPopup({
                                                   tabId: tabId,
                                                   popup: "popup.htm"
                                                   });
                    window.window["tab" + tabId] = resp.cashback;
                    window.window["store" + tabId] = resp.store;                
                    }               
                }
            });
    }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

popup.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<span id="request"></span>
<a href="#" id="ref_link"></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<span id="request"></span>
<a href="#" id="ref_link"></a>
</body>
</html>

特别感谢@RobW

通过将tabId传递给、

show

等，将页面操作限制在特定的选项卡上。我将records.js文件设置为我的后台脚本。在这个脚本中，我使用chrome.tabs.onUpdate.addListener函数。调用此函数后，我根据您的建议尝试使用chrome.pageAction.setPopup。它确实会为所有URL创建弹出窗口，但无论何时创建新选项卡，它都会刷新其他打开选项卡的记录：（有什么帮助吗？还有一件事，我也使用chrome.pageAction.setTitle，对于所有打开的选项卡，这个东西的值都不会被破坏。为什么弹出值会消失？嗨@RobW，我已经更新了这个问题。请看一看。谢谢。为什么你在后台和弹出窗口中加载了相同的脚本？请阅读文档并改进你的操作r了解此主题。第二，将

$（'aාref\u link'）

？我在弹出式.html中没有看到

。（cont）（cont）第三，您将

tab.url

与字面字符串

“未定义”

。您可能是指

undefined

（未引用）.第四，永远不要调用

chrome.pageAction.hide

。除非您显式调用

chrome.pageAction.show

，否则页面操作将不可见。遵循此建议，即使页面包含多个帧，弹出窗口也将保持不变。您不应将选项卡ID存储在localStorage中，而应将其存储在全局对象中。localStorage在整个浏览器中持续存在ser重新加载，而每个会话的选项卡ID都是唯一的。我已经更新了我的答案。现在可以了吗？我已经使用window对象来创建动态变量。

window。window

与

window

相同：两者都引用全局对象。现在，您正在为每个选项卡定义一个全局变量。更好的做法是创建一个专用的措辞nary.例如：

var tabStore={}；

或

window.tabStore={}；

并将结果保存在此对象中：

tabStore[tabId]=resp；

对不起，我最近有点忙，这就是我无法回复的原因。我会处理它，然后让您知道。谢谢！