Develop Reference

Chrome, allow autoconnect for HID device

So I'm trying to read out a USB-scale thats connected to my pc. I use chrome's experimental HID api.
I use Tampermonekey as userscript injector to extend a website's functionality.
The script I inject looks like this:
navigator.hid.requestDevice({ filters: [{ vendorId: 0x0922, productId: 0x8003}] }).then((devices) => {
if (devices.length == 0) return;
devices[0].open().then(() => {
if(disconnected) {
disconnected = false
}
console.log("Opened device: " + devices[0].productName);
devices[0].addEventListener("inputreport", handleInputReport);
devices[0].sendReport(outputReportId, outputReport).then(() => {
console.log("Sent output report " + outputReportId);
});
});
});
When I run it just like this(inline) I get the message in chrome:
DOMException: Failed to execute 'requestDevice' on 'HID': Must be handling a user gesture to show a permission request.
Basically, the code needs to be inside an event listener and the listener needs to be triggered by user input to run.
Al fine and dandy, except that this has to be initialized hundreds of times a day. I tried running this code in edge and here it just works without user input.
Is there a way I can disable this security feature(completely or only for the site im using it on) in chrome? I know edge is based on chromium so I expect it to be possible, but am unable to find how/where

You can use HID.getDevices() to retrieve an HID device that the user has already granted access to.
My suggestion would be to check for the device you want with getDevices first. If you can't find the device, then make something the user can interact with that will allow you to use requestDevice to connect to the device.

Not allowed to launch cutom protocol because a user gesture is required

I need to run my custom protocol twice but it doesn't work the second time, I got this error ( Not allowed to launch 'cutomProtocol' because user gesture is required. ) I tried to find a solution but I did not find any!
Same problem with chrome, firefox and edge.
I need to see this popup twice
window.location.href = 'my-protocol://${base64}';
and
customProtocolVerify(
`my-protocol://${base64}`,
() => {
// successCb: Callback function which gets called when custom protocol is found.
console.log('My protocol found and opened the file successfully..');
},
() => {
// failCb: Callback function which gets called when custom protocol not found.
console.log('My protocol not found.');
}
);
I tried with these two and didn't work
Clarification
I have a custom protocol.
My scenario:
check if it's installed successfully (I'm using customProtocolVerify method) and that method makes the launch if the protocol is found
run some APIs
launch the protocol again
My problem:
Step 3 doesn't work, I have the error on the console that says " Not allowed to launch... " and of course I can't see my popup to open my protocol.
I'm asking for help to make step 3 work

The only way to bypass this "bug" is to ask the user twice (or in a loop) by showing a OK alert or some sort of user confirm box.
My solution:
OpenLinkInExternalApp(Link);
alerty.alert('', { title: '', okLabel: 'Open Link' }, function () {
OpenLinkInExternalApp(Link);
});
The above code will open the external app, then a OK alert will pop up, after clicking OK, I call the same code again. Do this in a loop if needed.
TIP:
We guide our users to use split screen at this stage. This is where users can dock your web-app on the left and the external app on the right as an example.
Alert Box:
We user Alerty.js https://github.com/undead25/alerty#readme

Facebook SDK change display type in the FB.login()

I'm working on the Facebook Login integration into my website and I've done everything which was necessary to achieve this and described in the Facebook documentation
So I'm using FB.login() method
export function facebookLogin() {
return new Promise((res: any, rej: any) => {
// TODO: maybe it might be moved to some dedicated API file? But we don't want to use it anywhere else
FB.login((response: FacebookLoginCallbackResponse) => {
if (response.authResponse) {
res(response.authResponse);
} else {
rej();
}
}, {scope: "public_profile, email"});
});
}
It works fine but when the popup is opened (and it's really big. I would like to make it smaller) the warning shows at the bottom of window.
You are using a display type of 'page' in a small browser window or popup. For a better user experience, show this dialog with our JavaScript SDK without specifying an explicit display type. The SDK will choose the best display type for each environment
The question is: How to change it? There is no option TYPE in the Login Dialog parameters. I didn't found anything about this possibility in the Login Dialog documentation.
Can someone give me some tip, please?

Geolocation problems when switch GPS on and off

Thanks in advance first.I build a website with an option to lead you to a specific place when you click button "Navigate". Everything works fine on desktop and everything works fine on mobile when GPS of the phone is enabled.
I use the google maps reference and it works just fine:
http://maps.google.com/maps?saddr=myLat,myLng&daddr=targetLat,targetLng
I do this on $('.button').click(). Not on $(window).load or $(document).ready. When you click the button, it calls the geolocation functions:
function getGeolocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
} else {
$('.error-message').html('<p>Your browser does not support this function</p>');
}
}
function geoSuccess(position) {
myLat = position.coords.latitude;
myLng = position.coords.longitude;
window.location.href = 'http://maps.google.com/maps?saddr=' + myLat + ',' + myLng + '&daddr=targetLat,targetLng';
}
function geoError(){
switch(error.code) {
alert('example alert - enable GPS');
case error.PERMISSION_DENIED:
$('.error-message').html('<p>User denied the request for Geolocation.</p>');
break;
case error.POSITION_UNAVAILABLE:
$('.error-message').html('<p>Location information is unavailable.</p>');
break;
case error.TIMEOUT:
$('.error-message').html('<p>The request to get user location timed out.</p>');
break;
case error.UNKNOWN_ERROR:
$('.error-message').html('<p>An unknown error occurred.</p>');
break;
}
}
But the problem comes when the GPS is disabled.
First of all, sometimes, it doesn't enter in geoError(). I tried so many times, but the only thing I "found" is that it caches sometimes. Is that possible ?
But the main problem is that, when the GPS is disabled, the "example alert" pops up, then I turn my GPS on and click the button again, it doesn't work again. I have to refresh the page to apply the GPS turn on. I want to avoid that. Does anyone know why is that happening and is there a way to do what I want?
The other problem is when I load my page with GPS turned on. Then I turn it off and click the button. Nothing happens at all. It enter getGeolocation(), gets true and then it stops. It doesn't enter getCurrentPosition(). Any ideas?

I had ever faced the same problem, and final I found the solution. You can change getCurrentPosition to watchPosition, it seems getCurrentPosition cannot recognize when location changes, watch help us do that. Try my solution, hope it helps you :)
P/S you should settime out: 10000 for watchpostion or getcurrentpostion

I've got the same problem on Android 6.0 and Chrome 59.0.3071.125.
In short: When I start a webapp with location Off, I receive a PositionError as expected.
However when I switch location back to On, every subsequent call to navigator.geolocation.getCurrentPosition or navigator.geolocation.watchPosition returns same error.
I've tried the same with maps.google.com and result is exactly the same (they show a snackbar Google Maps could not determine your precise location) so I believe that there is no workaround.
There is a similar post on ionic framework forum - They didn't find a solution either.
To sum up:
Looks like Chrome is checking for location services **on page load and doesn't update the state any more.
So only thing that helps is reloading the webapp which forces chrome to check again if location services are available.
Update:
this is a known bug in Chromium: 672301, 721977.
Workaround is available in Chrome Mobile v59 behind lsd-permission-prompts flag.

In your error function, the argument is missing.
function geoError(error){
//code goes here
}
Source: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error

How to detect Chrome extension uninstall

I am trying to detect whether my extension was uninstalled.
I can't use chrome.management.onUninstalled because it will be fired on other extension.

As of Chrome 41, you can now open a URL when the extension is uninstalled. That could contain an exit survey or track the uninstall event as some sort of analytics.

Google Chrome, unlike Firefox, doesn’t allow to detect when the user uninstalls the extension, which is quite useful to understand user behaviour.
There is a feature request on crbug.com with a discussion of this feature but it has not been implemented yet.

You can call chrome.runtime.setUninstallURL("www.example.com/survey") and redirect user to a url. Unfortunately, as soon as the extension is removed, the background script is removed too, and you can't do anything like log event or send hit to google analytics.
What I did is to set the redirect url to my server endpoint, and do some tasks like logging event to my own db, or sending hit to google analytics (ga hit builder). Then call res.status(301).redirect("www.example.com/survey") to some survey url. Finally I can send the uninstall event to google analysis.

If you're on Manifest V3, you can add it on your onInstalled Listener. If you want to capture uninstall for existing users as well, you need to add it to 'update' as well.
Place this code in your background page:
chrome.runtime.onInstalled.addListener(function (details) {
if (details.reason == 'install') {
... can add things like sending a user to a tutorial page on your website
chrome.runtime.setUninstallURL('https://www.yourwebsite.com/uninstall');
} else if (details.reason == 'update') {
... can add things like sending user to a update page on your website
chrome.runtime.setUninstallURL('https://www.yourwebsite.com/uninstall');
}
});
Find more information here: https://developer.chrome.com/docs/extensions/reference/runtime/#method-setUninstallURL

For mv3: An easy way would be to have
// Redirect users to a form when the extension is uninstalled.
const uninstallListener = (details) => {
if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
chrome.runtime.setUninstallURL('https://forms.gle/...');
}
if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
// TODO: show changelog
}
};
chrome.runtime.onInstalled.addListener(uninstallListener);
Place it in your background.

Content Script can Detect an Uninstall
Simply check the value of chrome.runtime, which becomes undefined when an extension is uninstalled.
A good trigger to check this is port disconnect:
// content_script.js
const port = chrome.runtime.connect();
port.onDisconnect.addListener(onPortDisconnect);
function onPortDisconnect() {
// After the extension is disabled/uninstalled, `chrome.runtime` may take
// a few milliseconds to get cleared, so use a delay before checking.
setTimeout(() => {
if (!chrome.runtime?.id) {
console.log('Extension disabled!');
}
}, 1000);
};