jQuery выбрать существующую кнопку в расширении Chrome

Question

Я хочу сделать расширение, которое меняет заголовок встроенного в Chrome секундомера, когда я запускаю и останавливаю его.Я получаю сообщение об ошибке при попытке получить класс кнопки.JavaScript работает при вставке в консоль браузера, поэтому я думаю, что проблема в файле json.

Вот мой 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";
    }
    });

и вот мой 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

    }

Я получаю эту ошибку:

Answer 1

Я думаю, что самая важная часть здесь - это убедиться, что вы проверили значение button, чтобы оно не было null, прежде чем добавлять прослушиватель событий.

Точно так же:

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

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

Попробуйте также проверить ТАК сообщение , поскольку это связано с вашим вопросом.