使い方
Cosense (旧Scrapbox) には userscript という仕組みがあります。自分のページに書いた JavaScript / CSS を、自分のブラウザでだけ実行できるものです。ここのスクリプトはすべてその仕組みに乗っているので、 ブラウザ拡張もビルドも要りません。設定ページに1行足すだけで動きます。
1. 設定ページを開く
Cosense で自分のユーザー名と同じタイトルのページを開きます。これが設定ページです。無ければ作ってください。 Cosense はこのページの code:script.js を、プロジェクトを開くたびに読み込みます。
2. スニペットを貼る
各スクリプトの詳細ページにある「📋 コピー」で1行が手に入ります。それを設定ページのcode:script.js ブロックに追加します。
code:script.js
import "/api/code/cosense-toolbox/選択して自動リンクするuserScript/script.js";userCSS のものは code:style.css ブロックで @import します。
code:style.css
@import url('/api/code/cosense-toolbox/コードブロックの行番号を表示するUserCSS/style.css');まとめて入れる場合は、一覧や詳細ページの ＋ ボタンで気に入ったものを積んでから、 ヘッダの 🧰 を開いて「まとめてコピー」を押します。JavaScript と CSS が
code:script.js と code:style.css に振り分けられた状態で1枚のスニペットになるので、 そのまま設定ページに貼れます。3. 保存してリロード
ページを保存して再読み込みすれば反映されます。外したくなったら、その import の行を消すだけです。 ファイルも設定も残りません。
コードはどこにあるか
スクリプトの実体は Cosense のページのコードブロックに置いてあります。中身は次の API で取得できます。
/api/code/<プロジェクト名>/<ページタイトル>/<コードブロックのタイトル>末尾はコードブロックに書いたタイトルがそのまま入ります。code:script.js と書いていればscript.js、code:style.css なら style.css です。
このパスは scrapbox.io の中であれば別プロジェクトのコードも読み込めます。 そのため、多くは cosense-toolbox の実装をそのまま import するだけで動きます。 自分のプロジェクトにコードをコピーして、そちらを指しても構いません。
できること、できないこと
- できる：Cosense の UI のカスタマイズ、内部 API、Clipboard、localStorage、CacheStorage の利用。
- できない：CSP により外部へのネットワークリクエストはほぼ通りません。 ここのスクリプトは scrapbox.io の中で完結するように書いてあります。