GreasyFork: User Control Panel Button

To add User Control Panel Button into navigation bar

Per 21-09-2023. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name        GreasyFork: User Control Panel Button
// @namespace   UserScripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.1.7
// @license     MIT
// @author      CY Fung
// @description To add User Control Panel Button into navigation bar
// ==/UserScript==

(async () => {

  function preSetup() {
    // for styling

    let pos = document.querySelectorAll('#site-nav>nav>li.with-submenu');
    pos = pos.length >= 1 ? pos[pos.length - 1] : null;

    if (!pos) return;

    pos.parentNode.style.minHeight = '2.8rem';




    return { pos };

  }

  function setup(m) {

    const { cpmRoot } = m;


    let h = (cpmRoot.querySelector('h3') || cpmRoot.querySelector('header'));
    if (!h) return;

    let nav = document.createElement('nav');

    for (const anchor of cpmRoot.querySelectorAll('li a[href]')) {
      let li = nav.appendChild(document.createElement('li'));
      li.appendChild(anchor);
    }


    let tm = document.createElement('template');
    tm.innerHTML = `
          <li class="with-submenu" style="display: block;">
            <a href="#" onclick="return false">${h.textContent}</a>
            <nav style="min-width: initial;">
              ${nav.innerHTML}
            </nav>
          </li>
  `.trim();

    return tm.content;


  }


  function bufferToHex(buffer) {
    const byteArray = new Uint8Array(buffer);
    const len = byteArray.length;
    const hexCodes = new Array(len * 2);
    const chars = '0123456789abcdef';
    for (let i = 0, j = 0; i < len; i++) {
      const byte = byteArray[i];
      hexCodes[j++] = chars[byte >> 4];
      hexCodes[j++] = chars[byte & 0x0F];
    }
    return hexCodes.join('');
  }

  async function digestMessage(message) {
    const encoder = new TextEncoder("utf-8");
    const msgUint8 = encoder.encode(message);
    const hashBuffer = await crypto.subtle.digest('SHA-1', msgUint8);
    return bufferToHex(hashBuffer);
  }

  async function fetchCPHTML(o) {

    const { stKey, href } = o;

    for (let trialN = 4; trialN--;) {


      let r = await new Promise(resolve => {


        let t = sessionStorage.getItem(stKey)

        if (`${t}`.length > 32) resolve(t);


        sessionStorage.setItem(stKey, `${Date.now()}`);


        fetch(href, {
          method: "GET",
          mode: "cors",
          cache: "force-cache",
          credentials: "same-origin",
          redirect: "follow",
          referrerPolicy: "no-referrer",


        }).then(res => res.text()).then(async res => {
          sessionStorage.removeItem(stKey);


          let template = document.createElement('template');
          template.innerHTML = res;
          let w = template.content;

          let cp = w.querySelector('#control-panel');

          if (cp) {

            const html = cp.innerHTML.trim();

            sessionStorage.setItem(stKey, html);

            resolve(html);
          } else {


            await fetch(href, {
              method: "GET",
              mode: "cors",
              cache: "reload",
              credentials: "same-origin",
              redirect: "follow",
              referrerPolicy: "no-referrer",

            });

            resolve();

          }



        }).catch(e => {

          sessionStorage.removeItem(stKey);
        });



      });

      if (r && typeof r === 'string' && r.length > 32) return r;

    }



  }

  if (!document.querySelector('.sign-out-link') || document.querySelector('.sign-in-link')) return;

  let plink = document.querySelector('.user-profile-link');
  if (!plink) return;

  let href = plink.querySelector('a[href*="/users/"]').href;

  let mi = href.indexOf('/users/');
  if (mi < 0) return;

  if (href.includes('/users/sign')) return;


  let presetup = preSetup();

  if (!presetup) return;

  const { pos } = presetup;


  let dm = await digestMessage(href);

  const stKey = `gf_control_panel_${dm}`


  for (let trialN = 8; trialN--;) {
    let s = sessionStorage.getItem(stKey);
    let d = typeof s === 'string' ? parseInt(s) : 0;
    if (d > 9 && Date.now() - d < 8000) await new Promise(r => setTimeout(r, 320));
    else break;
  }


  const cpHTML = await fetchCPHTML({ stKey, href });

  if (!cpHTML || typeof cpHTML !== 'string') return;

  let cpm = document.createElement('template');

  cpm.innerHTML = cpHTML;

  const kc = setup({ cpmRoot: cpm.content, pos });
  if (kc) {

    pos.parentNode.insertBefore(kc, pos.nextSibling);
  }



})();