如何记录带有 Google Chrome 扩展名的 http 请求并持久化它们

Question

我想创建一个 Chrome 扩展，记录 HTTP 请求（到预定义主机）并将它们作为列表保存在本地存储中，因此当我再次调用特定网站时，列表将是扩展。

我想使用 Manifest v3 使扩展“为未来做好准备”。我创建了一个后台脚本来触发当前将所有详细信息放入本地存储的请求（目前这对于演示目的是多余的，我也尝试过将其分开）：

chrome.webRequest.onBeforeRequest.addListener(details => {

    var urls = [];

    chrome.storage.local.get(['data'], function(data){

        urls = data.urls;

    });

    chrome.scripting.executeScript(
        {
          target: {tabId: details.tabId},
          func: recordClick,
          args: [details, urls]
        },
        () => { 
            urls.push(details); 
            console.log(urls.length);
            chrome.storage.local.set({urls: urls});
        });
    }, {
    urls: ['<all_urls>']

});

还有一个名为 recordClick() 的函数与回调中的功能相同：

function recordClick(details, urls) {

    urls.push(details.url);

    chrome.storage.local.set({urls: urls});

}

我尝试了几种方法来确定加载和保存结果的位置，但其中 none 行得通。当我在 onBeforeRequest 触发器中加载以前的 url 时，url 不是全局的，并且在回调中是未知的。当我把它放在触发器定义之外时，它不会实时读取存储。我还尝试在内容脚本中加载 url，在“文档开始”处加载。我尝试在顶部的后端脚本中加载 url，依此类推。

我似乎遇到了计时问题：触发器总是加载一个空列表或变量不是全局变量。我无法扩展列表。无论我把存储功能放在哪里。

我的计划是否可行？我做错了什么？

谢谢！

Answer 1

由于 chrome.storage.local.get 是异步的，您应该将 chrome.scripting.executeScript 移动到它的回调中。

onComplete 可能适合您的目的，而不是 onBeforeRequest。

chrome.webRequest.onBeforeRequest.addListener(details => {
    chrome.storage.local.get('urls', function(data){ 
        let urls = [];
        if( data.urls ) {
            urls = data.urls;
        }
        urls.push(details);
        chrome.storage.local.set({urls: urls}, function() {
            console.log('Value is set to ');
            console.log(urls);
        });

        chrome.scripting.executeScript( { 
             target: {tabId: details.tabId}, 
             func: function(details, urls){ console.log("executed script") }, 
             args: [details, urls] 
        }, 
        () => { 
            console.log("injected")
        }); 
    }); 
}, 
{ urls: ['<all_urls>'] }
);

如何记录带有 Google Chrome 扩展名的 http 请求并持久化它们

How to record http requests with Google Chrome extension and persist them

google-chrome

httprequest

google-chrome-extension