Search code examples
javascriptgoogle-chrome-extension

How can I open HTML page on clicking chrome.notification


I am developing Chrome Extension. I want to open HTML page when a user click on notification. notification must appear after certain interval. Everything is working well with set interval and chrome.notification in background.js but I can't open html page with notification.Window.open is not working because window is not defined:

window.open('PAGE.html');

Here's my code Background.js

async function getCurrentTab() {
    let queryOptions = { active: true, lastFocusedWindow: true };
    // `tab` will either be a `tabs.Tab` instance or `undefined`.
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
  }
  setInterval(func,60000);
  function func(){
  var opt = {
    type: "basic",
    title: "Gympass",
    message: "You have been working for too long on Chrome. Would you like to take a break?",
    iconUrl: "logo.png"
  };
  chrome.notifications.create(opt, creationCallback);
  
  function creationCallback(){
    window.open('PAGE.html');
    //-----------SOME CODE -----------------------
    }
  }

Manifest.json

{
    "name" : "My Extension",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 3,
    "background": { "service_worker": "background.js" },
    "permissions": ["storage",
                    "scripting",
                    "tabs",
                    "alarms",
                    "webNavigation",
                    "notifications",  "activeTab", "contextMenus"],
    "host_permissions": [
                            "http://*/",
                            "https://*/"
                      ],
    "chrome_url_overrides" : {
                        "newtab": "storyboard_break_time.html"
                      },
    "action": {
                    "default_popup": "popup.html"
                },
    "icons": {
                  "16": "/images/logo-16.png",
                  "32": "/images/logo-32.png",
                  "48": "/images/logo-48.png",
                  "128": "/images/logo-128.png"
              }
}

I want my extension to generate notification after certain time and then on clicking on that notification HTML page should open in google chrome.


Solution

  • I have done this by using chrome.tabs API chrome.tabs.create({ url: "PAGE.html" });

    instead of: window.open("PAGE.html");