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

时间:2018-08-02 15:36:06

标签: javascript tampermonkey reddit

我爱Reddit。我使用的是新布局,而不是旧布局。有TamperMonkey的“附加”脚本,可让您执行隐藏帖子,更改颜色注释等操作,但是其中大多数仅适用于旧版式。然后是“ Reddit增强套件”,它做了一些修改,但不是我想要的。我修改了一个发现的脚本,但无法使其正常工作。 我想要一个按钮,将所有链接添加到浏览器的历史记录,本质上将其标记为已访问,这使Reddit认为您已阅读了该帖子。

“按钮”短暂显示但随后消失,有人可以帮忙下面的TamperMonkey脚本吗?

// ==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);

这是现在的样子:

enter image description here

我要在这里按下按钮:

enter image description here

1 个答案:

答案 0 :(得分:0)

这可能对您有用。随意编辑代码。

  1. 使用setTimeout将整个代码片段插入立即执行的函数中。
  2. 使用button获取最后一个querySelectorAll
  3. 使用insertAdjacentElement插入元素。
  4. 请勿将微调框插入for循环内。在开始循环之前将其插入。

// ==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==

(function(){
setTimeout(function(){
    var item;
    var button = [].slice.call(document.querySelectorAll("div.s1f7qvlr-5.hkOTKM")).pop();

    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.insertAdjacentElement("beforeend",btn);

    var element = document.getElementById('reddit-mark-all-read');
    var spinner = {
            lock : 0,
            remove : function(){
                if(spinner.lock ==0) {
                    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
                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
    btn.addEventListener('click', function(event) {
        //ajax loading spinner

        //grab & "visit" all
        var links = document.querySelectorAll("a[data-click-id='body']");
        var count = 0;
        spinner.add();
        for(var i=0; i<links.length; i++) {
            //add spinner background image
            //**********************************************************************
            // 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.');
        }
        event.stopPropagation();
        event.preventDefault();
    });
    },1000);
})();