gists

Tampermonkey とローカル開発サーバーの通信フロー

[ブラウザで scrapbox.io を開く]
            │
            ▼
[拡張機能: Tampermonkey]
  (loader.user.js が動く)
            │
            │  GM_xmlhttpRequest で
            │  http://localhost:3456/_loader へアクセス
            ▼
[あなたのPCのローカル開発サーバー]
  cosense-userscript-dev が起動中
  /_loader を返す
            │
            ▼
[返ってきたローダーJSを eval]
            │
            ▼
[ローカルでビルドされた userscript を読み込み・実行]
  (dist/*.js)

ポイント:

• scrapbox.io から直接ローカルへアクセスしているわけではない
• Tampermonkey（拡張機能）がローカルの開発サーバーへ取りに行っている

Cosense Userscript（Tampermonkey）反映手順メモ

Tampermonkey は「ローカル開発サーバーのスクリプトを読み込ませるブートストラップ」を入れるだけ。

1. プロジェクト作成

mkdir my-userscripts && cd my-userscripts
npm init -y

2. Tampermonkey 用ブートストラップ生成（1回だけ）

npx cosense-userscript-dev loader

loader.user.js が生成される。

3. Tampermonkey に登録（1回だけ）

• loader.user.js の中身をコピー
• Tampermonkey → 新規スクリプト作成 → 貼り付け → 保存

4. UserScript を作る

mkdir scripts

5. 開発サーバー起動

npx cosense-userscript-dev

dist/ を配信し、変更が自動反映される。

6. Cosense で動作確認

https://scrapbox.io/ でページを開き、反映されていればOK。

補足

• bun があるなら npx の代わりに bunx でもOK。
• ポートや @match を変えるなら cosense-dev.config.ts を作って、loader を再生成する。

GM_xmlhttpRequest とは

GM_xmlhttpRequest は Tampermonkey / Greasemonkey などの userscript 拡張が提供する特別な HTTP リクエストAPI。 普通の XMLHttpRequest（や fetch）とは違い、拡張機能の権限で動くため、ページの制限を回避できる。

違いの要点

• 通常の XMLHttpRequest はページの制限（同一オリジン / CSP）を受ける
• GM_xmlhttpRequest は拡張の権限で動くので、@connect で許可した先へ CORS を無視してアクセスできる
• つまり http://localhost:3456 にもアクセスできる（ページ自身はできない）

まとめ

• XMLHttpRequest = ページの権限で通信
• GM_xmlhttpRequest = 拡張機能の権限で通信

このため cosense-userscript-dev の loader.user.js は GM_xmlhttpRequest を使ってローカル開発サーバーへ取りに行っている。

This site is open source. Improve this page.