在谷歌浏览器中,更改UserAgent和设备指标的扩展API是什么？

Question

在谷歌浏览器中,查看开发人员工具时,右下角有一个齿轮图标,可打开其他"设置"弹出窗口."设置"弹出窗口中的一个页面是"覆盖",其中包含"用户代理"和"设备指标"设置.我试图找到能够以编程方式设置这些值的扩展API.这样的API是否存在？

我看了主要的apis和实验api,但似乎找不到任何东西.

代码示例中devtools.panels的示例似乎并未表明如何"探索"现有的devpanel.

具体来说,我正在尝试从浏览器操作中的上下文菜单构建简单扩展.它将像用户代理切换器一样,在"设置"弹出窗口中提供相同列表中的选项,并自动将"设备度量标准"设置为所选代理的值.例如,IPhone 4为640x960.

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

Answer 1

可以通过chrome.debuggerAPI 访问Developer工具提供的一些高级功能(将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});
        });
    });
});

可以在此处找到支持的协议和命令的官方文档.在撰写时,没有用于更改设备指标的文档.但是,在挖掘了Chromium的源代码之后,我发现了一个定义所有当前已知命令的文件:

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

当我查看定义列表时,我发现Page.setDeviceMetricsOverride.这个短语似乎符合我们的期望,所以让我们进一步搜索,找出如何使用它:

• Chromium代码搜索:"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) {
    // ...
});

我已经使用协议版本1.0在Chrome 25中对此进行了测试,并且它可以工作:正在调试的选项卡已调整大小.好极了!