Chrome Extension: Confirm window is not appearing on currently using tab? it just appear on one tab (popup.html)

I am developing chrome extension for e-gym that generates confirm window for using chrome browser after every one hour. I have developed chrome extension but the confirm window is only appearing on popup.html. I want to turn on my extension let it generate window.confirm on any tab that I am using currently after 1 hour. here’s my code:

manifest.json:

{
    "name" : "E-Gym ScreenSaver",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 3,
    "background": { "service_worker": "background.js" },
    "permissions": ["storage",
                    "scripting",
                    "tabs",
                    "webNavigation",
                    "notifications",  "activeTab", "contextMenus"],
    "host_permissions": [
                            "http://*/",
                            "https://*/"
                      ],
    "chrome_url_overrides" : {
                        "newtab": "storyboard_break_time.html"
                      },
    "action": {
                    "default_popup": "popup.html"
                }
}

JavaScript
​x
 
{
    "name" : "E-Gym ScreenSaver",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 3,
    "background": { "service_worker": "background.js" },
    "permissions": ["storage",
                    "scripting",
                    "tabs",
                    "webNavigation",
                    "notifications",  "activeTab", "contextMenus"],
    "host_permissions": [
                            "http://*/",
                            "https://*/"
                      ],
    "chrome_url_overrides" : {
                        "newtab": "storyboard_break_time.html"
                      },
    "action": {
                    "default_popup": "popup.html"
                }
}
​

**popup.html: **

<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="storyboardstyle.css"></head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <body style="width: 280px; height: 150px; ">   
        <div id="heading-gympass"><h2><b>E-GYM</b></h2>  
        <button  id="start_btn"></button><div>  
        <script src="popup.js"></script>
    </body>

</html>

JavaScript
 
<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="storyboardstyle.css"></head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <body style="width: 280px; height: 150px; ">   
        <div id="heading-gympass"><h2><b>E-GYM</b></h2>  
        <button  id="start_btn"></button><div>  
        <script src="popup.js"></script>
    </body>
​
</html>
​

popup.js:

// Initialize button with user’s preferred color for testing
const startBtn = document.getElementById("start_btn");
var btnTxt = startBtn.innerText;

//sets last state of button
chrome.storage.session.get('buttonState', function(data) {   
  // this is called after the retrieve.
  startBtn.innerText = data['buttonState'];
  btnTxt = data['buttonState'];
  console.log(btnTxt);
  if (btnTxt == undefined){
    startBtn.innerHTML = "Click to Start Gym";} 
});


// When the extension button is clicked
  startBtn.addEventListener("click", async () => {
    var btnTxt = startBtn.innerText;
      if(btnTxt == "Click to Start Gym"){
        startBtn.innerText = "Click to Stop Gym";
        var obj = {};
        obj['buttonState'] = startBtn.innerText;
        chrome.storage.session.set(obj, function() {
          // this called after the save
          console.log(obj);
        });
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: startGymFunctionality,
        });      
      }
          
      else{
        startBtn.innerText = "Click to Start Gym";
        var obj = {};
        obj['buttonState'] = startBtn.innerText;
        chrome.storage.session.set(obj, function() {
          // this called after the save
          console.log(obj);
        });
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: stopGymFunctionality,
        });
      }


  });
  
function stopGymFunctionality(){
  //some code
  location.reload();
  console.log('stop gym');
  
}

function startGymFunctionality()
{
timer_count = 0;
Popup_time = 10 //time in seconds for confirm window pop-up
setInterval (timer, 1000);  
function timer (){
    console.log(timer_count);//timer in console
    timer_count ++;
    if (timer_count > (Popup_time-1)){
        //I WANT THIS CONFIRM WINDOW TO GENERATE ON OPENED TAB RATHER THAN MY CURRENT TAB LIKE I AM WORKING ON ANY TAB
        //CONFIRM WINDOW APPEARED AFTER 1 HOUR
        var answer = window.confirm("You have been working for too long on Chrome. Would you like to take a break?");
        
        if (answer){
          timer_count = 0;
        }
    }
  }
}

JavaScript
 
// Initialize button with user’s preferred color for testing
const startBtn = document.getElementById("start_btn");
var btnTxt = startBtn.innerText;
​
//sets last state of button
chrome.storage.session.get('buttonState', function(data) {   
  // this is called after the retrieve.
  startBtn.innerText = data['buttonState'];
  btnTxt = data['buttonState'];
  console.log(btnTxt);
  if (btnTxt == undefined){
    startBtn.innerHTML = "Click to Start Gym";} 
});
​
​
// When the extension button is clicked
  startBtn.addEventListener("click", async () => {
    var btnTxt = startBtn.innerText;
      if(btnTxt == "Click to Start Gym"){
        startBtn.innerText = "Click to Stop Gym";
        var obj = {};
        obj['buttonState'] = startBtn.innerText;
        chrome.storage.session.set(obj, function() {
          // this called after the save
          console.log(obj);
        });
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: startGymFunctionality,
        });      
      }
          
      else{
        startBtn.innerText = "Click to Start Gym";
        var obj = {};
        obj['buttonState'] = startBtn.innerText;
        chrome.storage.session.set(obj, function() {
          // this called after the save
          console.log(obj);
        });
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: stopGymFunctionality,
        });
      }
​
​
  });
  
function stopGymFunctionality(){
  //some code
  location.reload();
  console.log('stop gym');
  
}
​
function startGymFunctionality()
{
timer_count = 0;
Popup_time = 10 //time in seconds for confirm window pop-up
setInterval (timer, 1000);  
function timer (){
    console.log(timer_count);//timer in console
    timer_count ++;
    if (timer_count > (Popup_time-1)){
        //I WANT THIS CONFIRM WINDOW TO GENERATE ON OPENED TAB RATHER THAN MY CURRENT TAB LIKE I AM WORKING ON ANY TAB
        //CONFIRM WINDOW APPEARED AFTER 1 HOUR
        var answer = window.confirm("You have been working for too long on Chrome. Would you like to take a break?");
        
        if (answer){
          timer_count = 0;
        }
    }
  }
}
​

Kindly help me with this task. I just want that confirm window on a tab that I am using or working after one hour. for the sake of simplicity and setting I have set it to 10 seconds.

I am expecting to generate confirm window to popup/appear at any tab that i am using after one hour is over.

Answer

It sounds like what you want to do is query for the active tab and inject the script with the confirmation prompt at the time the countdown ends, not when it starts. The way I’d do this is by setting up an alarm, and do the tabs.query and executeScript in response to the alarm going off.

Advertisement

Answer