使用Tampermonkey即时交换异地Css

Question

我正在尝试为游戏网站（skribbl.io）编写一个非常基本的（用户）脚本，在该网站的顶部添加了一个div，该div应该用作电灯开关（暗模式开/关）。

当我尝试热交换CSS文件以更改本地网页的样式时，我没有遇到任何问题，但是一旦转到用户脚本，它将无法使用。

我没有在控制台中看到任何错误，并且单击div时，我可以看到link元素的href实际上确实发生了变化，正如预期的那样-抓住：该网站的外观没有变化。

这是我的用户脚本代码：

 var lightSwitch = document.createElement('div'); //Inserting it at the top of the page document.body.insertBefore(lightSwitch, document.body.children[2]); //I have to get and modify the <link> tag because by default it has no Id var linkElement = document.getElementsByTagName('link')[0]; linkElement.setAttribute("id", "pagestyle"); function swapStyleSheet(sheet) { var link = document.getElementById("pagestyle"); link.setAttribute("href", sheet); } lightSwitch.addEventListener('click', function(){ swapStyleSheet('https://cdn.rawgit.com/externally-hosted-style.css') }, false); //GREY DIV STYLING lightSwitch.style.width = "50px"; lightSwitch.style.height = "50px"; //etc... 

再次，这在我的HTML测试文件上本地工作，但不适用于Tampermonkey。 为什么？

注意：这不仅涉及更改网站的样式，还涉及将其包含在我的用户脚本中，这在某些时候应具有更大的功能。 当然，我可以使用其他扩展名来修改页面的外观，但是就我而言，这是不可能的。

如果我可以使用按钮或类似按钮切换GM_addStyle，则是一个好主意。 但是，您可能会注意到-我的Javascript知识不存在。