Question

我想制作一个Chrome扩展程序，用于检查网络资源，并通过其网址选择图像，然后将其下载到客户端计算机。我是chrome扩展程序的新手（即使我理解javascript），所以我检查了Google，我得到了这个帖子：How to log fetched network resources in JavaScript? background.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变量不会改变（我检查了它！）我问为什么。抱歉我的英语不好......

Answer 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到port的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（），因为数据是固有的序列化。

Chrome扩展程序变量在加载的标签页上无法更改

1 个答案: