Pixiv - Replace "Pawooでシェア" with web+mastodon button

pixiv-replace-pawoo-with-webmastodon.user.js

// ==UserScript==
// @name         Pixiv - Replace "Pawooでシェア" with web+mastodon button
// @namespace    https://github.com/unarist/
// @version      0.6
// @author       unarist
// @downloadURL  https://gist.github.com/unarist/79068e361c8cf69af4b7a520914e1259/raw/pixiv-replace-pawoo-with-webmastodon.user.js
// @match        https://www.pixiv.net/bookmark_add.php?*
// @match        https://www.pixiv.net/member_illust.php?*
// @match        https://www.pixiv.net/novel/bookmark_add.php?*
// @match        https://www.pixiv.net/novel/show.php?*
// @match        https://sketch.pixiv.net/*/lives/*
// @grant        none
// ==/UserScript==

/*
0.6: fix svg encoding
0.5: use Proxy/Reflect to hook window.open
0.4: new design of pixiv with React, pixivSketch Live
0.3: add @match for novel pages
0.2: fix tooltip (only for non-React design)
*/

(function() {
    'use strict';

    // based on https://github.com/tootsuite/mastodon/blob/v2.2.0/app/javascript/images/logo.svg
    const mastodonIconSource = `
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'>
  <path fill='#3088D4' d='M16.378 10.755c-.246 1.266-2.203 2.649-4.451 2.919-1.172.14-2.326.268-3.557.212-2.012-.093-3.6-.481-3.6-.481 0 .196.012.384.036.558.262 1.986 1.97 2.105 3.587 2.161 1.632.055 3.086-.402 3.086-.402l.066 1.476s-1.142.614-3.176.726c-1.122.063-2.515-.027-4.137-.457C.712 16.536.107 12.784.015 8.979c-.028-1.13-.01-2.196-.01-3.087C.005 2 2.555.86 2.555.86 3.841.267 6.047.019 8.341 0h.056c2.293.019 4.5.267 5.787.858 0 0 2.55 1.14 2.55 5.032-.001 0 .032 2.871-.356 4.865'></path>
  <path fill='#FFF' d='M13.726 6.192v4.712h-1.867V6.331c0-.964-.405-1.454-1.217-1.454-.896 0-1.348.58-1.348 1.729v2.503H7.439V6.605c0-1.148-.45-1.729-1.347-1.729-.812 0-1.217.49-1.217 1.454v4.573H3.008V6.192c0-.963.245-1.729.738-2.294.508-.566 1.173-.856 1.999-.856.956 0 1.679.367 2.157 1.102l.465.78.466-.78c.477-.734 1.201-1.102 2.157-1.102.825 0 1.49.29 1.999.856.491.565.737 1.331.737 2.294'></path>
</svg>`;
    const mastodonIcon = new DOMParser().parseFromString(mastodonIconSource, 'image/svg+xml').firstChild;

    const replacePawooShareLink = url => url.replace(/https:\/\/pawoo.net\/(intent\/statuses\/new|share)/, 'web+mastodon://share');

    // pixiv: a[href] with img
    const updateButtons = () => {
        const buttons = document.querySelectorAll('._share-links .pawoo a, a[href^="https://pawoo.net/share"]');
        for (const button of buttons) {
            button.href = replacePawooShareLink(button.href);
            const img = button.querySelector('img');
            img.src = 'data:image/svg+xml,' + encodeURIComponent(mastodonIcon.outerHTML);
            img.dataset.tooltip = 'Mastodon';
            button.querySelector('.label, span').textContent = 'Mastodonでシェア';
        }
    }
    new MutationObserver(updateButtons).observe(document.body, { childList: 1, subtree: 1 });
    updateButtons();

    // pixivSketch Live: window.open with svg
    const pawooSymbol = document.querySelector('symbol#pawoo');
    if (pawooSymbol) {
        window.pawooSymbol = pawooSymbol;
        pawooSymbol.setAttribute('viewBox', mastodonIcon.getAttribute('viewBox'));
        pawooSymbol.innerHTML = mastodonIcon.innerHTML;
    }
    window.open = new Proxy(window.open, { apply: (target, thisArg, [url, ...others]) => Reflect.apply(target, thisArg, [replacePawooShareLink(url), ...others])});
})();