I am trying to access 'Chrome dev-tool mobile emulator' from custom extension .
I am aware that I cant open dev-tool from custom extension.
Is there any way to trigger mobile emulator from the custom extension? If yes guidance/tutorials will do great help.
What I need - I select a mobile device from my extension and browser will change viewport, user-agent, sensor to emulate selected device. In short I need replica of dev-tool mobile emulator.
Any help/link/code/extension link will do great favour.
You'll have to use setDeviceMetricsOverride via the devtools protocol. You access it at the chrome.debugger chrome extension API. You'll use that method and probably others to set the UA and such.
Example code from my chrome extension.
Example (from #onsy):
chrome.debugger.sendCommand(debuggeeId, "Network.enable", {}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Network.setUserAgentOverride", {
userAgent: deviceData.userAgent}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Page.enable", {}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Page.setDeviceMetricsOverride", {
width: deviceData.width / deviceData.deviceScaleFactor,
height: deviceData.height / deviceData.deviceScaleFactor,
deviceScaleFactor: deviceData.deviceScaleFactor,
emulateViewport: true,
fitWindow: true,
textAutosizing: true,
fontScaleFactor: 1
}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Network.enable", {}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Network.setUserAgentOverride", {
userAgent: deviceData.userAgent}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Page.enable", {}, onResponse);
chrome.debugger.sendCommand(debuggeeId, "Page.setDeviceMetricsOverride", {
width: deviceData.width / deviceData.deviceScaleFactor,
height: deviceData.height / deviceData.deviceScaleFactor,
deviceScaleFactor: deviceData.deviceScaleFactor,
emulateViewport: true,
fitWindow: true,
textAutosizing: true,
fontScaleFactor: 1
}, onResponse);
Related
On different systems (Windows/Android/etc.) there are some "built-in" audio enhancements. For example AEC (autmatic echo cancellation), NR (noise reduction) and Automatic Gain Control. Everyone can have those turned off or on in any combination.
There are also audio enhancements on some browsers (i know about Chrome and Firefox)
It is possible to turn them all off using webRTC?
For all I know, it is possible to turn off those "browser enhancements" and I think I managed it by specifying mediaConstraints. Example for Chrome:
var mediaConstraints = {
audio: {
echoCancellation: { exact: false },
googEchoCancellation: { exact: false },
googAutoGainControl: { exact: false },
googNoiseSuppression: { exact: false },
}
}
Can't find solution to turn off system/device-specific audio enhancements.
There is similar question: WebRTC - disable all audio processing, but I think it addresses only those browser enhancements.
Trying to keep the problem as simple as possible, I am creating a media stream in a chrome extension like so:
var pc = new RTCPeerConnection(null);
chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], null, function(streamId) {
var constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId
}
}
},
success = function(stream) {
pc.addStream(stream);
pc.createOffer(function(offer) {
pc.setLocalDescription(offer, function() {
send('make_offer', name, offer);
}, printError);
}, printError);
};
getUserMedia(constraints, success, printError);
});
For now, my offer is received by a peer visiting a page in a browser. That looks more or less like this (m is a message object with the offer):
var pc = new RTCPeerConnection(null);
pc.onaddstream = function(e) {
var video = document.getElementById('video');
video.src = URL.createObjectURL(e.stream);
};
pc.setRemoteDescription(new RTCSessionDescription(m.value), function() {
pc.createAnswer(function(answer) {
pc.setLocalDescription(answer, function() {
send('make_answer', m.from, answer);
}, printError);
}, printError);
}, printError);
I have done this, both with and without ice servers, which look like this when I use them:
var iceServers = {
iceServers: [
{url: 'stun:stun.l.google.com:19302'}
]
};
Right now, the peer receives and displays the stream perfectly in Firefox. No problem at all. But it's not working in Chrome. Here is some selected data from chrome://webrtc-internals:
connection to firefox:
"ssrc_3309930214_send-transportId": {
"startTime": "2014-09-30T01:41:11.525Z",
"endTime": "2014-09-30T01:41:21.606Z",
"values": "[\"Channel-video-1\",\"Channel-video-1\",\"Channel-video-1\"]"
},
"ssrc_3309930214_send-packetsLost": {
"startTime": "2014-09-30T01:41:11.525Z",
"endTime": "2014-09-30T01:41:21.606Z",
"values": "[0,0,0,0,0,0,0]"
},
connection to chrome:
"ssrc_1684026093_send-transportId": {
"startTime": "2014-09-30T01:41:57.310Z",
"endTime": "2014-09-30T01:42:00.313Z",
"values": "[\"Channel-audio-1\",\"Channel-audio-1\",\"Channel-audio-1\",\"Channel-audio-1\"]"
},
"ssrc_1684026093_send-packetsLost": {
"startTime": "2014-09-30T01:41:57.310Z",
"endTime": "2014-09-30T01:42:00.313Z",
"values": "[-1,-1,-1,-1]" // what is causing this??
},
Those seem important, but I'm not sure exactly of the implications. I have more data, but I'm not sure exactly what is important. The main idea, is that data goes out to firefox, but not to chrome, though no exceptions occur that I can see. The one further suspicious piece of data happens if I load the peer page in Chrome Canary (latest):
Failed to load resource: net::ERR_CACHE_MISS
This is a console error, and I don't know where it comes from. It occurs after the answer is sent from the peer back to the host (chrome extension).
Signaling done over wss://, test peer is hosted at https://
I'm not sure where to go from here.
Update: Based on answer and comment, I added a handler for onicecandidate:
pc.onicecandidate = function(e) {
console.log('This is the ice candidate.');
console.log(e);
if(!e.candidate) return console.warn('no candidate!');
send('got_ice_candidate', name, e.candidate);
};
I also set up an equivalent peer connection from browser to browser using video:
var constraints = {
audio: false,
video: true
};
getUserMedia(constraints, success, printError);
This works fine, both from Firefox to Chrome and vise-versa, so the issue may be chrome-extension-specific...
There is a difference in how ice gathering occurs between the successful case and the extension case:
Between browsers, there is no ice at all. There is one event, and e.candidate is null.
From extension to browser, there are lots of onicecandidate events. They are not all in agreement. So perhaps the chrome extension is confusing the STUN server? I don't know.
Thanks for your answers, would love any more insight that you have.
can you please add handling ice candidates on both sides ?
pc.onicecandidate = function(e){ send('ice_candidate', e.target) }
And on the other side on receiving this 'message' do
pc.addIceCandidate(new RTCIceCandidate(message));
Chrome sends ice candidates even after offer/answer have been exchanged which firefox does not seem to do.
Is there a way to only make my OWN browser (Chrome) not be able to go back / forward / refresh?
This happens rather often that when Im developing and playing around in devtools (Changing HTML and CSS just to try things out) I sometimes accidentally swipe back or out of habit hit refresh. I would like to be able to disable the back or forward button via some sort of extension?
I am NOT trying to disable the button on any live-website, just for me locally. Any ideas?
If you want to prevent accidental navigations, there's no need to install any extension. Just open the console, and run the following code:
window.onbeforeunload = function() {
return 'Want to unload?';
};
With this code, you will get a confirmation prompt.
If you really want to prevent the page from unloading via an extension, use the technique described in the answers to How to cancel webRequest silently in chrome extension.
Here's a minimal demo extension that adds a button to your browser. Upon click, you cannot navigate to a different page any more. You can still close the tab without any warning, though:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var scheme = /^https/.test(details.url) ? 'https' : 'http';
return { redirectUrl: scheme + '://robwu.nl/204' };
// Or (seems to work now, but future support not guaranteed):
// return { redirectUrl: 'javascript:' };
}, {
urls: ['*://*/*'],
types: ['main_frame'],
tabId: tab.id
}, ['blocking']);
});
manifest.json for this extension:
{
"name": "Never unload the current page any more!",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": ""
},
"permissions": [
"<all_urls>",
"webRequest",
"webRequestBlocking"
]
}
In Google Chrome, when viewing the developer tools, in the bottom right there is a Gear Icon that opens an additional Settings popup. One of the pages in the Settings popup is Overrides that contains User Agent and Device Metrics settings. I am trying to find the extensions API that is able to set those values programatically. Does such an API exist?
I've looked the main apis, and the experimental apis , but can't seem to find anything.
The sample for devtools.panels in the code samples doesn't seem to indicate how to 'explore' the existing devpanels either.
Specifically I'm trying to build simple extension available from a context menu in a Browser Action. It would act like a user-agent switcher, offering choices from the same list in the Settings popup, and automatically sets the Device Metrics to the values of the selected Agent. e.g. 640x960 for IPhone 4.
Any leads on how to programatically access the Settings popup
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 changed using the Network.setUserAgentOverride command:
// 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 the supported protocols and commands can be found here. As of writing, there's no documentation for changing the Device metrics. However, after digging in Chromium's source code, I discovered a file which defined all currently known commands:
chromium/src/out/Debug/obj/gen/webcore/InspectorBackendDispatcher.cpp
When I look through the list of definitions, I find Page.setDeviceMetricsOverride. This phrase seems to match our expectations, so let's search further, to find out how to use it:
Chromium code search: "Page.setDeviceMetricsOverride"
This yields "chromium/src/out/Release/obj/gen/devtools/DevTools.js" (thousands of lines). Somewhere, there's a line defining (beautified):
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 this? Well, use your imagination:
chrome.debugger.sendCommand({
tabId: tabId
}, "Page.setDeviceMetricsOverride",{
width: 1000,
height: 1000,
fontScaleFactor: 1,
fitWindow: false
}, function(response) {
// ...
});
I've tested this in Chrome 25 using protocol version 1.0, and it works: The tab being debugged is resized. Yay!
Hi!
I'm building a Chrome extension, in which I need to embed a SWFobject in the background page.
Everything works, except the JavaScript controls for the SWFobject and the eventListeners.
My guess is that it has something to do with the cross-domain policies, because while testing the page on a webserver everything worked fine.
Anyway, here's a snippet:
In the main page:
var playerView = chrome.extension.getBackgroundPage();
$('#playerPause').click(function(){
playerView.playerPause();
});
In the background:
function playerPause() {
if (postData[nowPlaying].provider == 'youtube' ) {
player.pauseVideo();
}
else if (postData[nowPlaying].provider == 'soundcloud' ) {
player.api_pause();
};
}
And the eventListeners:
soundcloud.addEventListener('onMediaEnd', playerNext);
function onYouTubePlayerReady(player) {
player.addEventListener("onStateChange", "function(state){ if(state == 0) { playerNext(); } }");
}
In the console it throws
"Uncaught TypeError: Object # has no method
'pauseVideo'"
for both the Youtube embed the Soundcloud one.
Also, the SWFobject is embedded like this (and works):
function loadTrack (id) {
if(postData[id].provider == 'youtube') {
swfobject.embedSWF(
"http://www.youtube.com/e/" + postData[id].url + "?enablejsapi=1&playerapiid=player",
"player",
"1",
"1",
"8",
null,
{
autoplay: 1
},
{
allowScriptAccess: "always"
},
{
id: "player"
}
);
}
else if(postData[id].provider == 'soundcloud') {
swfobject.embedSWF(
'http://player.soundcloud.com/player.swf',
'player',
'1',
'1',
'9.0.0',
'expressInstall.swf',
{
enable_api: true,
object_id: 'player',
url: postData[id].url,
auto_play: true
},
{
allowscriptaccess: 'always'
},
{
id: 'player',
name: 'player'
}
);
}
}
Sorry for the lengthy post, I wanted to provide as much information as possible.
Also, I know the code isn't pretty, this was only my second application ;)
Thanks a lot in advance to anyone who can help,
Giacomo
You can have a look at this extension, you can not access local connection in chrome extension, but you can run a content script as a proxy script instead.(You can serve a proxy page on gae or any other free servers)
The problem here is that you can't use inline scripts or inline event handlers in chrome extensions ever since the manifest evolved to v2.
You should have added the manifest file for me to understand what's going on better. But briefly all you CAN ever do is
In the main page,
Remove all inline scripts and move them to an external JS file.
Remove inline event listeners, move them to the same or another external JS and use
addEventListener().
But the issue is, You can't execute calls to the swf in the background page or expect it to return anything. All these will continue to give you "Uncaught TypeError" Exception.
Take the case of a webcam image capturing swf, the webcam will be streamed to the page, but the function call to it can never be made and hence the image will never be captured.
My project to scan QR codes from the addons popup met the ruins due to this.