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

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!