☰

BugMeNot Everywhere

Add a list of login accounts from BugMeNot ( bugmenot.com ) on any website when focusing on username input

Install this script?
Author's suggested script

You may also like Auto Check Remember Login.

Install this script 
  1. // ==UserScript==
  2. // @name         BugMeNot Everywhere
  3. // @namespace    https://greatest.deepsurf.us/users/37096/
  4. // @homepage     https://greatest.deepsurf.us/scripts/35957/
  5. // @supportURL   https://greatest.deepsurf.us/scripts/35957/feedback
  6. // @version      1.1.1
  7. // @description  Add a list of login accounts from BugMeNot ( bugmenot.com ) on any website when focusing on username input
  8. // @author       Hồng Minh Tâm
  9. // @icon         http://bugmenot.com/favicon.ico
  10. // @include      *
  11. // @connect      bugmenot.com
  12. // @grant        GM_addStyle
  13. // @grant        GM_xmlhttpRequest
  14. // @license      GNU GPLv3
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.   'use strict';
  19.  
  20.   const icons = {
  21.     username: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172"><path fill="currentColor" d="M114.66667,50.16667c0,15.83216 -12.8345,28.66667 -28.66667,28.66667c-15.83216,0 -28.66667,-12.8345 -28.66667,-28.66667c0,-15.83216 12.8345,-28.66667 28.66667,-28.66667c15.83216,0 28.66667,12.8345 28.66667,28.66667zM86,114.66667c9.374,0 17.62608,-4.56102 22.85775,-11.51986c20.1885,4.472 41.64225,14.27902 41.64225,29.43652v17.91667h-129v-17.91667c0,-15.1575 21.45375,-24.96452 41.64225,-29.43652c5.23167,6.95883 13.48375,11.51986 22.85775,11.51986z"></path></svg>',
  22.     password: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172"><path fill="currentColor" d="M50.16667,35.83333c-27.70633,0 -50.16667,22.46033 -50.16667,50.16667c0,27.70633 22.46033,50.16667 50.16667,50.16667c22.72313,0 41.89756,-15.11458 48.06706,-35.83333h30.76628v21.5h28.66667v-21.5h14.33333v-28.66667h-73.76628c-6.1695,-20.71875 -25.34393,-35.83333 -48.06706,-35.83333zM50.16667,64.5c11.87517,0 21.5,9.62483 21.5,21.5c0,11.87517 -9.62483,21.5 -21.5,21.5c-11.87517,0 -21.5,-9.62483 -21.5,-21.5c0,-11.87517 9.62483,-21.5 21.5,-21.5z"></path></svg>',
  23.   }
  24.  
  25.   GM_addStyle([
  26.     '.bmn-list { display:none; list-style: none; border: 1px solid #ccc; padding: 0; margin: 0; background-color: #fff; position: fixed; cursor: default; z-index: 9999999999; box-sizing: border-box; overflow: auto; text-align: left; }',
  27.     '.bmn-list.show { display:block; }',
  28.     '.bmn-list .bmn-row { position: relative; margin: 0 5px 5px 5px; display: -ms-flexbox; display: -webkit-flex; display: flex; }',
  29.     '.bmn-list .bmn-row:last-child { margin-bottom: 0; }',
  30.     '.bmn-list .bmn-col { position: relative; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }',
  31.     '.bmn-list .bmn-full { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; }',
  32.     '.bmn-list .bmn-align-items-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; }',
  33.     '.bmn-list .bmn-align-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }',
  34.     '.bmn-list .bmn-justify-content-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }',
  35.     '.bmn-list .bmn-item { position: relative; padding: 5px 2px 5px 7px; margin: 0; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.125); color: #495057; }',
  36.     '.bmn-list .bmn-item:last-child { border-bottom: 0; }',
  37.     '.bmn-list .bmn-item:hover { background-color: #f8f9fa; }',
  38.     '.bmn-list .bmn-item:before { position: absolute; content: ""; width: 5px; top: 0; left: 0; bottom: 0; background-color: #f7704f; }',
  39.     '.bmn-list .bmn-item .bmn-icon { width: 32px; height: 32px; padding: 5px; background-color: #e9ecef; border: 1px solid #ced4da; }',
  40.     '.bmn-list .bmn-item .bmn-username { margin-left: 10px; font-weight: 700; }',
  41.     '.bmn-list .bmn-item .bmn-password { margin-left: 10px; color: #666; }',
  42.     '.bmn-list .bmn-item .bmn-success { display: inline-block; font-weight: 700; }',
  43.     '.bmn-list .bmn-item.bmn-success-100 .bmn-success { color: rgb(0,198,0); }',
  44.     '.bmn-list .bmn-item.bmn-success-100:before { background-color: rgb(0,198,0); }',
  45.     '.bmn-list .bmn-item.bmn-success-90 .bmn-success { color: rgb(50,180,0); }',
  46.     '.bmn-list .bmn-item.bmn-success-90:before { background-color: rgb(50,180,0); }',
  47.     '.bmn-list .bmn-item.bmn-success-80 .bmn-success { color: rgb(99,164,0); }',
  48.     '.bmn-list .bmn-item.bmn-success-80:before { background-color: rgb(99,164,0); }',
  49.     '.bmn-list .bmn-item.bmn-success-70 .bmn-success { color: rgb(149,146,0); }',
  50.     '.bmn-list .bmn-item.bmn-success-70:before { background-color: rgb(149,146,0); }',
  51.     '.bmn-list .bmn-item.bmn-success-60 .bmn-success { color: rgb(199,129,0); }',
  52.     '.bmn-list .bmn-item.bmn-success-60:before { background-color: rgb(199,129,0); }',
  53.     '.bmn-list .bmn-item.bmn-success-50 .bmn-success { color: rgb(247,112,0); }',
  54.     '.bmn-list .bmn-item.bmn-success-50:before { background-color: rgb(247,112,0); }',
  55.     '.bmn-list .bmn-item.bmn-success-40 .bmn-success { color: rgb(247,90,0); }',
  56.     '.bmn-list .bmn-item.bmn-success-40:before { background-color: rgb(247,90,0); }',
  57.     '.bmn-list .bmn-item.bmn-success-30 .bmn-success { color: rgb(247,67,0); }',
  58.     '.bmn-list .bmn-item.bmn-success-30:before { background-color: rgb(247,67,0); }',
  59.     '.bmn-list .bmn-item.bmn-success-20 .bmn-success { color: rgb(247,45,0); }',
  60.     '.bmn-list .bmn-item.bmn-success-20:before { background-color: rgb(247,45,0); }',
  61.     '.bmn-list .bmn-item.bmn-success-10 .bmn-success { color: rgb(247,22,0); }',
  62.     '.bmn-list .bmn-item.bmn-success-10:before { background-color: rgb(247,22,0); }',
  63.     '.bmn-list .bmn-item .bmn-vote { display: inline-block; margin-left: 16px; float: right; }',
  64.     '.bmn-list .bmn-no-logins-found { padding: 5px 10px; margin: 0; cursor: default; text-align: center; background-color: #a90000; color: #fff; }',
  65.   ].join(''));
  66.  
  67.   Object.defineProperty(String.prototype, 'toDOM', {
  68.     value: function (isFull) {
  69.       var parser = new DOMParser(),
  70.         dom = parser.parseFromString(this, 'text/html');
  71.       return isFull ? dom : dom.body.childNodes[0];
  72.     },
  73.     enumerable: false
  74.   });
  75.  
  76.   function setValueInput(input, value, isInputSimulate) {
  77.     var setValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  78.     setValue.call(input, value);
  79.     if (isInputSimulate) {
  80.       var e = new Event('input', {
  81.         bubbles: true
  82.       });
  83.       input.dispatchEvent(e);
  84.     }
  85.   }
  86.  
  87.   function getOffset(element) {
  88.     var elementRect = element.getBoundingClientRect();
  89.     return {
  90.       left: elementRect.left,
  91.       right: elementRect.right,
  92.       top: elementRect.top,
  93.       bottom: elementRect.bottom,
  94.     };
  95.   }
  96.  
  97.   function handleEvent(func, data) {
  98.     return function (event) {
  99.       func.bind(this)(event, data);
  100.     };
  101.   }
  102.  
  103.   var accounts = [];
  104.   var inputUsernameCurrentEl, inputPasswordCurrentEl;
  105.   var minHeightListBMN = 100;
  106.  
  107.   GM_xmlhttpRequest({
  108.     method: 'GET',
  109.     url: 'http://bugmenot.com/view/' + location.hostname,
  110.     headers: {
  111.       'Content-Type': 'application/x-www-form-urlencoded'
  112.     },
  113.     onload: function (response) {
  114.       var bmnEl = response.responseText.toDOM(true);
  115.       var accountEls = bmnEl.getElementsByClassName('account');
  116.       for (var i = 0; i < accountEls.length; i++) {
  117.         var accountEl = accountEls[i];
  118.         var infoEl = accountEl.getElementsByTagName('kbd');
  119.         var statsEl = accountEl.getElementsByClassName('stats')[1].getElementsByTagName('li');
  120.         var account = {
  121.           username: infoEl[0].innerHTML || '',
  122.           password: infoEl[1].innerHTML || '',
  123.           success: parseInt(statsEl[0].innerHTML.match(/\d+(?=%)/)[0]),
  124.           vote: parseInt(statsEl[1].innerHTML.match(/\d+(?=\svotes)/)[0]),
  125.           time: statsEl[2].innerHTML
  126.         };
  127.         accounts.push(account);
  128.       }
  129.       init();
  130.     },
  131.     onerror: function (response) { }
  132.   });
  133.  
  134.   function init() {
  135.     var listBMNEl = document.createElement('ul');
  136.     listBMNEl.classList.add('bmn-list');
  137.     document.body.appendChild(listBMNEl);
  138.  
  139.     function showListBMNEl() {
  140.       listBMNEl.classList.add('show');
  141.     }
  142.  
  143.     function hideListBMNEl() {
  144.       listBMNEl.classList.remove('show');
  145.     }
  146.  
  147.     if (accounts.length) {
  148.       accounts.forEach(function (account, index) {
  149.         var itemBMNEl = document.createElement('li');
  150.         itemBMNEl.classList.add('bmn-item');
  151.         itemBMNEl.classList.add(getClassSuccess(account.success));
  152.         var itemBMNElHTML = [
  153.           '<div class="bmn-row">',
  154.           '  <div class="bmn-col bmn-full">',
  155.           '    <div class="bmn-row bmn-align-items-center">',
  156.           '      <div class="bmn-icon">' + icons.username + '</div>',
  157.           '      <span class="bmn-username">' + account.username + '</span>',
  158.           '    </div>',
  159.           '    <div class="bmn-row bmn-align-items-center">',
  160.           '      <div class="bmn-icon">' + icons.password + '</div>',
  161.           '      <span class="bmn-password">' + account.password + '</span>',
  162.           '    </div>',
  163.           '  </div>',
  164.           '  <div class="bmn-col bmn-align-self-center">',
  165.           '    <div class="bmn-success">' + account.success + '%</div>',
  166.           '  </div>',
  167.           '</div>',
  168.           '<div class="bmn-row">',
  169.           '  <div class="bmn-vote">' + account.vote + ' votes</div>',
  170.           '</div>',
  171.           // ',<div class="time">' + account.time + '</div>',
  172.         ].join('');
  173.         itemBMNEl.innerHTML = itemBMNElHTML;
  174.         itemBMNEl.title = [
  175.           'Username: ' + account.username,
  176.           'Password: ' + account.password,
  177.           '',
  178.           account.success + '% success rate',
  179.           account.vote + ' votes',
  180.           account.time
  181.         ].join('\n');
  182.         itemBMNEl.onmousedown = handleEvent(onMouseDownItem);
  183.         itemBMNEl.onclick = handleEvent(onClickItem, account);
  184.         itemBMNEl.onmouseover = handleEvent(onMouseOverItem, account);
  185.         itemBMNEl.onmouseout = handleEvent(onMouseOutItem);
  186.         listBMNEl.appendChild(itemBMNEl);
  187.       });
  188.     } else {
  189.       var itemBMNNoLoginsFoundEl = document.createElement('li');
  190.       itemBMNNoLoginsFoundEl.classList.add('bmn-no-logins-found');
  191.       itemBMNNoLoginsFoundEl.innerHTML = 'No logins found';
  192.       listBMNEl.appendChild(itemBMNNoLoginsFoundEl);
  193.     }
  194.  
  195.     window.onscroll = function (event) {
  196.       if (inputUsernameCurrentEl) {
  197.         addStyleListBMNEl(inputUsernameCurrentEl);
  198.       }
  199.     };
  200.  
  201.     window.onresize = function (event) {
  202.       if (inputUsernameCurrentEl) {
  203.         addStyleListBMNEl(inputUsernameCurrentEl);
  204.       }
  205.     };
  206.  
  207.     var enableMouseOut = true;
  208.  
  209.     function setValueInputItem(inputUsernameEl, inputPasswordEl, username, password, isInputSimulate) {
  210.       // inputUsernameEl.value = username;
  211.       // inputPasswordEl.value = password;
  212.       setValueInput(inputUsernameEl, username, isInputSimulate);
  213.       setValueInput(inputPasswordEl, password, isInputSimulate);
  214.     }
  215.  
  216.     function onMouseDownItem(event) {
  217.       event.preventDefault();
  218.     }
  219.  
  220.     function onClickItem(event, account) {
  221.       event.stopPropagation();
  222.       enableMouseOut = false;
  223.       if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
  224.         setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, account.username, account.password, true);
  225.         inputUsernameCurrentEl.setAttribute('value', account.username);
  226.         hideListBMNEl();
  227.       }
  228.     }
  229.  
  230.     function onMouseOverItem(event, account) {
  231.       if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
  232.         setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, account.username, account.password);
  233.       }
  234.     }
  235.  
  236.     function onMouseOutItem(event) {
  237.       if (!enableMouseOut) {
  238.         enableMouseOut = true;
  239.         return;
  240.       }
  241.       if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
  242.         setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, '', '');
  243.       }
  244.     }
  245.  
  246.     function getClassSuccess(success) {
  247.       if (success > 91) return 'bmn-success-100';
  248.       else if (success > 81) return 'bmn-success-90';
  249.       else if (success > 71) return 'bmn-success-80';
  250.       else if (success > 61) return 'bmn-success-70';
  251.       else if (success > 51) return 'bmn-success-60';
  252.       else if (success > 31) return 'bmn-success-50';
  253.       else if (success > 21) return 'bmn-success-30';
  254.       else if (success > 11) return 'bmn-success-20';
  255.       else return 'bmn-success-10';
  256.     }
  257.  
  258.     function addStyleListBMNEl(inputEl) {
  259.       listBMNEl.style.width = inputEl.offsetWidth + 'px';
  260.       var offsetTarget = getOffset(inputEl);
  261.       var windowHeight = document.documentElement.clientHeight;
  262.       if (offsetTarget.top >= minHeightListBMN) {
  263.         listBMNEl.style.bottom = (windowHeight - offsetTarget.top) + 'px';
  264.         listBMNEl.style.top = '';
  265.         listBMNEl.style.left = offsetTarget.left + 'px';
  266.         listBMNEl.style.maxHeight = offsetTarget.top + 'px';
  267.       } else {
  268.         listBMNEl.style.top = offsetTarget.bottom + 'px';
  269.         listBMNEl.style.bottom = '';
  270.         listBMNEl.style.left = offsetTarget.left + 'px';
  271.         listBMNEl.style.maxHeight = (windowHeight - offsetTarget.bottom) + 'px';
  272.       }
  273.     }
  274.  
  275.     function onFocusInput(event, data) {
  276.       inputUsernameCurrentEl = data.inputUsernameEl;
  277.       inputPasswordCurrentEl = data.inputPasswordEl;
  278.       addStyleListBMNEl(inputUsernameCurrentEl);
  279.       showListBMNEl();
  280.     }
  281.  
  282.     function onBlurInput(event) {
  283.       if (!event.target.isSameNode(document.activeElement)) {
  284.         hideListBMNEl();
  285.       }
  286.     }
  287.  
  288.     function onInputInput(event) {
  289.       enableMouseOut = false;
  290.       hideListBMNEl();
  291.     }
  292.  
  293.     function checkAndEventToInput() {
  294.       var inputEls = document.querySelectorAll('input:not([type]):not([data-bmn-checked="true"]), input[type=text]:not([data-bmn-checked="true"]), input[type=email]:not([data-bmn-checked="true"]), input[type=tel]:not([data-bmn-checked="true"]), input[type=password]:not([data-bmn-checked="true"])');
  295.       if (inputEls.length > 1) {
  296.         for (var i = 1; i < inputEls.length; i++) {
  297.           inputEls[i].dataset.bmnChecked = true;
  298.           if (inputEls[i].type === 'password') {
  299.             if ((inputEls[i + 1] && inputEls[i + 1].type === 'password')) {
  300.               continue;
  301.             }
  302.  
  303.             if (inputEls[i - 1]) {
  304.               if (inputEls[i - 1].type === 'password') {
  305.                 continue;
  306.               } else {
  307.                 var inputUsernameEl = inputEls[i - 1];
  308.                 var inputPasswordEl = inputEls[i];
  309.                 var data = {
  310.                   inputUsernameEl: inputUsernameEl,
  311.                   inputPasswordEl: inputPasswordEl
  312.                 };
  313.                 inputUsernameEl.onclick = handleEvent(onFocusInput, data);
  314.                 inputUsernameEl.onfocus = handleEvent(onFocusInput, data);
  315.                 inputUsernameEl.onblur = handleEvent(onBlurInput);
  316.                 inputUsernameEl.oninput = handleEvent(onInputInput);
  317.                 if (inputUsernameEl.isSameNode(document.activeElement)) onFocusInput(undefined, data);
  318.               }
  319.             }
  320.           }
  321.         }
  322.       }
  323.     }
  324.  
  325.     var observeDOM = (function () {
  326.       var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
  327.         eventListenerSupported = window.addEventListener;
  328.  
  329.       return function (obj, callback) {
  330.         if (MutationObserver) {
  331.           var obs = new MutationObserver(function (mutations, observer) {
  332.             if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
  333.               callback();
  334.             }
  335.           });
  336.           obs.observe(obj, {
  337.             childList: true,
  338.             subtree: true
  339.           });
  340.         } else if (eventListenerSupported) {
  341.           obj.addEventListener('DOMNodeInserted', callback, false);
  342.           obj.addEventListener('DOMNodeRemoved', callback, false);
  343.         }
  344.       };
  345.     })();
  346.  
  347.     observeDOM(document, function () {
  348.       checkAndEventToInput();
  349.     });
  350.   }
  351. })();