8

Google Chromeでは、開発者ツールを表示すると、右下に追加の設定ポップアップを開く歯車アイコンがあります。[設定]ポップアップのページの1つは、ユーザーエージェントとデバイスメトリックの設定を含む[上書き]です。これらの値をプログラムで設定できる拡張APIを見つけようとしています。そのようなAPIは存在しますか？

メインのAPIと実験的なAPIを調べましたが、何も見つからないようです。

コードサンプルのdevtools.panelsのサンプルも、既存のdevpanelを「探索」する方法を示していないようです。

具体的には、ブラウザアクションのコンテキストメニューから利用できる簡単な拡張機能を構築しようとしています。これは、ユーザーエージェントスイッチャーのように機能し、[設定]ポップアップの同じリストから選択肢を提供し、デバイスメトリックを選択したエージェントの値に自動的に設定します。例：iPhone4の場合は640x960。

プログラムで設定ポップアップにアクセスする方法に関する手がかり

4

1 に答える 1

20

開発ツールが提供する高度な機能の一部には、chrome.debuggerAPIを介してアクセスできます（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のソースコードを調べた後、現在知られているすべてのコマンドを定義するファイルを発見しました。

定義のリストを見ると、が見つかります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を使用してChrome25でこれをテストしましたが、機能します。デバッグ中のタブのサイズが変更されます。わーい！

于 2013-03-25T22:42:25.343 に答える