Chrome 扩展变量不会在加载的选项卡上更改答案

【问题标题】：Chrome extension variable doesn't change on tab loadedChrome 扩展变量不会在加载的选项卡上更改
【发布时间】：2014-05-05 17:50:41
【问题描述】：

我想制作一个 Chrome 扩展程序来检查网络资源，并通过其 url 选择图像，将其下载到客户端计算机。我是 chrome 扩展的新手（即使我懂 javascript），所以我在 Google 上查了一下，然后我找到了这个帖子：How to log fetched network resources in JavaScript? 背景.js：

    var aNetworkLog = [];

chrome.webRequest.onCompleted.addListener(function(oCompleted) {
        var sCompleted = JSON.stringify(oCompleted);
        aNetworkLog.push(sCompleted);
    }
    ,{urls: ["http://*/*"]}
 );

chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
    if (message.action == "getNetworkLog") {
        port.postMessage(aNetworkLog);
    }
});
});

content_script.js：

var port = chrome.extension.connect({name:'test'});

document.getElementById("menu").addEventListener("click", function() {

port.postMessage({action:"getNetworkLog"});

}, false);

port.onMessage.addListener(function(msg) {
string = "";
for (i=0;i<msg.length;i++){
   var res = msg[i]; 
    var x = jQuery.parseJSON(res);
    if (x.type == "image"){
        var vars = parse_url(x.url);
        if (typeof vars['query'] !== 'undefined' && typeof vars['host'] !== 'undefined'){
        if (vars['host'] == 'myhostname' &&   vars['query'].indexOf('whatiwantinurl') != -1 && vars['query'].indexOf('whatidontwantinurl') == -1){
           url = x.url;
           break;
        }
        }


    }
}

SaveToDisk(url,'download.png');
$('#next').click();

});

function SaveToDisk(fileURL, fileName) {
// for non-IE
if (!window.ActiveXObject) {
    var save = document.createElement('a');
    save.href = fileURL;
    save.target = '_blank';
    save.download = fileName || 'unknown';

    var event = document.createEvent('Event');
    event.initEvent('click', true, true);
    save.dispatchEvent(event);
    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

Parse_url 函数：http://phpjs.org/functions/parse_url/。该脚本检查每个资源，直到找到我想要的资源，然后下载它。它在我安装扩展后第一次正常工作：如果我更改选项卡，并且有其他资源符合 url 要求，那么脚本下载第一个选项卡的第一个资源（当我单击菜单 obj在第二个选项卡中），而不是下载新图像。这意味着 url 变量不会改变（我检查了它！）我在问为什么。对不起我的英语不好...

【问题讨论】：

你试过调试吗？ url 改变了吗？您是否达到了在适当条件下执行url = x.url; 的程度？

标签： javascript google-chrome google-chrome-extension background content-script

【解决方案1】：

我不确定我是否完全理解它，但问题可能是 aNetworkLog 是一个全局变量，它驻留在您的后台页面上下文中，只要浏览器工作，它就会一直存在。这就是为什么每次执行循环for (i=0;i<msg.length;i++) 时，您都会一遍又一遍地检查相同的请求。难怪它总是找到第一个匹配的请求。

我猜你需要的可能是只检查与当前标签相关的请求。

background.js

var aNetworkLog = null;
chrome.tabs.onActivated.addListener(function(activeInfo) {
    aNetworkLog = new Array(); // reset the array every time the active tab is changed
    chrome.webRequest.onCompleted.addListener(function(oCompleted) {
        aNetworkLog.push(sCompleted);
    }
    ,{tabId: activeInfo.tabId, urls: ["http://*/*"]}
    );
});

这里的 tabs.onActivated 也可以是 tabs.onUpdated 和 tabs.onCreated，这取决于你的目标（我真的不明白），然后你必须为每个 tabId 维护一个 url 数组，而不仅仅是活跃的一个。在后一种情况下，您将通过端口的 tabId 属性区分所需的 tabId，即

var aListOfNetworkLogs = new Object();
chrome.tabs.onUpdated.addListener(function(tab) {  // or onCreated()
     aListOfNetworkLogs[tab.id] = new Array();
     ....
          aListOfNetworkLogs[tab.id].push(sCompleted);
     ....
});

chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
    if (message.action == "getNetworkLog") {
        port.postMessage(aListOfNetworkLogs[port.tabId]);
    }
});
});

此外，这里不是真正的问题，但您不需要为消息调用 JSON.stringify() 和 JQuery.parseJSON()，因为数据本身就是序列化的。

【讨论】：