Question

我正在尝试构建Hobby Chrome扩展程序。所以我想做的就是给YouTube视频提供一些控制按钮。我的Manifest.json是

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["activeTab", "declarativeContent", "storage", "webNavigation"],
    "background": {
      "scripts": ["background.js", "insertPlayerButtons.js"],
      "persistent": false
    },
    "content_scripts": [{
        "js": ["insertPlayerButtons.js"],
        "matches": ["https://www.youtube.com/"],
        "css" : ["insertPlayerButton.css"]
    }],
    "manifest_version": 2
  }

我的ContentScript是

var currentspeed = 1; 
document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
      addElement();
    }
  }

function addElement () {
    var container = document.getElementById('player-container');
    var testButton = document.createElement("button");
    testButton.type = "button";
    testButton.onclick = test;
    var forwardText = document.createTextNode("test"); 
    forwardButton.appendChild(forwardText);
    container.appendChild(forwardButton);
};
function test() {
    //dosomething
};

我的background.js是

chrome.webNavigation.onHistoryStateUpdated.addListener(function() {
    addElement();
  });

所以发生了什么事，当我们加载YouTube主页时，即youtube.com，则没有player-container div，因此没有元素添加到dom中。

此后，当我单击一些视频并转到视频页面https://www.youtube.com/watch?****页面时，脚本再次运行，但是以某种方式我无法访问dom。即使onHistoryStateUpdated事件由background.js触发。但是我无法在Dom中追加Childs，因为container会为null。

如果我只是重新加载https://www.youtube.com/watch?****此页面，则一切正常。

只有当我从youtube.com移至https://www.youtube.com/watch?****时，它才会停止工作。

这是我正在尝试构建的第一个扩展，因此，如果我缺少基本知识...。请原谅

无法使用Chrome扩展程序在YouTube的DOM中添加按钮元素

0 个答案: