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(){
...
})};

也请尝试检查此post，因为这与您的问题有关。