Geek Answers Handbook

Does Google Chrome use the api extension to change UserAgent and Device Metrics?

In Google Chrome, when viewing developer tools, the Gear icon appears in the lower right, which opens an additional pop-up settings window. One of the pages of the Settings pop-up window is Overrides, which contains the User Agent and Device Settings options. I am trying to find an extension API that can set these values ​​programmatically. Is there such an API?

I looked at the main apis , and the experimental apis , but cannot find anything.

The sample for devtools.panels in code samples does not seem to indicate how to "examine" existing devpanels.

In particular, I am trying to create a simple extension accessible from the context menu in a browser action. It will act as a user agent switch, offering a choice from the same list in the Settings pop-up window and automatically sets the device metrics to the values ​​of the selected agent. e.g. 640x960 for iPhone 4.

Any directions on how to programmatically access the Settings pop-up menu

+6
source share
1 answer

Some of the advanced features offered by the developer tools can be accessed through the chrome.debugger API (add the debugger permission to the manifest file).

The user agent can be modified using the 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}); }); }); });

The official documentation for supported protocols and commands can be found here . At the time of writing, there is no documentation for changing device performance. However, after digging into the source code of Chromium, I discovered a file that defined all the currently known commands:

When I look through the list of definitions, I find Page.setDeviceMetricsOverride . This phrase seems to meet our expectations, so let's look further to find out how to use it:

This gives "chromium / src / out / Release / obj / gen / devtools / DevTools.js" (thousands of lines). Somewhere there is a line defining (decorated):

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

How to read it? Well, use your imagination:

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

I tested this on Chrome 25 using protocol version 1.0, and it works: Tab debugging changes. Hooray!

+18
source

More articles:


All Articles