ブックマークレットを作る時の雛形があればいいなぁと思って作成しました🐣
ローカルに置いておくと、ブックマークレットを作りたいときにサクッと圧縮してブックマークレットの形式にしてくれるので重宝してます。
リポジトリ
リポジトリは以下です。
ファイル構成
以下のようなファイル構成になっています。
.
├── README.md
├── dist
│ └── bookmarklet.js
├── node_modules
├── package-lock.json
├── package.json
└── src
└── main.js
-
src/main.js: 開発用のJavaScriptファイル。ここにブックマークレットとして動作させたいコードを書きます。 -
dist/bookmarklet.js: ビルド後に生成されるブックマークレット。ブラウザで動作させるためにブックマークに登録するJavaScriptがこのファイルに出力されます。
使い方
依存関係のインストール
まず、以下のコマンドで依存関係をインストールします。
npm install
コードを書く
src/main.jsにブックマークレットとして実行したJavaScriptのコードを書きます。
例）ページ内のすべての見出しタグ（h1〜h6）に背景色を追加するコード
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(heading => {
heading.style.backgroundColor = '#ff0'; // 背景色を黄色に
heading.style.color = '#000'; // テキストを黒に
heading.style.padding = '10px'; // パディングを追加
});
ビルド
コードを書き終えたら、以下のコマンドでブックマークレット用にコードをビルドします。
npm run build
ビルドが成功すると、dist/bookmarklet.jsにブックマークレット用のコードが生成されます。
この時、空白やコメントは削除されて、いい感じに圧縮されます。
javascript:(() => {
const headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");headings.forEach(a=>{a.style.backgroundColor="#ff0";a.style.color="#000";a.style.padding="10px"});
;})();
ブックマークレットの使用
- ブラウザでお気に入りのページを開きます
- 生成された
dist/bookmarklet.jsの内容をコピーします - ブラウザのブックマークに新しいブックマークを作成し、URL欄で
javascript:に続けてコピーしたコードを貼り付けます - ブックマークレットをクリックして実行します
Google Closure Compilerを使ってコードを圧縮しています
コードを圧縮するために、Google Closure Compilerを使用しています。
Google Closure CompilerはWeb版のClosure Compiler Service UIもあるので、そちらを使えば早いのですが、サービスが終了する予定とのことで、ローカル実行できる環境を作りたかったんです。
ビルドコマンド
ビルドコマンドは、package.jsonにある以下の行です。
"build": "google-closure-compiler --js src/main.js --js_output_file dist/bookmarklet.js && echo \"javascript:(() => {\" | cat - dist/bookmarklet.js > dist/temp && mv dist/temp dist/bookmarklet.js && echo \";})();\" >> dist/bookmarklet.js"
このコマンドは、以下のステップでブックマークレットを生成してます。
1. Google Closure Compilerを使用してコードを圧縮
google-closure-compiler --js src/main.js --js_output_file dist/bookmarklet.js
src/main.jsに記述されたJavaScriptコードを、Google Closure Compilerを使って最適化・圧縮します。
圧縮後のコードはdist/bookmarklet.jsに出力されます。
どれぐらいコードを最適化するかは、コンパイルレベルオプション『--compilation_level』で指定できます。
とりあえずデフォルトにしてます！
- BUNDLE: 複数のファイルを結合するだけで、圧縮や最適化はしない
- WHITESPACE_ONLY: 空白や改行を削除してコードのサイズを小さくしますが、変数や関数名の変更はしない
- SIMPLE: 変数名の短縮や不要なコードの削除などの安全な最適化を行う（デフォルト）
- ADVANCED: 最大限の最適化を行いますが、外部依存関係との連携に注意が必要
2. ブックマークレット形式に変換
echo "javascript:(() => {" | cat - dist/bookmarklet.js > dist/temp && mv dist/temp dist/bookmarklet.js
生成されたdist/bookmarklet.jsに対して、先頭にjavascript:(() => {を追加しています。これにより、ブックマークレットとして動作する自己実行関数形式に変換します。
echoコマンドでjavascript:(() => {を出力し、catコマンドでこれを既存のdist/bookmarklet.jsの内容と結合し、一時ファイル (dist/temp) に保存します。
その後、一時ファイルを元のファイル名にリネームして上書きします。
3. 末尾に関数の閉じ括弧を追加
echo ";})();" >> dist/bookmarklet.js
最後にdist/bookmarklet.jsの末尾に;})();を追加して閉じます。
最終的な結果
最終的に、以下のようにブックマークレットで動作する形式にして出力してます。
javascript:(() => { /* 圧縮されたコード */ })();