如何根据Chrome扩展程序中的用户选项修改HTTP请求标头？

debugcn 发表于 Dev

AFO

我正在开发我的第一个Google Chrome扩展程序。我想基于用户可以在我的扩展程序的选项页面上选择的选项向（所有）http（s）请求添加自定义标头。

我成功管理了以下内容：

手动将自定义标头添加到所有http请求
创建一个选项页面
在chrome.storage.sync中保存和还原选项

现在，我正在努力结合以上内容。这是我尝试过的：

chrome.webRequest.onBeforeSendHeaders.addListener(function(details){
    var demoOptions = new Array();
    var demoHeader = '';
    var bkg = chrome.extension.getBackgroundPage(); // for debugging
    chrome.storage.sync.get({
    demoOption: true,
    }, function(items) {
        if(items.demoOption){
            demoOptions.push('demo-header-1');
        }
        demoHeader = demoOptions.join();
        details.requestHeaders.push({
            name: 'X-Demo-Header',
            value: demoHeader //this is not showing up in the http headers
        });
        bkg.console.log('demoHeader:' + demoHeader); //this is putting the correct value to the debugging console
        bkg.console.log(details.requestHeaders); //this is putting the headers to the debugging console, incl. x-demo-header1 and x-demo-header2 (see below)
    });

    details.requestHeaders.push({
        name: 'X-Demo-Header2',
        value: 'Demo-Header-2' //this is correctly added to the headers and included in the request
    });
    
    return { requestHeaders: details.requestHeaders };
},
{urls: [ "*://*/*" ]},['requestHeaders','blocking']);

观察结果：

X-Demo-Header2正确插入（在Chrome标头检查和degging控制台中可见）
x-demo-header1不是发送到站点的头文件的一部分，但是在调试输出中可见
x-demo-header2在控制台标题数组中的X-Demo-Header1之前的标题中（请参见屏幕截图）

假设：要获取我的选项的函数（项目）会异步执行，并在插入我的选项的标头之前返回requestHeaders。

我可以避免吗？是否有更好的选择基于选项添加标题？

截屏：

调试标头数组的输出

蒂莫·恩斯特

TL; DR

目前无法在Chrome中使用（2021年2月15日）

长答案

JavaScript在很大程度上依赖于异步代码执行的思想。在您的代码中，您将{ requestHeaders: details.requestHeaders }在注册的事件侦听器未chrome.storage.sync.get(key, listener)完成之前返回。因此，demo-header-1添加为时已晚。

这就是为什么您需要使用Promise。在文档中有一个示例如何执行此操作。在该页面上向下滚动至以下位置：“此代码与上一示例完全相同，不同之处在于侦听器是异步的，并返回一个由新标题解析的Promise”。

在您的情况下，代码的修改后的版本将如下所示：

chrome.webRequest.onBeforeSendHeaders.addListener(
  function (details) {
    return new Promise((resolve, reject) => {
      chrome.storage.sync.get({ demoOption: true }, function (items) {
        if (items.demoOption) {
          details.requestHeaders.push({
            name: 'X-Demo-Header',
            value: 'demo-header-1',
          });
        }
        resolve({ requestHeaders: details.requestHeaders });
      });
    });
  },
  { urls: ['*://*/*'] },
  ['blocking', 'requestHeaders']
);

如您所见，我们现在返回一个Promise而不是对象文字。在此Promise中，我们等待的读取操作chrome.storage.sync.get完成。完成后，我们将解决Promise。

这应该在支持此功能的浏览器中起作用。

在Chrome中，此操作不起作用，因为：

自2018年以来，Chrome不支持从webRequest.onBeforeSendHeaders返回Promise

除非您找到一种以chrome.storage.sync.get同步方式加载数据的方法，否则恐怕会很不幸。

作为最后的选择，您可以尝试在Chromium问题上发表投诉。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-05-26

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章