Question

我需要一些关于如何实现这种事情的指南。

我想要做的是使用page_action来显示特定URL的弹出窗口。我想要实现的是这样的：

当用户在浏览器中加载url时，会向我的服务发送一个AJAX请求以检查该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"
                    }
}

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);

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>

popup.js

var BGPage = chrome.extension.getBackgroundPage();
if(typeof BGPage.result !== undefined) {
document.getElementById('request').innerHTML = BGPage.result.cashback;
document.getElementById('ref_link').href = BGPage.result.store;
}

$('a#ref_link').on('click', function(e) {
    var href = e.currentTarget.href;
    chrome.tabs.query({active:true}, function (tab){
        chrome.tabs.update(tab.id, {url: href});
    });
});

Answer 1

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

更新：我现在使用的是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"
                    }
}

records.js

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>

popup.js

var BGPage = chrome.extension.getBackgroundPage();
chrome.tabs.getSelected(null, function(tab) {
    if(typeof BGPage.window["tab" + tab.id] != undefined) {
            document.getElementById('request').innerHTML = BGPage.window["tab" + tab.id];
            document.getElementById('ref_link').href = BGPage.window["store" + tab.id];     
    }
});

特别感谢@RobW

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

1 个答案: