Chrome扩展：实现以移动设备模式自动执行必应搜索

你提到的chrome.tabs.update本身没有直接设置移动设备模式的参数，但可以通过两种方式实现需求：

方法一：用Chrome Debugger API完整模拟移动设备（和F12移动端模式一致） #

这种方法会完全模拟移动设备的UA、屏幕尺寸、视口等，和开发者工具里的移动端模拟效果完全相同。

步骤： #

1. 首先在你的扩展manifest.json中添加权限：

{
  "permissions": ["debugger", "tabs"]
}

2. 修改你的doSearches函数，每次打开标签后附加调试器并设置设备模拟：

async function timer(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function doSearches() {
  const numberOfSearches = 100;
  const words = ["示例关键词1", "示例关键词2", "示例关键词3"]; // 替换成你的关键词数组
  const milliseconds = 2000; // 替换成你的等待时间

  for (let i = 0; i < numberOfSearches; i++) {
    const randomNumber = Math.floor(Math.random() * words.length);
    const searchUrl = `https://www.bing.com/search?q=${words[randomNumber]}`;

    // 打开新标签或更新当前标签
    const tab = await chrome.tabs.update({ url: searchUrl });

    try {
      // 附加调试器到目标标签
      await chrome.debugger.attach({ tabId: tab.id }, "1.3");
      
      // 设置移动设备模拟参数（这里用iPhone 14的参数，可自行修改）
      await chrome.debugger.sendCommand(
        { tabId: tab.id },
        "Emulation.setDeviceMetricsOverride",
        {
          width: 390,
          height: 844,
          deviceScaleFactor: 3,
          mobile: true,
          scale: 1
        }
      );

      // 设置对应的移动UA
      await chrome.debugger.sendCommand(
        { tabId: tab.id },
        "Network.setUserAgentOverride",
        {
          userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
        }
      );

      // 等待搜索完成后 detach 调试器，避免占用资源
      await timer(milliseconds);
      await chrome.debugger.detach({ tabId: tab.id });
    } catch (err) {
      console.error("模拟移动设备出错:", err);
      // 如果调试器已附加，尝试 detach
      if (chrome.debugger.isAttached({ tabId: tab.id })) {
        await chrome.debugger.detach({ tabId: tab.id });
      }
    }
  }
}

方法二：仅修改User-Agent请求头（简单UA伪装） #

如果只需要让必应识别为移动设备，不需要模拟屏幕尺寸，可以通过修改请求头的UA实现，这种方法更轻量。

步骤： #

1. 在manifest.json中添加权限：

{
  "permissions": ["webRequest", "webRequestBlocking", "tabs", "<all_urls>"]
}

2. 添加UA修改逻辑，比如在扩展后台脚本中：

// 监听请求，修改必应搜索的UA
chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 只针对必应搜索页面修改UA
    if (details.url.startsWith("https://www.bing.com/search")) {
      const headers = details.requestHeaders.map(header => {
        if (header.name.toLowerCase() === "user-agent") {
          header.value = "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1";
        }
        return header;
      });
      return { requestHeaders: headers };
    }
  },
  { urls: ["<all_urls>"] },
  ["blocking", "requestHeaders"]
);

// 原有的doSearches函数可以保留，不需要修改
async function timer(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function doSearches() {
  let numberOfSearches = 100; 
  let words = ["示例关键词1", "示例关键词2"]; 

  for (var i = 0; i < numberOfSearches; i++) {
    let randomNumber = Math.floor(Math.random() * words.length);
    chrome.tabs.update({ url: `https://www.bing.com/search?q=${words[randomNumber]}` });
    await timer(2000);
  }
}

两种方法对比 #

• Debugger API：完整模拟移动设备的所有特性（屏幕、UA、触摸事件等），和F12的移动端模式完全一致，但需要调试器权限，且每次操作要管理调试器的附加/分离。
• 修改UA：仅伪装请求头，实现简单，资源占用少，但不会改变页面的视口和显示尺寸，适合只需要UA识别的场景。

内容的提问来源于stack exchange，提问作者Steve