如何使用 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});

}

我尝试了几种方法来加载和保存结果，但它们都不起作用。当我在 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>'] }
);