从自定义扩展访问“Chrome dev-tool mobile emulator”答案

【问题标题】：Access 'Chrome dev-tool mobile emulator' from custom extension从自定义扩展访问“Chrome dev-tool mobile emulator”
【发布时间】：2014-07-20 09:16:15
【问题描述】：

我正在尝试从自定义扩展访问“Chrome dev-tool mobile emulator”。

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

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

我需要什么 - 我从我的扩展程序中选择一个移动设备，浏览器将更改视口、用户代理、传感器以模拟所选设备。简而言之，我需要开发工具移动模拟器的副本。

任何帮助/链接/代码/扩展链接都会有很大帮助。

【问题讨论】：

通过远程调试协议读取。听起来像：1）目前不可能，2）请求的好功能

标签： google-chrome google-chrome-extension google-chrome-devtools

【解决方案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);

【讨论】：

你能添加一个最小的例子吗？ chrome.debugger 文档不是最冗长的。
@Paul - 感谢您的宝贵时间，其实我早就解决了，忘了更新问题
@Xan 我已经用示例编辑了答案，等待保罗批准。
@onsy 编辑可能会被审核队列拒绝；添加您自己的答案，这不会被扣分。
我已经内联了@onsy 的示例。我还从一个工作的 chrome 扩展中添加了我的。 github.com/paulirish/emulation-popup-ext/blob/master/app/…

【解决方案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);

【讨论】：

添加到我的答案中。维基化了我的答案。