Question

每当用户单击扩展程序图标时，我都会编写一个扩展程序来模拟移动设备。这只是扩展的第一个版本，因此所有内容都经过了硬编码。

我基本上可以成功地附加到Chrome当前标签页，但是我不知道为什么我的命令无法按预期运行。我将Chrome 版本79 与 protocolversion命令设置为1.3 一起使用。我目前执行的步骤是：

附加到当前的chrome标签。
使用 Browser.getVersion 检查我是否使用了正确的协议版本
使用 Emulation.canEmulate 确保chrome可以模拟移动设备。
使用 Emulation.clearDeviceMetricsOverride 清除所有指标（如果有）。
使用 Emulation.setUserAgentOverride 覆盖当前的用户代理。
使用 Emulation.setDeviceMetricsOverride 模拟移动设备。
使用 Emulation.setTouchEmulationEnabled 来模拟移动事件来启用触摸事件。

以下是上述步骤的代码：

function EmulateMobileDevice(tabId) {

var protocolVersion = '1.3';
chrome.debugger.attach({
    tabId: tabId
}, protocolVersion, function() {
    if (chrome.runtime.lastError) {
        alert(chrome.runtime.lastError.message);
        return;
    }

    // Browser.getVersion
    chrome.debugger.sendCommand({
        tabId: tabId
    }, "Browser.getVersion", {}, function(response) {
        console.log(response);
    });

    // Emulation.canEmulate
    chrome.debugger.sendCommand({
        tabId: tabId
    }, "Emulation.canEmulate", {}, function(response) {
        console.log(response);
    });

    // Emulation.clearDeviceMetricsOverride
    chrome.debugger.sendCommand({
        tabId: tabId
    }, "Emulation.clearDeviceMetricsOverride", {}, function(response) {
        console.log(response);

        // Emulation.setUserAgentOverride
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Emulation.setUserAgentOverride", {
            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
            acceptLanguage: 'en',
            platform: 'mobile'
        }, function(response) {
            console.log(response);
            //Emulation.setDeviceMetricsOverride
            chrome.debugger.sendCommand({
                tabId: tabId
            }, "Emulation.setDeviceMetricsOverride", {
                width: 0,
                height: 0,
                deviceScaleFactor: 0,
                mobile: true,
                screenOrientation: { type: 'portraitPrimary', angle: 1}
            }, function(response) {
                console.log(response);

                // Emulation.setTouchEmulationEnabled
                chrome.debugger.sendCommand({
                    tabId: tabId
                }, "Emulation.setTouchEmulationEnabled", {
                    enabled: true
                }, function(response) {
                    console.log(response);
                }); 
            });
        });
    }); });}

我引用了@paulirish所实现的相同想法here，但他在协议版本1.1中进行了演示，该协议版本已过时。我还从here阅读了协议版本1.3的文档。不幸的是我无法正常工作。

这是我登录上述方法的后台脚本的屏幕截图。

非常感谢。

Answer 1

如果您可以简要介绍自己想对代码做些什么，这会有所帮助，

到目前为止，代码将按原样显示选项卡，因为当width，height和deviceScaleFactor设置为“ 0”（零）时，它将把网站设置为默认大小，但是由于您指定了移动真实的默认滚动栏会改变（它可能会根据您的CSS隐藏）。

发送命令“ Emulation.setDeviceMetricsOverride”在chrome.debugger中不起作用

1 个答案: