如何成功将新按钮添加到 Reddit 新布局的顶部栏

Question

我正在尝试创建一个用户脚本来向新的 Reddit 设计添加一个新按钮，这样我就可以轻松地 return 到旧布局。 新按钮变为 somewhere around here.

这是我的简单代码：

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
parent[0].appendChild(bOld);

bOld.addEventListener("click", function() {
  var url = document.URL;
  url = url.replace('/www.', '/old.');
  window.location.href = url;
});

问题是，每次我加载或重新加载页面时，新按钮都会出现并在一秒钟内迅速消失。我该如何解决这个问题？

Answer 1

您可以在 window.load 函数中添加您的函数吗？听起来 reddit 有一些 javascript 在你的之后执行（这有删除你的按钮的副作用）。如果你能让你的在 reddit 之后执行，也许它会起作用？

window.addEventListener('load', function() { /*YOUR CODE*/ });

Answer 2

问题可能是因为 reddit 使用的是 react ，你的更改由于重新渲染而被覆盖。因为在您的脚本执行后，组件会重新呈现。 但是这个问题的解决方案是使用 setTimeout 。在这种情况下，在 component/header 完成渲染后，您的脚本将附加您的 button/link

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
setTimeout(function(){
    parent[0].appendChild(bOld);

    bOld.addEventListener("click", function() {
        var url = document.URL;
        url = url.replace('/www.', '/old.');
        window.location.href = url;
    });
},1000)