Google Chromeでは、UserAgentとDevice Metricsを変更するための拡張APIは何ですか？

Question

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

私はmain apisとexperimental apisを探しましたが、何も見つかりませんでした。

code samplesのdevtools.panelsのサンプルは、既存のdevpanelsを「探検する」方法を示していないようです。

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

をプログラム設定にアクセスする方法上の任意のリードが（マニフェストファイルにdebugger権限を追加）開発ツールが提供する高度な機能のいくつかはchrome.debugger APIを介してアクセスすることができ

Answer 1

をポップアップ。

ユーザーエージェントは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を見つけることができます。執筆時点では、Deviceメトリックを変更するためのドキュメントはありません。

• クロム/ SRC /アウト/デバッグ/ 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を使用してこれをテストしています。デバッグ中のタブのサイズが変更されています。わーい！