0

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.

onsy
  • 740
  • 4
  • 11
  • Read through remote debugging protocol. Sounds like something: 1) currently impossible, 2) nice feature to request – Xan May 30 '14 at 15:06

2 Answers2

2

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);
Paul Irish
  • 47,354
  • 22
  • 98
  • 132
  • Can you add a minimal example? `chrome.debugger` documentation is not the most verbose. – Xan Sep 17 '14 at 18:05
  • @Paul - Thank you for your time, Actually I have solved it long back, forgot to update the question – onsy Sep 19 '14 at 09:51
  • @Xan I have edited the answer with example, Waiting for Paul approval. – onsy Sep 19 '14 at 09:54
  • @onsy The edit will probably be rejected by the moderation queue; add your own answer, which does not demerit this one. – Xan Sep 19 '14 at 10:04
  • I've inlined @onsy's example. I've also added mine from a working chrome extension. https://github.com/paulirish/emulation-popup-ext/blob/master/app/scripts/background.js – Paul Irish Sep 23 '14 at 06:29
0
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);
onsy
  • 740
  • 4
  • 11