Chrome扩展如何强制页面显示移动视图

Question

我在 crx background.js 中使用以下代码，但不是 enongh，google.com 到移动视图，但 instagram.com 仍然是桌面

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 = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36";
        break;
      }
    }
    return {requestHeaders: details.requestHeaders};
  },
  {urls: ['<all_urls>']},
  ['blocking', 'requestHeaders']
);

我发现 chrome devtools > “toggle device” 可以强制 instagram 显示移动视图，那么如何在 chrome 扩展中做同样的事情？

Answer 1

我找到了解决方案：

简而言之

不仅更改 http 请求 header "User-agent"，还要更改 js "navigator.userAgent"

细节

我使用“保存所有资源”将所有 instagram js 下载到本地： https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb?hl=en

我使用 intellij idea 搜索“mobile”和“isMobile” function （idea > navigate > symbol”

我发现 instagram 没有使用 http 请求“User-Agent”，它使用 js navigator.userAgent get userAgent

所以我应该在 crx 内容脚本中更改 navigator.userAgent并在 crx manifest.json 中设置内容脚本document_start

以下是内容脚本，记得在 manifest.json 中设置内容脚本“run_at”“document_start”

var actualCode =  '(' + function() {
    'use strict';
    var navigator = window.navigator;
    var modifiedNavigator;
    if ('userAgent' in Navigator.prototype) {
        // Chrome 43+ moved all properties from navigator to the prototype,
        // so we have to modify the prototype instead of navigator.
        modifiedNavigator = Navigator.prototype;
    } else {
        // Chrome 42- defined the property on navigator.
        modifiedNavigator = Object.create(navigator);
        Object.defineProperty(window, 'navigator', {
            value: modifiedNavigator,
            configurable: false,
            enumerable: false,
            writable: false
        });
    }
    // Pretend to be Windows XP
    Object.defineProperties(modifiedNavigator, {
        userAgent: {
            value: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36",
            configurable: false,
            enumerable: true,
            writable: false
        },
        appVersion: {
            value: "5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36",
            configurable: false,
            enumerable: true,
            writable: false
        },
        platform: {
            value: "Linux x86_64",
            configurable: false,
            enumerable: true,
            writable: false
        },
    });
} + ')();';
var s = document.createElement('script');
s.textContent = actualCode;
document.documentElement.appendChild(s);
s.remove();

以上代码如何获取移动视图“userAgent”、“appVersion”、“平台”？ chrome devtools > 切换设备，当页面在移动视图中时，在 devtools 控制台中， navigate.userAgent ， navigate.appVersion ， navigate.platform

更新：我发现以下代码很重要：

 var s = document.createElement('script');
    s.textContent = actualCode;
    document.documentElement.appendChild(s);
    s.remove();

如果使用document.addEventListener("DOMContentLoaded"并更改 navigator.userAgent，则无法更改 userAgent