【爆速開発】ブックマークレットをGithubで管理する

zuka

こんにちは。zuka（@beginaid）です。

本記事では，ブックマークレットをGithubで管理する方法をお伝えしていきます。ブックマークレットとはJavaScriptをブラウザ上で簡易的に実行できる仕組みのことで，うまく活用することで開発効率を大幅に向上させることができます。

結論

最初に結論をお伝えします。ブックマークレットの処理内容を記述したjsファイルをGithubで公開後，ESModulesのimportを利用してjsファイルを読み込みます。その際，通常のGithubのリポジトリにhttp(s)リクエストを行うと，ファイル以外の無駄な要素も含まれたHTMLが返ってきてしまいます。そこで，リポジトリをGithubPages化することで，レスポンスとしてjsが返ってくるように工夫してあげる必要があります。

// GitHubに公開するスクリプト
export default () => {
    const title = document.title;
    const url = document.URL;
    navigator.clipboard.writeText(`[${title}](${url})`).then();
};

// ブックマークレットに登録するスクリプト
javascript:import("https://beginaid.github.io/Bookmarklet/title-url-md.js").then(m=>m.default());

以下では，詳細を説明していきます。

jsをGithubに公開

今回は，例としてこちらのページで紹介しているブックマークレットを利用したいと思います。以下のスクリプトをDevツールのコンソールで実行すると，ブラウザで開いているページのタイトルトURLをマークダウン形式に変換することができます。他にも，任意のスクリプトをブックマークレットに登録することができます。

const title = document.title;
const url = document.URL;
navigator.clipboard.writeText(`[${title}](${url})`).then();

ブックマークレットを利用する場合は，httpプロトコルと区別するために javascript: を先頭に記述します。

javascript:
const title = document.title;
const url = document.URL;
navigator.clipboard.writeText(`[${title}](${url})`).then();

今回は，ESModulesのimport機能を利用してGitHubからスクリプトを取得して実行します。

javascript:import("https://github.com/beginaid/Bookmarklet/blob/main/title-url-md.js").then(m=>m.default());

上記コードでは，GitHubのリモートリポジトリからhttpリクエストを通じてソースコード（が含まれたHTML）を取得することができます。動的にjsファイルを取得することで，ブックマークの内容を変えなくても，Git上でソースコードを変更するだけで処理内容を変更させることができます。

GitHub上で管理するソースコード側では， default() を export するようにします。こちらのファイルをGitHubにpushしましょう。

export default () => {
    const title = document.title;
    const url = document.URL;
    navigator.clipboard.writeText(`[${title}](${url})`).then();
};

しかし，このままではGitHubからのレスポンスが該当するリポジトリのHTMLになっていますので，ブックマークレットをjsとして動かすことができません。この問題を解決するため，リポジトリをGithubPages化することで，レスポンスをjsとして受け取ることができるようになります。

GitHubのリポジトリをPages化する

「Settings > Pages」より，リポジトリをPages化しましょう。すると，レスポンスでjsファイルの中身を返してくれるようになります。ここまできてようやく，以下のスクリプトをブックマークに登録してクリックすることで，開いているページのタイトルとURLをマークダウン形式に変換してくれるようになります。

javascript:import("https://beginaid.github.io/Bookmarklet/title-url-md.js").then(m=>m.default());