TUbox.user.js

// ==UserScript==
// @name         T/U box
// @namespace    http://tampermonkey.net/
// @version      0.1.4
// @description  w/ "{title} {url}" format. easy copyable title/url box; click to copy, double-click outer to close
// @author       read below comment
// @include http://*
// @include https://*
// @grant        GM_registerMenuCommand
// @grant        GM_setClipboard
// @noframes
// ==/UserScript==
GM_registerMenuCommand("T/U box", run);
function run(){
    /*
 * @title T/U box
 * @description w/ "{title} {url}" format. easy copyable title/url box; click to copy, double-click outer to close
 * @include http://*
 * @include https://*
 * @contributor	pacochi	http://let.hatelabo.jp/pacochi/let/hJme3OvVzN41
 * @contributor noromanba http://let.hatelabo.jp/noromanba/let/hJme3Pyylqos
 * @license MIT License	https://opensource.org/licenses/MIT
 * @javascript_url
 */

    /* modifications

* Show confirm dialog for doubtful URL
 (location.pushState/replace will cause mismatch between meta URLs and current URL)
* Fix copy format
* Add Title+URL format
* Append location.hash
* Avoid to use array for querySelector (for cloudflare rocket.js)
* Close on click anywhere

*/
    (() => {
        'use strict';

        // https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
        const canonical = (
            (document.querySelector('head meta[property="og:url"][content]') || {}).content ||
            (document.querySelector('head link[rel="canonical"][href]') || {}).href
        ) + location.hash;
        const title = document.title;

        const url =
              ((!canonical || canonical === "undefined") && location.href) ||
              (new URL(canonical).pathname === location.pathname && canonical) ||
              (confirm(`次のURLがmetaタグから見つかりましたが、現在のpathと異なります。\nキャンセルを押すとlocation.hrefを使用します。\n${canonical}`) && canonical) ||
              location.href;

        const box = document.body.appendChild(Object.assign(document.createElement('div'), {
            id: 'copy-buttons',
            style: `
background-color: white;
border: 1px solid silver;
padding: 1em;
position: fixed;
top: 0;
left: 0;
z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
`,
        }));
        const onClose = e => {
            box.parentNode.removeChild(box);
            document.removeEventListener('click', onClose);
            e.stopPropagation();
        };

        box.addEventListener('click', e => e.stopPropagation());
        box.addEventListener('dblclick', onClose);
        document.addEventListener('click', onClose);


        // TBD alignment
        [
            { label: 'URL', value: url },
            { label: 'Title', value: title },
            { label: 'Title + URL', value: title + ' ' + url },
            { label: 'HatenaSyntax', value: `[${url}:title=${title}]` },
            { label: 'Markdown', value: `[${title}](${url})` },
        ].forEach(({label, value}) => {
            box.appendChild(Object.assign(document.createElement('label'), {
                style: `
display: block;
color: black;
background-color: silver;
text-align: left;
`,
                textContent: `${label}: `,
            })).appendChild(Object.assign(document.createElement('input'), {
                style: `
color: black;
background-color: silver;
margin: 0.5em;
`,
                value,
            })).addEventListener('click', e => {
                e.target.select();
                document.execCommand('copy');
                e.stopPropagation();
            });
        });
        (()=>{
            GM_setClipboard( title + ' ' + url ,"text");
        })();
    })();
}