ローカルHTMLから対応するWebページを開くTampermonkeyスクリプト

Webサイト開発時、Webアプリケーション開発時、パッケージのドキュメント執筆時など、ローカルHTMLを確認しているときに、対応する公開済みのWebページも確認したいことがあると思います。

そこで、Tampermonkeyユーザスクリプトで、ローカルHTMLの右上に、Web公開版に飛ぶボタンを設置しました。

ご利用のブラウザに Tampermonkey が必要です。仕組みや注意点を理解の上でインストールいただき、適宜有効化 (ファイルの URL へのアクセスも適宜許可) する必要があります。

ユーザスクリプトは下記コードブロックです。もし利用される場合は以下を変更ください。

• @name と @namespace に、わかりやすい名前と名前空間名を付けてください (このペアが他のユーザスクリプトと衝突しなければ何でもよいです)。
• @match の *.html より前の部分及び localPrefix をローカルHTML置き場に、webPrefix を対応するURLのパスにしてください。
  • 以下の例は対象が静的サイトなのでローカルHTML置き場が file:///.../ ですが、http://localhost:8000/ などとすれば、MkDocs 開発時のローカルでの動的サービングや、Web アプリケーションにもボタンを設置できるはずです。
• 私は最も右上に既に別のボタンがあるので (これ)、ボタンを設置する座標を右上よりやや下の top: '36px', right: '8px', としていますが、お好きな位置にしてください。

cookipedia-local-to-web-button.user.js

// ==UserScript==
// @name         Cookipedia local -> web button
// @namespace    https://cookiebox26.github.io/
// @version      2026-04-07
// @description  ローカル HTML に対応する GitHub Pages URL で開くボタンを右上に追加
// @match        file:///C:/Users/Cookie/square/cookipedia/docs/*.html
// @grant        none
// ==/UserScript==
(function() {
  'use strict';
  const localPrefix = 'file:///C:/Users/Cookie/square/cookipedia/docs/';
  const webPrefix = 'https://cookiebox26.github.io/cookipedia/';
  if (!location.href.startsWith(localPrefix)) {
    return;
  }
  const webUrl = webPrefix + location.href.slice(localPrefix.length);
  const btn = document.createElement('button');
  btn.textContent = 'web';
  Object.assign(btn.style, {
    position: 'fixed', top: '36px', right: '8px', zIndex: '99999',
  });
  btn.addEventListener('click', () => {
    window.open(webUrl, '_blank');
  });
  document.body.appendChild(btn);
})();