jQuery select pre-exising button in chrome extension

Question

I want to make an extension that changes the title on Chrome's built in stopwatch when i start and stop it. I am getting an error trying to retrieve the button's class. The JavaScript works when pasted in the browser console so I think the problem is with the json file.

Here is my JavaScript.

   var title = document.querySelector("title");

    var button = document.querySelector(".act-desktop-button");

    var flip = true;

    button.addEventListener("click", function(){
    flip =! flip;
    console.log(flip);

    if(flip === true){
    title.textContent = "OFF";
    } else{
    title.textContent = "ON";
    }
    });

and here is my json

    {  
    "name": "Stopwatch Tracker",

    "version": "1.0",

    "description": "works with chromes built in stopwatch feature. Changes the 
    title of the page to 'ON' or 'OFF' depending on if the stopwatch is 
    running.",

    "permissions":[
    "tabs",
    "*://*.google.com/search?q=stopwatch*"
    ],

    "content_scripts": [
    {
    "matches": ["*://*.google.com/search?q=stopwatch*"],
    "js": ["background.js"]
    }
    ],

    "manifest_version": 2

    }

I am receiving this error:

score 1 · Accepted Answer · answered Oct 09 '18 at 10:42

I think, what is the most important part here is to make sure that you have checked the value of button to be not null before adding an event listener.

Just like this:

var button = document.querySelector(".act-desktop-button");

    var flip = true;
if (button){
    button.addEventListener("click", function(){
...
})};

Try also to check this SO post as this is related to your question.

jQuery select pre-exising button in chrome extension

1 Answers1