Scrapboxのページメニューに任意のJavaScriptを実行するボタンを追加するユーザースクリプト

更新履歴

日付をタップすると展開します。


↓ ここにボタンを簡単に追加できます

↓ クリックすると登録したJSが実行されます

コード

code:script.js
    (function(){
    // このスクリプトをオン・オフする
    const this_script = 'on';
    
    const kibayashi = function() {
        alert('話は聞かせてもらった!\n人類は滅亡する!!!');
    };
    const minna = function() {
        alert('な、なんだってーーーー!');
    };
    const js_list = [
        {display: 'キバヤシ', func: kibayashi, id: 'additional-js-button1'},
        {display: 'Ω ΩΩ', func: minna, id: 'additional-js-button2'}
    ];
    
    function insert(js_list, menu_elem) {
        const target_elem = menu_elem.lastElementChild;
        menu_elem.insertBefore($('<div js-menubutton-added="true"></div>')[0], target_elem);
        js_list.forEach(value => {
            const elem_to_insert = $('<li><a>' + value.display + '</a></li>')[0];
            elem_to_insert.setAttribute('id', value.id);
            menu_elem.insertBefore(elem_to_insert, target_elem);
            elem_to_insert.addEventListener('click', value.func, false);        
        });
        menu_elem.insertBefore($('<li role="separator" class="divider"></li>')[0], target_elem);
    }
    
    function main(trial_num) {
        const sidebar_elem = document.getElementsByClassName('col-page-side')[1];
        if (!sidebar_elem) {
            setTimeout(() => {
                trial_num++;
                if (trial_num > 10) {
                    return;
                }
                main(trial_num);
            }, 1000);
            return;
        }
        const menu_elem = sidebar_elem.querySelector('[aria-labelledby="dropdownMenuPageEdit"]');
        if (menu_elem) {
            insert(js_list, menu_elem);
        }
        const sidebar_observer = new MutationObserver((m_records, observer) => {
            if (location.href.split('/')[3] !== project) {
                observer.disconnect();
                return;
            }
            const menu_elem = sidebar_elem.querySelector('[aria-labelledby="dropdownMenuPageEdit"]');
            if(menu_elem && !menu_elem.querySelector('div[js-menubutton-added="true"]')) {
                insert(js_list, menu_elem);
            }
        });
        sidebar_observer.observe(sidebar_elem, { childList: true });
    }
    
    const project = location.href.split('/')[3];
    if (this_script === 'on') {
        main(0);
    }
    
    })();

スポンサーリンク

導入の手順

  1. ScrapboxのUserScriptの機能を有効にする
    Scrapboxの右上のMenu -> Edit Profile -> Extensionタブ
    と進み、User ScriptのEnabledにチェックを入れる

  2. コードを「自分のページ」に貼り付ける

安全のため、プロジェクトを抜けると処理を終了するようにしています。
複数のプロジェクトで有効にしたい場合は、それぞれのプロジェクトの「自分のページ」にコードを貼り付ける必要があります。

「自分のページ」って何だ?という方はこちらを参照。
自分のページ - 橋本商会

使い方

サンプルとして登録されているものをみていただければすぐわかるかと思います。

↓ 実行したいJSを関数として書いて

const kibayashi = function() {
    alert('話は聞かせてもらった!\n人類は滅亡する!!!');
};
const minna = function() {
    alert('な、なんだってーーーー!');
};

 

↓ 定数js_listに装填するだけ

const js_list = [
    {display: 'キバヤシ', func: kibayashi, id: 'additional-js-button1'},
    {display: 'Ω ΩΩ', func: minna, id: 'additional-js-button2'}
];

 

--

ボタンにはIDが振ってありますので、AppleScriptやブックマークレット(ボタンが隠れてしまうモバイルで)でボタンを押下できます。

▼AppleScript(Chrome, Safari)

set the_id to "additional-js-button1"
set the_script to "if(location.hostname==='scrapbox.io')document.getElementById('" & the_id & "').click()"

tell application "System Events"
    set app_name to name of (path to frontmost application)
end tell

if app_name is "Safari.app" then
    tell application "Safari"
        do JavaScript the_script in current tab of window 1
    end tell
else if app_name is "Google Chrome.app" then
    tell application "Google Chrome"
        execute active tab of window 1 javascript the_script
    end tell
end if

▼ブックマークレット

javascript:if(location.hostname==='scrapbox.io')document.getElementById('additional-js-button1').click();


他にこんな記事を書きました。

スポンサーリンク
スポンサーリンク

4 件のコメント

  • ユーザースクリプを貼るのは、自分のページじゃないと駄目なんですか?
    あと、プロジェクトごとに貼るんですよね?

  • コメントを残す

    メールアドレスが公開されることはありません。