由tampermonkey脚本添加的按钮仅短暂显示

我喜欢Reddit。我用的是新的布局,不是旧的。有一些篡改的“附加”脚本允许你做一些事情,比如隐藏文章、不同颜色的评论等等,但是大多数脚本只在旧的布局上工作。还有“Reddit增强套件”,它可以做一些事情,但不是我想要的。我修改了一个脚本,但发现它无法运行。 我想用一个按钮添加到浏览器历史记录的所有链接,本质上是将其标记为已访问,这使得Reddit认为您阅读了文章。

“button”会短暂地显示,但随后会消失,下面有人能帮忙修改脚本吗?

// ==UserScript==
// @name          Reddit "Mark All Read"
// @namespace     http://userscripts.org/users/mb34
// @description   Adds a button next to the logo to Mark All Posts Read
// @include       http://reddit.com/*
// @include       http://*.reddit.com/*
// @include       https://www.reddit.com/
// @include       https://www.reddit.com/*
// @include       https://*.reddit.com/*
// @exclude       http://www.reddit.com/comscore-iframe/*
// @exclude       http://static.reddit.com/ads/*
// @version       1.0
// @date          8/2/2018
// @creator       MrBaseball77
// @homepage
// @grant GM_addStyle   
// ==/UserScript==

//debugger;
var code_string = "(" + function() {

    var item;
    //helper funciton
    function xpath(p, context) {
        if(!context) context = document;
        var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
        for(i = 0; item = xpr.snapshotItem(i); i++) {
            arr.push(item);
        }
        return arr;
    }

    //grab button at top of page
    var button = xpath("//div[@class='s1f7qvlr-5 hkOTKM']")[0];
    if(typeof button=="undefined"||!button) return;

    //create button with hide all functionality
    var btn = document.createElement('button');
    var textnode = document.createTextNode("Hide All");
    var span = document.createElement('span');
    span.appendChild(textnode);
    span.setAttribute('style', 'color: #0079D3;');
    btn.setAttribute('class','etmkug-14 SuUwW');
    btn.setAttribute('style','margin-left:10px;padding:3px;border:1px solid #0079D3;border-radius:2px;');
    btn.setAttribute('id','reddit-mark-all-read');
    btn.appendChild(span);
    button.parentElement.parentElement.appendChild(btn);
    btn.addEventListener('click', function(event) {
        //ajax loading spinner
        var spinner = {
            lock : 0,
            remove : function(){
                --spinner.lock;
                if(spinner.lock ==0) {
                    var element = document.getElementById('reddit-mark-all-read');
                    element.style.background = "#EFF7FF";
                }
            },
            add : function(){
                //created ajax spinner with http://www.ajaxload.info/ #EFF7FF and #FF4500 (orangered)
                //created data uri with http://www.sveinbjorn.org/dataurlmaker
                var element = document.getElementById('reddit-mark-all-read');
                element.style.background = 'url("data:image/gif;base64,R0lGODlhEAAQAPIAAO/3//9FAPLMwv'+
                'pzQv9FAPiJYvafgvWqkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACw'+
                'AAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwA'+
                'AAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsA'+
                'AAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAw'+
                'AsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAA'+
                'sAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwA'+
                'AAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAA'+
                'AAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAA'+
                'AQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==") '+
                '#EFF7FF no-repeat center';
            }
        }; // spinner definition

        //grab & "visit" all
        var links = document.querySelectorAll("a[data-click-id='body']");
        var count = 0;

        for(var i=0; i<links.length; i++) {
            //add spinner background image
            spinner.add();
            //**********************************************************************
            // use replaceState to push a new entry into the browser's history, essentially
            // telling the browser that you visited the link, marking it as read!!
            //**********************************************************************
            history.replaceState({},"",links[i]);
            ++count;
        } // for
        //******************************************
        // Do I need to remove the background here??
        //******************************************
        // spinner.remove();
        if(count===0){
            alert('None Found.');
        } // if

        // stop default click action
        event.stopPropagation();
        event.preventDefault();
    }); // btn.addEventListener

} + ")()";

// workaround for Google Chrome
// I realize this is NOT the nice way to do such things but from what I
// read there's no other way to access Reddit's native JS code
// (maybe one day 'hiding' will be added to the API)
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild( document.createTextNode( code_string ) );
document.body.appendChild(script);

现在的情况如下:

这是我想要按钮的位置: