Question

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

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

我在控制台中没有看到任何错误，并且单击div时，我看到链接元素的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知识不存在。

使用Tampermonkey即时交换异地Css

0 个答案: