1

I need some guide on how to achieve this kind of thing.

The thing I want to do is to use page_action to display popup for specific URLs. What I want to achieve is something like this:

When a user loads url in the browser, an AJAX request is sent to my service to check for the url. If url is found on my service, say I will return some text against it. That text will then be displayed in the popup.

For that I am using chrome.tabs.onUpdated.addListener function. The problem with it is that whenever a user opens a new tab, this function is called, it then updates the popup page, removing the message for the previously opened tab.

Any solution?

Update: I am pasting my code, could someone please check what could be the problem?

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

1 回答 1

3

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

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

清单.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"
                    }
}

记录.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);

弹出窗口.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

于 2013-05-06T15:16:52.173 回答