Table of Contents
はじめに
ブックマークレットは、ブックマークに登録したJavaScriptを、開いているページ上で実行する仕組みです。拡張機能を入れるほどではない作業を自動化するのに向いています。
作り方と、実際にハマったところをまとめました。
デベロッパーツールで要素を探す
まず、操作したい要素をどう指定するかを決めます。Chromeで F12（または Ctrl + Shift + I）を押してデベロッパーツールを開き、Console タブで試すのが早いです。
// IDで探すdocument.querySelectorAll("#id");
// クラスで探すdocument.querySelectorAll(".class");
// タグで探すdocument.querySelectorAll("tag");
// name属性で探すdocument.querySelectorAll('input[name="name"]');
// 任意の属性で探すdocument.querySelectorAll('[data-role="button"]');querySelectorAll() はCSSセレクタをそのまま書けるので、CSSを書ける人なら覚え直すことはほとんどありません。
ブックマークレットにする
Consoleで動くことを確認したら、ブックマークに登録します。
- ブックマークを新規作成する
- 名前は任意
- URLに
javascript:を先頭に付けたコードを貼り付ける
javascript:(function(){ alert(document.title); })();即時実行関数で囲んでおくと、変数がページ側のスクリプトと衝突しません。
落とし穴：コメントアウトで動かなくなる
Consoleでは問題なく動くのに、ブックマークレットにすると次のエラーが出ることがあります。
Uncaught SyntaxError: Unexpected end of input原因は、コードの中に書いた // によるコメントです。
ブックマークレットの実体はURLなので、**登録した時点でコードの改行がすべて無視され、1行になります。**その結果、// 以降にあるコードが最後まですべてコメントとして扱われ、閉じ括弧が消えて構文エラーになります。
// NG: このあとのコードがすべてコメント扱いになるjavascript: (function () { // 処理を実行する alert("hello");})();ブロックコメントを使えば解決します。
// OK: 範囲が閉じているので1行になっても影響しないjavascript: (function () { /* 処理を実行する */ alert("hello");})();おわりに
ブックマークレットは、「Consoleで動いたコードをそのまま貼る」だけに見えて、1行になるという一点だけが違います。動かないときは、まずコメントとセミコロンを疑ってください。
