Develop Reference

Uncaught TypeError: navigator.getBattery is not a function

I'm developping a website which is meant to be used on mobile devices using Google Chrome, the purpose is to list information such as time (hh:mm) and battery level.
I saw the Battery Web API but I'm experiencing a strange error:
click to see the chrome error
Here is the code I used in order to get the battery level:
navigator.getBattery().then(function (battery) {
console.log(Math.round(battery.level * 100))
});
I had the error yesterday, without changing any line of code, it is working today on my tablet (chrome version: 103), but I tested on another tablet (Samsung Galaxy TAB A7 LITE, Chrome version: 103) and I encounter the error, I restarted several times the devices, inspected pages using the devtools connected by cable to my laptop, but I can't solve this error.
I saw a topic having the same error but he was developing a web worker it is not the same context as I.
No matter when I'm calling the navigator.getBattery() if the error appeared in the beginning it will stay undefined later, so it is not a problem of timing to call it (I even bound it to the body.onload but it didn't work).
I thought it could be authorization issues on system information but there's nothing refering to the battery which is not authorized in the application settings of Chrome.
Any help is welcome :D

I found out where my error was coming from.
It is a problem of HTTPS, my testing environment is configured behind a NGINX HTTP Server, which serves HTTP and HTTPS version of my application in order to use a single certificate for every of my projects, Chrome on my laptop prefix URLs I'm accessing with https:// and it is hidden in the navbar, but it is not the case on Chrome tablet or mobile, I thought I was consulting the HTTPS version but it was HTTP, and Battery Web API isn't accessible on HTTP websites, it is required to have a secure connection using HTTPS and certificates. It has nothing to do with version number since Battery Web API is fully supported since Chrome version 38 according to MDN Documentation.

Why am I getting this error chrome-extension://invalid

