We Keep Coding

How to make a console error when a site tries to change the location?

I need to make a console error after this commands:
location = 'http://example.com/';
location.href = 'http://example.com/';
So there will be no redirect after that.
It is about the location object. No need onbeforeunload because it is a workaround (which I know) and because I need to know/see (as a variant, in console) the target url without/before redirecting, onbeforeunload can't help with this.

You can try this (it will be some like this)
const link = doc.getElementById("linkid"); // link
// link click event
link.addEventListener("click", (e) => {
try {
// when target changed
if (link.href !== "your location" // (or default target)) {
e.preventDefault(); // stops routing
console.log(link.href); // watching navigation
} else {// console.log(link.href)}
}
catch(err) {
console.err(err.message); // displaying error message
alert("Error: " + err.message);
throw err;
}
})

deviceorientation event not called on ios safari

<button onclick="test()">click here</button>
<script>
function test(){
DeviceOrientationEvent.requestPermission()
.then(response => {
if (response == 'granted') {
console.log("granted good");
window.addEventListener('deviceorientation', (e) => {
// do something with e
console.log("device orientation changed ", e);
})
}
}).catch(err => {
console.log("Err ", err);
})
}
</script>
I have this code. It seems like ios safari asks me for permission which then i grant it. So it logs granted good as shown in the if statement. The problem is if I change device orientation, event doesn't get called so no logs appear.
Any idea why ? I am using https: protocol. So not sure anymore what's going on.

chrome extension chrome.webNavigation (Event) fires multiple time

I'm building a chrome extension , I need to create a function to detect the URL changes for example youtube.com to youtube.com/watch?v={some video id}
I kept looking around for a way to do that on Content.js but apparently it's not possible and i need to use background.js in that particular case
First I've implanted this part
chrome.webNavigation.((EVENT)).addListener(function() {
alert("worked");
});
to test if chrome can detect the URL changes correctly , then i will need to connect that to content.js to Ajax the URL changes and return JSON object from the server
I saw on this page Chrome Extension - webNavigation multiple Events that i can use
Events
onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted
onErrorOccurred
onCreatedNavigationTarget
onReferenceFragmentUpdated
onTabReplaced
onHistoryStateUpdated
sadly none of them works properly as they the Alert pops Multiple times ( sometimes 1-4 times ) when i visit ( reload or visit a single page )
I don't know what i should do or if there is any other way to handle a problem like this , I'm fairly new to chrome extension and JS.
background.js
chrome.storage.sync.get( "extensionSwitch", function(data){
if( data[ "extensionSwitch" ] == undefined ){
chrome.storage.sync.set( { "extensionSwitch" : "true" }, function() { } );
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
fetch(request.input, request.init).then(function(response) {
return response.text().then(function(text) {
sendResponse([{
body: text,
status: response.status,
statusText: response.statusText,
}, null]);
});
}, function(error) {
sendResponse([null, error]);
});
return true;
});
chrome.webNavigation.onHistoryStateUpdated.addListener(function() {
alert("worked");
});

Firefox WebExtension : check if extension already exists

I'm porting my Chrome extension to a Firefox WebExtension, so far so good, I manage to communicate smoothly with my content, background scripts and my executable.
I would like now to check the existence of my extension. This is actually the way I do it :
Browser script
// browser-script.js
var isExtensionHere = false;
$("#is-extension-here").click(function(){
console.log("Check the existence of the extension");
window.postMessage({
direction: "from-page-script",
message: "areYouThere"
}, "*");
});
window.addEventListener("message", function(event) {
if (event.source == window &&
event.data.direction &&
event.data.direction == "from-content-script") {
if(event.data.message == "OK") {
isExtensionHere = true;
}
}
});
Content Script
// content-script.js
window.addEventListener("message", function(event) {
if (event.source == window &&
event.data.direction &&
event.data.direction == "from-page-script") {
if(event.data.message == "areYouThere") {
window.postMessage({
direction: "from-content-script",
message: "OK"
}, "*");
}
}
});
It works fine when the extension is here. But when it is not, obviously I don't get an answer from my extension. How can I know then how to trigger a popup or a message when the extension is not here ?

You can reverse the logic: make the page listen for a ping from the extension. You need to be mindful of when scripts execute (e.g. depending on run_at parameter) in relation to each other, so that you don't accidentally send a message before the page starts listening.
You can use another method of announcing presence to the page: a content script can add an invisible DOM element with a known ID, and you can check for its presence from the page.
If you want to keep the current approach, you can set a timer for the response to happen. Something like, say, 200ms should be more than enough.
You can implement this as a Promise, since it can only be resolved once:
var isExtensionHere = new Promise((resolve, reject) => {
const listener = (event) => {
if (
event.source == window && event.data.direction
&& event.data.direction == "from-content-script"
&& event.data.message == "OK"
) {
resolve(true);
}
}
setTimeout(() => {
window.removeEventListener("message", listener);
resolve(false); // Will have no effect if already called with true
}, 200);
window.addEventListener("message", listener);
window.postMessage({
direction: "from-page-script",
message: "areYouThere"
}, "*");
});
// Sometime later
isExtensionHere.then((result) => { /* ... */ });
If you want to dynamically re-check, make isExtensionHere a function that returns a new Promise every time.

Can’t get push notifications in Android to work using ngCordova

I'm having a tough time getting push notifications (using the ngCordova plugin) to work. I have followed their sample code exactly as is documented on the site: http://ngcordova.com/docs/plugins/pushNotifications/
(the only difference is that I don't have a deviceready listener, instead, my code is inside the ionicPlatform.ready listener.)
Here is my code:
angular.module('myApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $rootScope, $state, $cordovaPush) {
$ionicPlatform.ready(function() {
var config = {
"senderID": "myID100001000"
};
$cordovaPush.register(config).then(function(result) {
alert(result);
}, function(err) {
alert(err);
})
});
$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
switch(notification.event) {
case 'registered':
if (notification.regid.length > 0 ) {
alert('registration ID = ' + notification.regid);
}
break;
default:
alert('An unknown GCM event has occurred');
break;
}
});
})
When my app starts I do get the "OK" alert, so I know it successfully goes through the $cordovaPush.register call. However, I was expecting to get a "registered" notification event, right after, but I never get notified.
Any help would be appreciated.

The solution is in the comments but this needs a proper answer.
First of all, the register callback always returns OK as long as you pass a senderID, but if the $cordovaPush:notificationReceived event is never called (it may take a few seconds), this ID is probably wrong.
You must use the Project Number, not the Project ID.
To get the number, go to the API Console, select the project and you'll be on the Overview page. On top of this page, you'll see something like this:
Project ID: your-project-id Project Number: 0123456789
Just copy and use the project number and everything should work.

I have suffered with this a lot and I have found out, that there are in fact two versions of the cordova push plugin currently:
https://github.com/phonegap-build/PushPlugin (deprecated)
https://github.com/phonegap/phonegap-plugin-push (new one)
Both are supported by ngCordova, but only the deprecated version is documented.
The deprecated version is $cordovaPush
and the newer one is $cordovaPushV5, and they have completely different methods.
For me the problem was that I downloaded the cordova-plugin-push and tried to implement it with the old documentation on ngCordova site.
The code is:
/*
* Non deprecated version of Push notification events
*/
function registerV5() {
$ionicLoading.show({
template: '<ion-spinner></ion-spinner>'
});
if (ionic.Platform.is('browser')) {
alert("You are running on broswer, please switch to your device. Otherwise you won't get notifications");
$ionicLoading.hide();
return;
}
/**
* Configuration doc:
* https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushnotificationinitoptions
*/
var GCM_PROJECT_ID = 'xxxxxx';
$cordovaPushV5.initialize({
"android": {
"clearNotifications": false,
"senderID" : GCM_PROJECT_ID
}
});
$cordovaPushV5.register().then(function (deviceToken) {
console.log("Successfully registered", deviceToken);
$scope.data.deviceToken = deviceToken;
// Below code required to configure $cordovaPushV5 notifications emitter.
// Don't pass function it's not handler.
$cordovaPushV5.onNotification();
$cordovaPushV5.onError();
$ionicLoading.hide();
}, function (error) {
console.log("Failed to registered");
console.log("error object : ", error);
$ionicLoading.hide();
});
}
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data) {
console.log("notification received");
console.log("data object: ", data);
var foreground = data.additionalData.foreground || false;
var threadID = data.additionalData.payload.threadID || '';
var group = data.additionalData.payload.group || false;
if (foreground) {
// Do something if the app is in foreground while receiving to push - handle in app push handling
console.log('Receive notification in foreground');
} else {
// Handle push messages while app is in background or not started
console.log('Receive notification in background');
// Open FB messanger app when user clicks notification UI when app is in background.
if (typeof data.additionalData.coldstart != "undefined" && data.additionalData.coldstart == false)
if (!group)
// Open FB Messenger of specific user chat window
window.open('fb-messenger://user/' + threadID, '_system', 'location=no');
else
// Open FB Messenger of specific group chat window
window.open('fb-messenger://groupthreadfbid/' + threadID, '_system', 'location=no');
}
});
$rootScope.$on('$cordovaPushV5:errorOccurred', function(event, error) {
console.log("notification error occured");
console.log("event object: ", event);
console.log("error object: ", error);
});
More on this github article: https://github.com/driftyco/ng-cordova/issues/1125 (code from here) and in this article: https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5