Question

我试图改编现有的TamperMonkey脚本，以在现有页面上创建基于下拉列表的登录按钮。

我测试了在原始URL（facebook.com）上在线找到的工作脚本，并且按钮显示得很好。

当我使@include适应我的URL并调整脚本中的定位器ID以匹配我自己页面中的定位器ID时，脚本将不再显示下拉按钮。

我需要一点帮助找出原因。

原始代码如下所示，并可以在facebook.com上使用：

// ==UserScript==
// @name        facebook login
// @namespace   http://123.123
// @include     https://www.facebook.com/*
// @version     1
// @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
// @resource    bt http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
// @resource    bt-theme http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
// @grant       GM_addStyle
// @grant       GM_getResourceText
// ==/UserScript==
(function() {
    if ($('#login_form').length <= 0) {
        console.log('No login_form');
        return;
    }

    GM_addStyle(GM_getResourceText("bt"));
    GM_addStyle(GM_getResourceText ("bt-theme"));
    GM_addStyle("#menu1 a {text-align: left}");
    var $loginbutton = $('#loginbutton');
    var menu = '<span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">' +
               '<a id="drop4" href="#" data-toggle="dropdown" role="button" style="color: #FFF">帳號 ' +
               '<b class="caret"></b>' +
               '</a>' +
               '<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4" role="menu">' +
               '<li>' +
               '<a href="#" role="menuitem">kaoyenchi</a>' +
               '</li>' +
               '<li>' +
               '<a href="#" role="menuitem">tcyc</a>' +
               '</li>' +
               '<li>' +
               '<a href="#" role="menuitem">fcwu</a>' +
               '</li>' +
               '</ul>' +
               '</span>'
    $loginbutton.parent().append(menu);
    var accounts = {};
    accounts['fcwu'] = ['', ''];
    accounts['kaoyenchi'] = ['', ''];
    accounts['tcyc'] = ['', ''];
    accounts['timy'] = ['', ''];
    $('#menu1 a').click(function() {
        name = $(this).text()
        $('#email').attr('value', accounts[name][0]);
        $('#pass').attr('value', accounts[name][1]);
        $('#login_form').submit();
    });

})();

更改后，代码如下所示，不再起作用：

// ==UserScript==
// @name        Login-o-Tron WIP
// @namespace   http://123.123
// @include     http://myurl.com/*
// @version     1
// @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
// @resource    bt http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
// @resource    bt-theme http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
// @grant       GM_addStyle
// @grant       GM_getResourceText
// ==/UserScript==
(function() {

    GM_addStyle(GM_getResourceText("bt"));
    GM_addStyle(GM_getResourceText ("bt-theme"));
    GM_addStyle("#menu1 a {text-align: left}");
    var $loginbutton = $('#loginbutton');
    var menu = '<span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">' +
               '<a id="drop4" href="#" data-toggle="dropdown" role="button" style="color: #FFF">Login-o-Tron ' +
               '<b class="caret"></b>' +
               '</a>' +
               '<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4" role="menu">' +
               '<li>' +
               '<a href="#" role="menuitem">kaoyenchi</a>' +
               '</li>' +
               '<li>' +
               '<a href="#" role="menuitem">tcyc</a>' +
               '</li>' +
               '<li>' +
               '<a href="#" role="menuitem">fcwu</a>' +
               '</li>' +
               '</ul>' +
               '</span>'
    $loginbutton.parent().append(menu);
    var accounts = {};
    accounts['fcwu'] = ['', ''];
    accounts['kaoyenchi'] = ['', ''];
    accounts['tcyc'] = ['', ''];
    accounts['timy'] = ['', ''];
    $('#menu1 a').click(function() {
        name = $(this).text()
        $('#username').attr('value', accounts[name][0]);
        $('#password').attr('value', accounts[name][1]);
        $('#loginButton').submit();
    });

})();

我确保定位符是正确的，并且尝试保留并丢失初始的if语句，但是它似乎并不影响结果。

加载脚本时确实看到页面的字体发生了变化，因此CSS也已加载，但是我希望显示的下拉按钮从未显示。

预先感谢您的帮助。

Answer 1

您没有说控制台中是否有任何错误，但是问题可能是，#loginbutton节点是由javascript添加的-这意味着它将在您的网站后出现脚本已运行。

此外，menu1和drop4非常通用。它们可能已经被使用过，可能导致id冲突。使用较不常见且更具描述性的内容（只是似乎根本不需要drop4）。

解决延迟问题的一种方法是使用如下所示的waitForKeyElements之类的东西。

重要提示：

如果您将密码放在这样的文本文件/记录中，则这些帐户被黑/被盗只是时间问题。
明智的做法是使用 LastPass ， KeePass 等密码管理器。
如果失败，请至少使用an encryption framework，以使恶意分子明显难以获得帐户凭据。

修订后的脚本：

// ==UserScript==
// @name        Login-o-Tron WIP
// @include     http://myurl.com/*
// @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @resource    bt http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
// @resource    bt-theme http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
// @grant       GM_addStyle
// @grant       GM_getResourceText
// ==/UserScript==
/* global $, waitForKeyElements */
/* eslint-disable no-multi-spaces, dot-notation */

GM_addStyle (GM_getResourceText("bt") );
GM_addStyle (GM_getResourceText ("bt-theme") );
GM_addStyle ("#TM_accmenu a {text-align: left;}");

waitForKeyElements ("#loginbutton", addAccountsDropdown);

const accounts          = {};
accounts['fcwu']        = ['One',   'should'];
accounts['kaoyenchi']   = ['have',  'a'];
accounts['tcyc']        = ['bad',   'feeling'];
accounts['timy']        = ['about', 'this.'];

function addAccountsDropdown (jNode) {
    var jMenu = $( `
        <span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">
            <a href="#" data-toggle="dropdown" role="button" style="color: #FFF">Login-o-Tron
                <b class="caret"></b>
            </a>
            <ul id="TM_accmenu" class="dropdown-menu" aria-labelledby="drop4" role="menu"></ul>
        </span>
    ` );
    var zList = jMenu.find ("#TM_accmenu");
    for (let acntName in accounts) {
        zList.append (`<li><a href="#" role="menuitem">${acntName}</a></li>`);
    }

    jNode.parent ().append (jMenu);
    $('#TM_accmenu a').click (function () {
        var acntName = $(this).text ()
        $('#username').attr ('value', accounts[acntName][0]);
        $('#password').attr ('value', accounts[acntName][1]);
        $('#loginButton').submit ();
    } );
}

如何修复TamperMonkey脚本中未显示的按钮

1 个答案: