Using the Notification API from a bookmarklet

Viewed 178

I am trying to write a bookmarklet that sends me a desktop notification when CI on GitHub completes. Notification.requestPermission runs correctly, and asks me for permission, and the console.log statements run correctly, but the notification does not appear. Here is the text of the bookmarklet script:

(function() {
  Notification.requestPermission().then(() => {
    const search = setInterval(() => {
      if (window.find("All checks have passed")) {
        console.log('all checks passed');
        clearTimeout(search);
        new Notification('Github checks passed!');
      } else {
        console.log('checks pending');
      }
    }, 1000);
  });
})();

i.e.

javascript:(function() {Notification.requestPermission().then(() => {const search = setInterval(() => {if (window.find("All checks have passed")) {console.log('all checks passed');clearTimeout(search);new Notification('Github checks passed!');} else {console.log('checks pending');}}, 1000);});})();

Is this a sandboxing thing?

2 Answers

I have tried with the same code you have written and tried to add few tweaks and verify the existing code.

I have seen that there not an issue with your code. I have tried to simulate the same situation with your code and it works.

In order to work on your code, I have added dummy text in the HTML body after 5 seconds of page loads, meanwhile, setTimeout function logs checks pending

After 5 seconds it a text in the body and after that it goes to search the text and the code works fine.

Here my little tweaks which might help you to identify the root cause. I guess if your code is working on these tweaks, it means that somehow in your real situation the text might not found from the HTML template.

Yes, one more thing you should keep in mind that you must allow notification when the browser asks in popup, Once you allow the show the notification, in the next attempt it will populate the notification with suggested text.

Following code, I have tried.

minify version:

javascript:(function(){Notification.requestPermission().then(()=>{let e=0;console.log("find:",window.find("All checks have passed"));const n=setInterval(()=>{if(window.find("All checks have passed"))clearTimeout(n),new Notification("Github checks passed!");else{if(5===e){const e=document.createElement("label");e.innerHTML="All checks have passed",document.body.appendChild(e)}console.log("checks pending")}e+=1},1e3)})})();

beautify version:

javascript: (function() {
    Notification.requestPermission().then(() => {
        let counter = 0;
        console.log("find:", window.find("All checks have passed"));
        const interval = setInterval(() => {
            if (window.find("All checks have passed")){
              clearTimeout(interval);
              console.log("checks passed");
              new Notification("Github checks passed!");
            } else {
                if (5 === counter) {
                    const el = document.createElement("label");
                    el.innerHTML = "All checks have passed";
                    document.body.appendChild(el);
                }
                console.log("checks pending");
            }
            counter += 1;
        }, 1000)
    })
})();

I have also attached the screenshots for your reference. Script on bookmark

Final result with notification

For your reference, this code will work in the console also it will populate the message in your console also.

Hope it might clear your idea.

This code is 100% working, so if you still face the trouble, let me know I will definitely try to help you.

As others have said, the code works as expected.

My guess is you're having problems with the setInterval function. On firefox, setInterval doesn't run when the tab isn't on focus (you also lose focus when you execute the bookmarklet from the bookmark tab).

I assume you navigated to a different tab which results in the timer stopping. Unfortunately I don't think there's an easy solution to get the result you want.

See here for reference: SetInterval not running in Firefox when lost focus on tab/window

Related