☰

USO - add USOa button on userstyle page

Add a link on userstyles.org to the copy of the current userstyle on "USO archive" (uso.kkx.one)

  1. // ==UserScript==
  2. // @name         USO - add USOa button on userstyle page
  3. // @namespace    github.com/Procyon-b
  4. // @version      0.4
  5. // @description  Add a link on userstyles.org to the copy of the current userstyle on "USO archive" (uso.kkx.one)
  6. // @author       Achernar
  7. // @match        https://userstyles.org/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. "use strict";
  13.  
  14. var newL=document.querySelector('#__next');
  15.  
  16. if (newL) {
  17.   let pushState=history.pushState;
  18.   history.pushState=function(){
  19.     pushState.apply(history, arguments);
  20.     if (location.pathname.startsWith('/styles/')) {
  21.       setTimeout(add, 0);
  22.       }
  23.     }
  24.   // popup created?
  25.   new MutationObserver(function(mutations) {
  26.     if (newL.querySelector(':scope > [class^="style_mainWrapper_"]')) setTimeout(add, 0);
  27.     }).observe(newL, { attributes: false, subtree: false, childList: true });
  28.   }
  29.  
  30. const obs=new MutationObserver(function(muts){
  31.   for (let mut of muts) {
  32.     for (let n of mut.addedNodes) {
  33.       b=n && n.querySelector && ( n.querySelector('#top-buttons > .left') || n.querySelector('#buttons') || n.querySelector('div[class^="style-details_bottomRight_"]') );
  34.       if (b) {
  35.         this.disconnect();
  36.         setTimeout(addLink,0);
  37.         return;
  38.         }
  39.       }
  40.     }
  41.   });
  42.  
  43. var b=null;
  44.  
  45. function add() {
  46.   var e;
  47.   if (e=document.getElementById('USOa')) {
  48.     // update url
  49.     e.firstElementChild.href=aLink();
  50.     return;
  51.     }
  52.  
  53.   b=document.querySelector('#top-buttons > .left') || document.querySelector('#buttons') || document.querySelector('div[class^="style-details_bottomRight_"]');
  54.  
  55.   if (b) addLink();
  56.   else if (!newL) obs.observe(document.body, {attributes: false, subtree: true, childList: true });
  57.   }
  58.  
  59. if (location.pathname.startsWith('/styles/')) add();
  60.  
  61. // old design - buttons can be removed
  62. window.addEventListener('resize', function(){
  63.   setTimeout(add,0);
  64.   })
  65.  
  66. function aLink() {
  67.   return 'https://uso.kkx.one/style/'+location.pathname.split('/')[2];
  68.   }
  69.  
  70. function addLink() {
  71.   if (!b || document.getElementById('USOa')) return;
  72.   var L=aLink(),
  73.     r=document.querySelector('div[class^="style-details_bottomRight_"]'),
  74.     e=document.createElement('style');
  75.   b.appendChild(e);
  76.   e.innerText='.upgradeButton {margin-right: 11px;} #USOa {background: #39c739; color: white; text-align: center; order: 9; width: unset; padding: 0 1em; border-radius: 24px; border: none;} #USOa a {color: inherit; line-height: 1.3em} #style-top-upvotes-wrapper {white-space: nowrap;} #style-top-upvotes-wrapper.can-vote {position: relative;} #style-top-upvotes-wrapper.can-vote:hover .button-wrapper {display: flex !important; visibility: hidden;} #style-top-upvotes-wrapper.can-vote .button-wrapper ~ img {position: absolute !important; right: 0;}';
  77.   if (r) {
  78.     e.innerText+='\ndiv[class^="style-details_bottomRight_"] {display: flex; align-items: center;} #USOa {order: 9; z-index: 20; margin-left: 0.5em; font-size: 13px;}';
  79.     }
  80.   e=document.createElement('div');
  81.   b.appendChild(e);
  82.   e.outerHTML='<div class="customize_style_button" id="USOa"><a href="'+L+'" target="_blank"><span>Install&nbsp;from<br>USO&nbsp;archive</span></a></div>';
  83.   }
  84.  
  85. })();