访问Chrome开发工具移动模拟器＆＃39;来自自定义扩展

Question

我正在尝试访问Chrome开发工具移动模拟器＆＃39;来自自定义扩展。

我知道我无法从自定义扩展程序中打开开发工具。

有没有办法从自定义扩展程序中触发移动模拟器？如果是，指导/教程将提供很大帮助。

我需要什么 - 我从我的扩展程序中选择移动设备，浏览器将更改视口，用户代理，传感器以模拟所选设备。总之，我需要dev-tool移动模拟器的复制品。

任何帮助/链接/代码/扩展程序链接都会非常受欢迎。

Answer 1

您必须通过devtools协议使用setDeviceMetricsOverride。您可以通过chrome.debugger Chrome扩展程序API访问它。您将使用该方法，可能还有其他方法来设置UA等。

Example code from my chrome extension

示例（来自@onsy）：

chrome.debugger.sendCommand(debuggeeId, "Network.enable", {}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Network.setUserAgentOverride", {
    userAgent: deviceData.userAgent}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Page.enable", {}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Page.setDeviceMetricsOverride", {
    width: deviceData.width / deviceData.deviceScaleFactor,
    height: deviceData.height / deviceData.deviceScaleFactor,
    deviceScaleFactor: deviceData.deviceScaleFactor,
    emulateViewport: true,
    fitWindow: true,
    textAutosizing: true,
    fontScaleFactor: 1
  }, onResponse);

Answer 2

chrome.debugger.sendCommand(debuggeeId, "Network.enable", {}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Network.setUserAgentOverride", {
    userAgent: deviceData.userAgent}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Page.enable", {}, onResponse);

  chrome.debugger.sendCommand(debuggeeId, "Page.setDeviceMetricsOverride", {
    width: deviceData.width / deviceData.deviceScaleFactor,
    height: deviceData.height / deviceData.deviceScaleFactor,
    deviceScaleFactor: deviceData.deviceScaleFactor,
    emulateViewport: true,
    fitWindow: true,
    textAutosizing: true,
    fontScaleFactor: 1
  }, onResponse);