I am facing a wierd problem accessing the Chromecast extension in Chrome.
I made a web page and when the user press connect it call the Cast Api and open the dialog to connect to a Chromecast.
In some pcs it doesn't work the error that appears is:
chrome-extension://invalid Failed to load resource: net::ERR_FAILED
The error just occurs in Windows in non administrator accounts.
I thought it was the proxy, or the company network firewall, but it wasn't we tested without the proxy and the error occurs.
If the account is a Windows Administrator it works!
My guess is that the Chrome or Windows is blocking the access to the extension because is a javascript calling the cast.js and the cast.js calls extension (Maybe CORS).
My website has https. I set in Internet Options as a trusted site.
In old Chromes the error is different:
GET chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js
net::ERR_FAILED
Does anyone know how to fix it(chrome-extension://invalid)?

In my case when I played audio sound/beep.ogg, it worked but console contained same error. I solved it by adding it to web_accessible_resources in manifest.json:
"web_accessible_resources": [
"tileset/*.json", "layer/*.json", "sound/*.ogg"
],

I discovered what happened.
The corporate network is protected by their proxy.
We monitored the calls and discovered that:
The cast lib tries to call the cast extension "pkedcjkdefgpdelpbcmbmeomcjbeemfm", which is not installed at %appdata% folder.
The Chrome tries to download it at: gvt1.com and the network blocked this domain. After talking to the network administrator, we released the domain and it worked.

Sometimes this happens because of a failed extension. If you go to the Network Tab in Chrome Developer tools, and hover over the Initiator column on the line showing invalid in red, you'll see something like
chrome-extension://jjfblogammkiefalfpafidabbnamoknm ...
Then go to the Extensions page for Chrome, and you'll see an extension with that ID. Disable or Remove that extension.

Error parsing header X-XSS-Protection - Google Chrome

I upgraded Google Chrome to Version 64.0.3282.140 (Official Build) (64-bit) on a Windows 10 machine. Once I did, I am getting this error on my site within the developer tools console. Not real sure where to start. I did see a similar issue last year that was an issue with youtube (also in the url), but I haven't seen any solutions.
Error parsing header X-XSS-Protection: 1; mode=block;
report=https://www.google.com/appserve/security-bugs/log/youtube: insecure
reporting URL for secure page at character position 22. The default
protections will be applied.
16:07:31.905
I'm also seeing the issue when I go directly to youtube via the embedded url so it's not just on my site.
UPDATE
I've attached a photo of the headers in the response that indicate the google.com url that appears to be generating the issue.

It's a known bug in the current Google Chrome and Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=807304
In the current version of their browser, the Chrome developers had restricted the X-XSS-Protection's report field URL to the same domain origin for some security reasons. So, when you embed a video with some embed code, as it downloads from another server where the header "report=https://www.google.com/" is set, and while your page is not hosted at the google.com domain - the error message occurs.
Yet, all minor sites (including youtube.com) are sending report URL with different origin domains in it. Probably, they are not even aware of this recent change in Chrome. So either YouTube will change their headers or Chrome developers will revert this. There's nothing that we, as end users, can do. Just wait till they sort this out.
UPDATE:
The issue has been fixed in Version 66.0.3359.117 (Official Build) (64-bit)

The issue has been fixed in Google Chrome new update.
Version 66.0.3359.117 (Official Build) (64-bit)
Make sure you have updated Chrome to this version.

Google Chrome Push Notifications not working if the browser is closed?

It is written here that the push notifications will work even if the browser is closed, but I tested it and it is not the case. I receive push-notifications only if the browser is open (doesnt matter if the particular webpage is open or not).
I tested this on chrome for Desktop & chrome for Android (after updating to latest version).
my question is :- For push notifications to work should the browser be open?
Note:- I used this for testing.

According to Can I Use, Chrome and Firefox desktop browsers require the browser to be running for receiving push notifications; mobile browsers typically don't.

Open Settings (in chrome)
Do the following:
> advanced
> system >
"continue running background apps when chrome is closed"
>enable

On desktop, browsers need a process running. For example on Mac OS X the browser can have no window open but if you look at the dock, the light underneath icon can be glowing (meaning it has a process running). In the scenario you should receive push messages.
If the browser was completely quit, then push messages won't get through.
The same applies to windows and Linux.
On android you should be receiving the messages regardless of whether the browser is open or not. This is in part (as far as I know) to the fact that android manages it's connection to the push service rather than the browser, so it'll receive messages whenever possible.

The messages should (eventually) get through even if they are sent while the browser is closed, or the device is offline, etc. (And this works for me using https://gauntface.github.io/simple-push-demo/ and other tests.)

I've worked on demo to provide push notifications on Google Chrome and Firefox. Demo -> https://twitter.com/d_danailov/status/1163824171480166400
If someone has a question could ping me on twitter.
The public URL: https://push-notifications-ddanailov.firebaseapp.com/
Repo: https://github.com/dimitardanailov/push-notifications

On desktop the browser needs to be running since that is the process that receives the push messages. Some extensions, like hangouts force the browser to keep running even when the last tab is closed so for users with one such extension installed push will work all the time.
On Android, the browser does not need to be running since the entity in charge of receiving the messages is baked into Google Play Services.
The Chrome team is working on the desktop issue in https://bugs.chromium.org/p/chromium/issues/detail?id=402456

It is possible to write Chrome extension where background script can run if Chrome is allowed to run in the background (configurable in settings). It can also use GCM.
EDIT:
For service worker to run in the background even if no tab or window is opened there must be at least one Chrome extension with background permissions installed and Chrome must be allowed to run apps in background. Tested on Linux.

Yes, the other users are right and there is no way to receive them on Windows if the browser is closed unless the browser is running in the background, which some Chrome Apps and Extensions can force. I ran into this recently and found this extension, which I believe may help. It keeps the browser running in the background even if the windows are closed but does not do anything besides that (it is open source and presumably the version uploaded to the Chrome Store matches that version)
https://chrome.google.com/webstore/detail/lightning-reopen/ahphokgmcecbjeipkfkamcdmemghkaph

Chrome SecurityError loading jQuery Mobile page from local file system

I get the following error in Chrome when loading a trivially simple html file with a jQuery Mobile reference. The error is not present with just the jQuery reference.
Uncaught SecurityError: Failed to execute 'replaceState' on 'History':
A history state object with URL 'http://stacksnippets.net/js' cannot
be created in a document with origin 'null'.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body></body>
</html>
You can also "Run code snippet" and see the error in the console.
This error did not happen before today. I have not changed my code or method of loading the html file in the browser. It used to work perfectly - I use the same code for all my PhoneGap apps.
Does anyone know if there was a Chrome security update that causes this SecurityError or whether I'm missing something? How would you go about debugging this? Thank you.
UPDATE
This discussion I think points out what is going on, which I suspected, since the error does not appear when running with a web server: Origin null is not allowed by Access-Control-Allow-Origin .
But I am still wondering why this changed in the past day, whether Chrome has had a change in their security policy, or why it was working before, and whether any of my PhoneGap apps will be affected.

This error is same as the origin is null error. This error occurs because of the security feature of Chrome.
A simple solution to test the application is to bypass this security on chrome.
Steps:
create a chrome browser shortcut on desktop.
Close all the instances of chrome on your machine.
Right click on the desktop shortcut of chrome and click on Properties.
in Target field, append " -allow-file-access-from-files" at the end.
Save and close properties.
Open chrome via this shortcut only.
Hurry, the error has gone. App works perfectly.
NOTE: This is just a work-around I use to test my cordova apps on desktop browser for UI testing.

Temporary solution: I've commented out all history.replaceState calls in jquery mobile, didn't need to manipulate browser history in my app anyways.
I wonder if it's chrome security bug or model and future behavior.

On a Mac I was able to fix this by running a webserver instead of loading it from a "file://" url:
http://lifehacker.com/start-a-simple-web-server-from-any-directory-on-your-ma-496425450?utm_expid=66866090-49.VYy4WCNHSyuP6EmjnM93MQ.0&utm_referrer=https%3A%2F%2Fwww.google.com%2F
python -m SimpleHTTPServer 8000
In the directory should make it available from Chrome via 0.0.0.0

I don't seem to have the same problem, not on the stable version of Chrome (45) or the Dev version (47).
However, I have personally seen issues with the CORS header, too. If you can cause the problem to happen reliably, I suggest filing a bug at crbug.com and a Chrome developer will have a look at it.