Copy button for outlinekeys

Adds a copy button for each access key in the listing

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name        Copy button for outlinekeys
// @namespace   Violentmonkey Scripts
// @match       https://outlinekeys.com/
// @match       https://openkeys.net/
// @grant       none
// @version     1.1
// @require     https://cdn.jsdelivr.net/npm/[email protected]/dist/notie.min.js
// @description Adds a copy button for each access key in the listing
// @run-at      document-start
// @license MIT
// ==/UserScript==

// notie-css
const style = document.createElement("style");
style.innerHTML = '.notie-container{font-size:1.6rem;height:auto;left:0;position:fixed;text-align:center;width:100%;z-index:2;box-sizing:border-box;-o-box-shadow:0 0 5px 0 rgba(0,0,0,.5);-ms-box-shadow:0 0 5px 0 rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.5)}@media screen and (max-width:900px){.notie-container{font-size:1.4rem}}@media screen and (max-width:750px){.notie-container{font-size:1.2rem}}@media screen and (max-width:400px){.notie-container{font-size:1rem}}.notie-background-success{background-color:#57bf57}.notie-background-warning{background-color:#d6a14d}.notie-background-error{background-color:#e1715b}.notie-background-info{background-color:#4d82d6}.notie-background-neutral{background-color:#a0a0a0}.notie-background-overlay{background-color:#fff}.notie-textbox{color:#fff;padding:20px}.notie-textbox-inner{margin:0 auto;max-width:900px}.notie-overlay{height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:1}.notie-button{cursor:pointer}.notie-button,.notie-element{color:#fff;padding:10px}.notie-element-half{width:50%}.notie-element-half,.notie-element-third{display:inline-block;box-sizing:border-box}.notie-element-third{width:33.3333%}.notie-alert{cursor:pointer}.notie-input-field{background-color:#fff;border:0;font-family:inherit;font-size:inherit;outline:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}.notie-select-choice-repeated{border-bottom:1px solid hsla(0,0%,100%,.2);box-sizing:border-box}.notie-date-selector-inner{margin:0 auto;max-width:900px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.notie-date-selector-inner [contenteditable],.notie-date-selector-inner [contenteditable]:focus{outline:0 solid transparent}.notie-date-selector-up{transform:rotate(180deg)}';
document.head.appendChild(style);

const observer = new MutationObserver((mutations, obs) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'A') {
        if (node.href && node.href.startsWith(location.origin + '/key/')) {
          addExtras(node);
        }
      }
    }
  }
});

observer.observe(document.documentElement, { childList: true, subtree: true });
window.addEventListener('DOMContentLoaded', () => observer.disconnect());

function addExtras(a) {
  const title = a.querySelector('h3');
  const copyButton = document.createElement('button');
  copyButton.type = 'button';
  copyButton.textContent = 'Copy';
  copyButton.className = 'btn btn-dark';
  copyButton.addEventListener('click', copyAccessKey);
  title.appendChild(copyButton);
}

async function copyAccessKey(event) {
  event.preventDefault();
  const button = event.target;
  const a = button.closest('a');
  const href = a.href;
  const title = a.querySelector('h3').firstChild;
  const icon = a.querySelector('img');
  const buttonText = event.target.textContent;
  event.target.textContent = 'Fetching...';
  const accessKey = await getAccessKey(href);
  if (document.hasFocus()) {
    finaly(accessKey)
  } else {
    window.addEventListener('focus', finaly.bind(null, accessKey), { once: true });
  }
  event.target.textContent = buttonText;

  function finaly(accessKey) {
    if (accessKey) {
      navigator.clipboard.writeText(accessKey);
      notie.alert({ type: 1, text: icon.outerHTML + title.textContent + ' copied', time: 1.5 });
    } else {
      notie.alert({ type: 3, text: 'Error: Access key not found in the key page', time: 3 });
    }
  }
}

async function getAccessKey(url) {
  const parser = new DOMParser();
  const res = await fetch(url);
  const src = await res.text();
  const doc = parser.parseFromString(src, 'text/html');
  const accessKey = doc.querySelector('#accessKey');
  return accessKey?.value;
}