使用 decarativeNetRequest 修改用户代理并使用 chrome 扩展刷新页面

Question

我正在尝试将切换迁移到清单 V3，这会在

web

和

mobile

视图之间切换。 使用新的

declarativeNetRequest

我可以修改标题，但它不会重新加载页面。理想情况下，在应用新的移动用户代理后，它应该在移动视图中重新加载和加载页面。

我已经在

declarativeNetRequest

中声明了动态规则，如下：

const rules  = {
        addRules: [
          {
            id: 36,
            priority: 2,
            action: {
              type: 'modifyHeaders' as chrome.declarativeNetRequest.RuleActionType,
              requestHeaders: [
                {
                  header: 'user-agent',
                  operation: 'set' as chrome.declarativeNetRequest.HeaderOperation,
                  value: `mobileUserAgent`,
                },
              ],
            },
            condition: {
            urlFilter: 'example.com',
              resourceTypes: [
                'main_frame' as chrome.declarativeNetRequest.ResourceType,
                'xmlhttprequest' as chrome.declarativeNetRequest.ResourceType,
                ],
            },
          },
        ],
      }

     chrome.declarativeNetRequest.updateDynamicRules(rules, () => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError)
        } else {
          chrome.declarativeNetRequest.getDynamicRules(rules => console.log(rules))
        }
      })

在检查 chrome 开发工具时确实更新了值，但它不会刷新页面，也不会使用新的用户代理加载移动视图。

仅供参考，这是旧的方法，它工作正常，但在清单 V3 中不支持 这是修改标题的旧方法。

chrome.webRequest.onBeforeSendHeaders.addListener(
  function (details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === 'User-Agent') {
        details.requestHeaders[i].value = details.requestHeaders[i].value + ' OurUAToken/1.0';
        break;
      }
    }
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ['<all_urls>'] },
  ['blocking', 'requestHeaders']
);

相当于清单 V3 中的

chrome.webRequest.onBeforeSendHeaders.addListener

的是什么？

Answer 1

运行代码后，选项卡将使用您的移动用户代理。运行此代码之前的选项卡需要使用另一个代码重新加载。这是一个例子：

    chrome.windows.getCurrent({populate:true},function(window){ 
    for(var tab of window.tabs){
        for(var site of ["example.com"]){
            if(tab.url && tab.url.indexOf(site) >= 0)chrome.tabs.reload(tab.id);
        }
    }
});

Answer 2

我也遇到了同样的问题，并像下面这样完全解决了。

将 declarativeNetRequest 添加到您的manifest.json 文件中。并声明一个 background.js 文件。

manifest.json

{
    "name": "your-app-name",
    "version": "1",
    "manifest_version": 3,
    "permissions": [
      "declarativeNetRequest"
    ],
    "host_permissions": [
      "<all_urls>"
    ], 
    "background": {
      "service_worker": "background.js"
    }
  }

然后在您的background.js 文件中粘贴以下JSON。请记住在background.js 文件的这个JSON 中使用您自己需要的user-agent。

示例用户代理： Mozilla/5.0（Windows；U；Windows CE；Mobile；如 Android；ko-kr）AppleWebKit/533.3（KHTML，如 Gecko）版本/4.0 Mobile Safari/533.3 Dorothy

const rules = {
  removeRuleIds: [1],
  addRules: [
    {
      id: 1,
      priority: 1,
      action: {
        type: "modifyHeaders",
        requestHeaders: [
          {
            header: "user-agent",
            operation: "set",
            value: 'your-own-user-agent',
          },
        ],
      },
      condition: {
        resourceTypes: ["main_frame"],
        urlFilter: "*",
      },
    },
  ],
};

chrome.runtime.onInstalled.addListener(function (details) {
  chrome.declarativeNetRequest.updateDynamicRules(rules);
});