Access 'Chrome dev-tool mobile emulator' from custom extension

问题

I am trying to access 'Chrome dev-tool mobile emulator' from custom extension .

I am aware that I cant open dev-tool from custom extension.

Is there any way to trigger mobile emulator from the custom extension? If yes guidance/tutorials will do great help.

What I need - I select a mobile device from my extension and browser will change viewport, user-agent, sensor to emulate selected device. In short I need replica of dev-tool mobile emulator.

Any help/link/code/extension link will do great favour.

回答1:

You'll have to use setDeviceMetricsOverride via the devtools protocol. You access it at the chrome.debugger chrome extension API. You'll use that method and probably others to set the UA and such.

Example code from my chrome extension.

Example (from @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);

回答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);

来源：https://stackoverflow.com/questions/23957523/access-chrome-dev-tool-mobile-emulator-from-custom-extension