在 Google Chrome 中，更改 UserAgent 和 Device Metrics 的扩展 api 是什么？

Question

在谷歌浏览器中，查看开发者工具时，右下角有一个齿轮图标，可打开一个额外的设置弹出窗口。 Settings 弹出窗口中的页面之一是 Overrides，其中包含 User Agent 和 Device Metrics 设置。我正在尝试找到能够以编程方式设置这些值的扩展 API。这样的 API 存在吗？

我查看了 main apis 和 experimental apis ，但似乎找不到任何东西。

code samples 中的 devtools.panels 示例似乎也没有说明如何“探索”现有的开发面板。

具体来说，我正在尝试从浏览器操作的上下文菜单中构建简单的扩展。它就像一个用户代理切换器，在“设置”弹出窗口中提供来自同一列表的选择，并自动将设备指标设置为所选代理的值。例如iPhone 4 为 640x960。

关于如何以编程方式访问“设置”弹出窗口的任何线索

Answer 1

开发者工具提供的一些高级功能可以通过chrome.debugger API 访问（在清单文件中添加debugger 权限）。

可以使用Network.setUserAgentOverride 命令更改用户代理：

// 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});
        });
    });
});

支持的协议和命令的官方文档可以找到here。在撰写本文时，没有关于更改设备指标的文档。然而，在挖掘 Chromium 的源代码后，我发现了一个文件，其中定义了所有当前已知的命令：

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

当我查看定义列表时，我找到了Page.setDeviceMetricsOverride。这句话似乎符合我们的预期，所以让我们进一步搜索，了解如何使用它：

• Chromium code search: "Page.setDeviceMetricsOverride"

这会产生"chromium/src/out/Release/obj/gen/devtools/DevTools.js"（数千行）。某处，有一条线定义（美化）：

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
}], []);

如何阅读？好吧，发挥你的想象力：

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

我已经在 Chrome 25 中使用协议版本 1.0 对此进行了测试，它可以正常工作：正在调试的选项卡已调整大小。耶！