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

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 的方法，如下所示。

重要:

1. 如果您将密码放入这样的文本文件/记录中，这些帐户被黑客攻击/盗用只是时间问题。
2. 明智的做法是使用密码管理器，例如 LastPass、KeePass 等。
3. 如果做不到这一点，至少使用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 ();
    } );
}