Using getUSerMedia AND webkitSpeechRecognition allow access x 2 - audio

I am creating a site that uses two types of audio input... getUserMedia and webkitSpeechRecognition. Both functions are working fine but Chrome is popping up it's access security pop-up twice - which makes sense. Does anyone know how to have one access permission handle both functions?
Cheers SO!
navigator.getUserMedia({audio:true}, gotStream, function(e) {
alert('Error getting audio');
console.log(e);
});
and...
var recognition = new webkitSpeechRecognition();

The only way to avoid asking for permissions multiple times is to make sure that your web page is using the https url. Then Chrome will remember your permissions and not show the pop-up again.

On Chrome 36 (and possibly earlier ones) I'm getting just one popup bar for both.

Related

How to fill login prompt with Webdriver IO?

I'm working on a CLI with OCLIF. In one of the commands, I need to simulate a couple of clicks on a web page (using the WebdriverIO framework for that). Before you're able to reach the desired page, there is a redirect to a page with a login prompt. When I use WebdriverIO methods related to alerts such as browser.getAlertText(), browser.sendAlertText() or browser.acceptAlert, I always get the error no such alert.
As an alternative, I tried to get the URL when I am on the page that shows the login prompt. With the URL, I wanted to do something like browser.url(https://<username>:<password>#<url>) to circumvent the prompt. However, browser.url() returns chrome-error://chromewebdata/ as URL when I'm on that page. I guess because the focus is on the prompt and that doesn't have an URL. I also don't know the URL before I land on that page. When being redirected, a query string parameter containing a token is added to the URL that I need.
A screenshot of the prompt:
Is it possible to handle this scenario with WebdriverIO? And if so, how?
You are on the right track, probably there are some fine-tunings that you need to address to get it working.
First off, regarding the chrome-error://chromewebdata errors, quoting Chrome DOCs:
If you see errors with a location like chrome-error://chromewebdata/
in the error stack, these errors are not from the extension or from
your app - they are usually a sign that Chrome was not able to load
your app.
When you see these errors, first check whether Chrome was able to load
your app. Does Chrome say "This site can't be reached" or something
similar? You must start your own server to run your app. Double-check
that your server is running, and that the url and port are configured
correctly.
A lot of words that sum up to: Chrome couldn't load the URL you used inside the browser.url() command.
I tried myself on The Internet - Basic Auth page. It worked like a charm.
URL without basic auth credentials:
URL WITH basic auth credentials:
Code used:
it('Bypass HTTP basic auth', () => {
browser.url('https://admin:admin#the-internet.herokuapp.com/basic_auth');
browser.waitForReadyState('complete');
const banner = $('div.example p').getText().trim();
expect(banner).to.equal('Congratulations! You must have the proper credentials.');
});
What I'd do is manually go through each step, trying to emulate the same flow in the script you're using. From history I can tell you, I dealt with some HTTP web-apps that required a refresh after issuing the basic auth browser.url() call.
Another way to tackle this is to make use of some custom browser profiles (Firefox | Chrome) . I know I wrote a tutorial on it somewhere on SO, but I'm too lazy to find it. I reference a similar post here.
Short story, manually complete the basic auth flow (logging in with credentials) in an incognito window (as to isolate the configurations). Open chrome://version/ in another tab of that session and store the contents of the Profile Path. That folder in going to keep all your sessions & preserve cookies and other browser data.
Lastly, in your currentCapabilities, update the browser-specific options to start the sessions with a custom profile, via the '--user-data-dir=/path/to/your/custom/profile. It should look something like this:
'goog:chromeOptions': {
args: [
'--user-data-dir=/Users/iamdanchiv/Desktop/scoped_dir18256_17319',
],
}
Good luck!

How to fix 'Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.'

I have the following error in the Chrome Dev Tools console on every page-load of my Node/Express/React application:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
This error makes a reference to localhost/:1. When I hover over this, it shows http://localhost:3000/, the address I'm viewing the app at in the browser.
Anyone have an idea what is going on? Most of the other threads I've found that bring up this error seem to be related to someone trying to develop a Chrome Extension, and even then they tend to have very few responses.
I'd been getting the exact same error (except my app has no back-end and React front-end), and I discovered that it wasn't coming from my app, it was actually coming from the "Video Speed Controller" Chrome extension. If you aren't using that extension, try disabling all of your extensions and then turning them back on one-by-one?
I found the same problem when developing the Chrome extensions. I finally found the key problem.
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
The key problem is that when background.js sends a message to the active tab via chrome.tabs.sendMessage, the content.js on the page is not ready or not reloaded. When debugging. We must ensure that content.js is active. And it cannot be a page without refreshing , The old pages don not update you js itself
Here is my code:
//background.js
chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response);
});
});
//content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
console.log(request, sender, sendResponse);
sendResponse('我收到你的消息了:'+JSON.stringify("request"));
});
The error is often caused by a chrome extension.
Try disabling all your extensions, the problem should disapear.
Solution
For Chrome:
You have the window open with the console error, open up a second new window.
In the second window, go to:
chrome://extensions
Disable each extension by toggling (the blue slider on the bottom right of each card), and refresh the window with the console after toggling each extension.
Once you don't have the error, remove the extension.
If you are an extension developer see this Chrome Extension message passing: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
The core of the problem is that chrome API behavior change and you need add a workaround for it.
You need to handle window.chrome.runtime.lastError in the runtime.sendMessage callback. This error just needs to be handled. Below is my code:
window.chrome.runtime.sendMessage(
EXTENSION_ID,
{ message:"---" }, // jsonable message
(result) => {
if (!window.chrome.runtime.lastError) {
// message processing code goes here
} else {
// error handling code goes here
}
}
);
});
🙂simple answer:🙂
if you have no response from another End it will also tell you Receiving end does not exist.
detailed answer:
if you have no answer from another end it will also tell you Receiving end does not exist. so if you have any callBack function which should use response in your .sendMessage part, you should either delete it or handle it if you probably have no response from another side.
so
if i wanted to re-write Simple one-time requests section of Message passing documents of google API i will write it with error handlers for callback functions in message-sending methods like this:
Sending a request from a content script looks like this:
chrome.runtime.sendMessage({greeting: "hello"}, function (response) {
if (!chrome.runtime.lastError) {
// if you have any response
} else {
// if you don't have any response it's ok but you should actually handle
// it and we are doing this when we are examining chrome.runtime.lastError
}
});
Sending a request from the extension to a content script looks very similar, except that you need to specify which tab to send it to. This example demonstrates sending a message to the content script in the selected tab.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
if (!chrome.runtime.lastError) {
// if you have any response
} else {
// if you don't have any response it's ok but you should actually handle
// it and we are doing this when we are examining chrome.runtime.lastError
}
});
});
On the receiving end, you need to set up an runtime.onMessage event listener to handle the message. This looks the same from a content script or extension page.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting === "hello")
sendResponse({farewell: "goodbye"});
}
);
Removing 'Udacity Frontend Feedback' chrome extension solved the issue for me.
This was happening in Chrome for me and I discovered it was McAfee WebAdvisor. Once I disabled it, the message went away:
The simple fix is to return true; from within the function that handles chrome.tabs.sendMessage.
It's stated
here.
(this is similar to other answers)
I removed "Video Speed Controller" Chrome Extension and the error was removed.
It worked for me like this. In your case there may be some other extensions too which may cause this error.
It was tab bnundler for me: https://chrome.google.com/webstore/detail/tab-bundler/ooajenhhhbdbcolenhmmkgmkcocfdahd
Disabling the extension fixed the issue.
It was a few extensions for me. Disabling and then re-enabling fixed the problem though. Grammarly was one of them. Hope the errors don't return.
Oddly enough, for myself I simply disabled all my extensions and the error went away.
However, after re-enabling all of the ones I disabled, the error was still gone.
I was testing my extension on edge://extensions/ page/tab. Testing it on another tab solved this issue. I think this may also occur for chrome://extensions/.
This is caused simply by installed chrome extensions, so fix this first disable all chrome extensions then start to enable one after another to detect which extension is cause you can enable the remaining.
in my case removing 'adblocker youtube' extension work for me
For me the error was due to the onelogin chrome extension. Removing it fixed the issue.
Cacher Extension in my case - but yeah disable each and then reload page
This is usually caused by an extension.
If you don't want to disable or remove the extension which causes this error, you can filter out this specific error by typing -/^Unchecked\sruntime\.lastError\:\sCould\snot\sestablish\sconnection\.\sReceiving\send\sdoes\snot\sexist\.$/ in the Filter box in the console:
As far as I've seen, this filter will stay until you remove it manually, you can close and reopen the console, restart Chrome, etc as much as you want and the filter will never be removed automatically.
I get the message only on the first Chrome page =
When Chrome is not running, and I open it - either directly or by double-clicking on a page on my desktop.
(I don't know if this matters, but I have "Continue running background apps when Google Chrome is closed" off.)
So, I'm assuming it's Chrome's crap spying/"enhancing user experience" attempt.
I don't know what it's trying to send, but I'm glad it's not able to! :)
So, second (or any but first) tab has no error.
== No need to disable anything (extensions, etc.).
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I "achieved" this error after
installing the Debugger for Chrome extension in Visual Studio Code,
debugging my code, and
closing and reopening the non-debugging Chrome window. (I had left Chrome running my app while debugging.)
Solutions:
Stop using the extension.
Refresh the non-debugging Chrome window.
Use a different debugger.
Of course, the console error reappears when I redo steps 2 and 3 above with the Debugger for Chrome. This encourages me to use other debuggers instead. Then I don't mistakenly think my own code produced the console errors!
For me this was caused by :
Iobit Surfing Protection & Ads Removal extension
which comes with Iobit advanced system care software. However, the console might provide you with relevant information on what you need do disable or the cause for that problem.
The likely cause of this error, as per google searches is because that extension which causes the error, might be using the chrome.runtime.sendMessage() and then tries to use the response callback.
Error shown in the console
Hope this information helps. Have a great day!
For chrome extension development, it's an error thrown by chrome.tabs.sendMessage method.
Here is the link of related documentation: https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage. In the link you can find the description for the callback function: If an error occurs while connecting to the specified tab, the callback is called with no arguments and runtime.lastError is set to the error message.
According to documentation above, the error is because of the specified tab. I restart chrome and reloaded the extension, and this issue is fixed
I solved this in following way. This is mainly chrome extension problem, try to first empty cache and hard reload for this inspect any window and hold reload button about 2 second then it will appear 3 options click last one which is mentioned above then go to manage extensions and turn off one by one and then turn on again one by one and check it's gone or not.
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
chrome.runtime.lastError
It's an error that appear in the Chrome devTools console.
And it's related to Chrome Chrome Message Passing
Because of the 'rigid structure' of the Chrome platform, it's not easy to pass data between different Chrome windows/tabs, as it's common to do in the 'object oriented' programming languages.
In Chrome extensions, usually, there is not a single file of code, that runs for all pages or tabs.
It's a common use, to build many different files of code in javascript, for different Windows/tabs/url address.
So, when the software, need to pass data from different windows/tabs/url, it's made using 'message passing'
The 'message passing', allow to send a 'message' and wait to receive a message as 'callBack'
But sometimes happens, in example, that the url of a window, or a tab, change, when there is a 'message passing' function which has been triggered, but still not returned.
If this situation it's not managed by code (as wrote TechDogLover OR kiaNasirzadeh), or it's an old extension not updated, this error can arise.
So as others users said, it could be an extension, which is running in your Chrome.
But if your window doesn't crash, it doesn't have much sense disable an extension because of such message appear in the devTools Console.
And it doesn't have sense try to understand how to fix it (if you are not the developer of the software which is causing the error), because the variables are so many, that it's not said that the error will be triggered again, in the same situation.
In those cases, in my opinion, if you really want to do something, a good thing to do could be, once you find the extension that cause the error, contact the extension developer and report it.
And if you are the developer, you could check for a missing
if(!chrome.runtime.lastError){
// here if there is no error
} else {
// here if there is an error
}
Or, also you could check your code, if you did more than one callBack, e.g. as explained there
wOxxOm comment
I also encountered this problem when I was developing chrome extensions.
Error: Could not establish connection. Receiving end does not exist.
The error message from chrome.tabs.sendMessage
The solution is to make it return the promise and use catch to handle the error and define it yourself. Example
Apparently an error occurred during browser startup and the browser did not launch extensions such as stylish, adblock. I closed the browser and reopened it and my page worked without errors.

Corona net::ERR_CACHE_MISS comes when loading an external url in Corona

I am using Corona to make an app. I have implemented following code to open a website/a page inside my app view instead of browser:
function openLink(event)
if(event.phase == "ended")then
print("btn clicked")
local webView = native.newWebView( display.contentCenterX, display.contentCenterY, 320, 480 )
webView:request( "http://www.coronalabs.com/" )
local text1 = display.newText("",100,100,native.systemFontBold,20)
text1.text = "native should come"
end
end
btn:addEventListener("touch", openLink)
Its giving me following error on device when button is tapped:
net::ERR_CACHE_MISS
Please help me out with this. Also, I have few questions regarding feasibility of this function.
Can I access full interactivity of website inside app view? i.e. scroll through pages, open other pages, navigate to other elements of website etc.
If I can't access complete website with ease, is there any possibility that I can open multiple pages one after another of same website on click of various buttons created by me inside app?
Any help is greatly appreciated.
The ERR_CACHE_MISS error comes from Chrome. To avoid it, check the following:
Make sure you can get to the URL from a browser on the mobile
device to ensure the issue isn't with your Internet connection.
Make sure that your build.settings file in your Corona app allows for Internet
permissions. For Android, this means including the following in build.settings:
-- Android permissions
androidPermissions = {
"android.permission.INTERNET",
},

Using both activeTab and serial permissions

I am trying to use a hardware serial device to change what displays on a webpage in Chrome. I'm making a Chrome extension to do so, however it seems as if I cannot use both the activeTab and serial permissions at the same time. The activeTab permission requires the app to not be a packaged app, and the serial permission requires the app to be packaged.
How can I get around this if possible?
I am using the page redder sample code as the way to change the webpage, however it requires the activeTab permission. Maybe there is a workaround to this? Thanks
The only way I can think of is to create one Chrome Extension and one Chrome App that communicates to each other: https://developer.chrome.com/extensions/messaging#external
// The ID of the extension we want to talk to.
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
// Make a simple request:
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},
function(response) {
if (targetInRange(response.targetData))
chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});
});
// Start a long-running conversation:
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);
An alternative is to make a Native Messaging host that communicates with the device and with your extension.
From architectural point of view this makes more sense, but limits your deployment options, as the host program can't be bundled with the extension in the Web Store.

How do I call SignalR in a chrome extension background page for specific host?

I'm trying to use SignalR in a chrome extension on a background page.
Everything seems to work fine until it tries to call negotiate. It seems to be taking the caller (which is a chrome-extension background page) and trying to call negotiate against that, which gives me a 404 while trying to call this page:
chrome-extension://edcdcfjmmmchhgmomfemdkomibeoloko/signalr/negotiate?_=1372007788595
I'd imagine that it should be calling
https://myserver.com/signalr/negotiate?_=1372007788595
But I don't know how to override SignalR with a specific host. Can I override SignalR to work in a chrome extension on a background page
I assume it is javascript you are using? Try
$.connection.hub.url = "http://myserver.com/signalr";
This took me a couple hours to figure out but here's a few steps to get going on making signalr work with a google chrome extension.
Place within the javascript
$.connection.hub.url = "http://yoursever.com/signalr"`
Within the manifest.json file for the google chrome you must give permission to access the server. I would add something like this to make it easy.
"permissions": [
"http://*/*",
"https://*/*"
]
Within your global configuration you need to change allow cross domain requests. Change
RouteTable.Routes.MapHubs()
to
RouteTable.Routes.MapHubs(new HubConfiguration()
{
EnableCrossDomain = true
});

Resources