In Google Chrome, what is the extension api for changing the UserAgent and Device Metrics?

Question

In Google Chrome, when viewing the developer tools, in the bottom right there is a Gear Icon that opens an additional Settings popup. One of the pages in the Settings popup is Overrides that contains User Agent and Device Metrics settings. I am trying to find the extensions API that is able to set those values programatically. Does such an API exist?

I've looked the main apis, and the experimental apis , but can't seem to find anything.

The sample for devtools.panels in the code samples doesn't seem to indicate how to 'explore' the existing devpanels either.

Specifically I'm trying to build simple extension available from a context menu in a Browser Action. It would act like a user-agent switcher, offering choices from the same list in the Settings popup, and automatically sets the Device Metrics to the values of the selected Agent. e.g. 640x960 for IPhone 4.

Any leads on how to programatically access the Settings popup

Answer 1

Some of the advanced features offered by the Developer tools can be accessed through the chrome.debugger API (add the debugger permission to the manifest file).

The User agent can be changed using the Network.setUserAgentOverride command:

// Assume: tabId is the ID of the tab whose UA you want to change
// It can be obtained via several APIs, including but not limited to
// chrome.tabs, chrome.pageAction, chrome.browserAction, ...

// 1. Attach the debugger
var protocolVersion = '1.0';
chrome.debugger.attach({
    tabId: tabId
}, protocolVersion, function() {
    if (chrome.runtime.lastError) {
        console.log(chrome.runtime.lastError.message);
        return;
    }
    // 2. Debugger attached, now prepare for modifying the UA
    chrome.debugger.sendCommand({
        tabId: tabId
    }, "Network.enable", {}, function(response) {
        // Possible response: response.id / response.error
        // 3. Change the User Agent string!
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Network.setUserAgentOverride", {
            userAgent: 'Whatever you want'
        }, function(response) {
            // Possible response: response.id / response.error
            // 4. Now detach the debugger (this restores the UA string).
            chrome.debugger.detach({tabId: tabId});
        });
    });
});

The official documentation for the supported protocols and commands can be found here. As of writing, there's no documentation for changing the Device metrics. However, after digging in Chromium's source code, I discovered a file which defined all currently known commands:

• chromium/src/out/Debug/obj/gen/webcore/InspectorBackendDispatcher.cpp

When I look through the list of definitions, I find Page.setDeviceMetricsOverride. This phrase seems to match our expectations, so let's search further, to find out how to use it:

• Chromium code search: "Page.setDeviceMetricsOverride"

This yields "chromium/src/out/Release/obj/gen/devtools/DevTools.js" (thousands of lines). Somewhere, there's a line defining (beautified):

InspectorBackend.registerCommand("Page.setDeviceMetricsOverride", [{
    "name": "width",
    "type": "number",
    "optional": false
}, {
    "name": "height",
    "type": "number",
    "optional": false
}, {
    "name": "fontScaleFactor",
    "type": "number",
    "optional": false
}, {
    "name": "fitWindow",
    "type": "boolean",
    "optional": false
}], []);

How to read this? Well, use your imagination:

chrome.debugger.sendCommand({
    tabId: tabId
}, "Page.setDeviceMetricsOverride",{
    width: 1000,
    height: 1000,
    fontScaleFactor: 1,
    fitWindow: false
}, function(response) {
    // ...
});

I've tested this in Chrome 25 using protocol version 1.0, and it works: The tab being debugged is resized. Yay!