Как исправить кнопку, не отображаемую в скрипте TamperMonkey - PullRequest
Новая
       12

Как исправить кнопку, не отображаемую в скрипте TamperMonkey

0 голосов
/ 15 февраля 2019

Я пытаюсь адаптировать существующий скрипт TamperMonkey для создания кнопки входа в систему на основе раскрывающегося списка на существующей странице.

Я протестировал рабочий скрипт, который нашел в Интернете по его оригинальному URL (facebook.com), икнопка отображается очень хорошо.

Когда я адаптирую @include к своему URL и настраиваю идентификаторы локатора в скрипте, чтобы они соответствовали идентификаторам на моей собственной странице, скрипт больше не отображает кнопку выпадающего меню.

И мне нужна небольшая помощь, чтобы выяснить, почему.

Исходный код выглядит так и работает на 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 загружается, но кнопка, которую я ожидаю показать, никогда не появляется.

Заранее спасибо за вашу помощь.

1 Ответ

0 голосов
/ 16 февраля 2019

Вы не сказали, есть ли какие-либо ошибки в консоли, но проблема в , вероятно, , в том, что узел #loginbutton добавляется с помощью javascript - что означает, что он появится после запуска вашего скрипта.

Кроме того, menu1 и drop4 довольно общие.Существует вероятность того, что они уже могут быть использованы, что приводит к конфликту идентификаторов.Используйте что-то менее распространенное и более наглядное (за исключением того, что drop4, похоже, совсем не нужно).

Одним из способов решения проблемы задержки является использование чего-то вроде waitForKeyElements, как показано ниже.

Важное замечание:

  1. Если вы поместите пароли в текстовый файл / запись, подобные этим, это только вопрос времени, когда эти учетные записи будут взломаны / взломаны.
  2. Умнее всего использовать менеджер паролей, такой как LastPass , KeePass и т. Д.
  3. В противном случае используйте, по крайней мере, шифрование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 ();
    } );
}
...