ブックマークレット作成ツール：JavaScriptをブックマークレットに変換

このブックマークレット作成ツールの使い方

1. ブックマークに名前を付けて、JavaScriptをコード欄に貼り付けます。完成した例を見たいときはページタイトルのサンプルを読み込むを押してください。先頭のjavascript:は付けても付けなくても構いません。ジェネレーターが取り除き、あらためて自分で付けます。
2. ブックマークレットを作成を押します。下に生成されたURLが、文字数とともに表示されます。
3. 黒いボタンをブックマークバーにドラッグします。バーが表示されていないときは、先にブラウザのメニューか設定で表示をオンにしてください。
4. 好きなページを開いて、そのブックマークをクリックします。スクリプトが、そのページに対して1回実行されます。

このページでボタンをクリックしても何も起こらないのは、仕様です。ブックマークレットは、今読んでいるページで動かすためのもので、ジェネレーターの画面上で動かすものではありません。

ブックマークレットとは

ブックマークレットは、アドレスがhttps:ではなくjavascript:で始まる、ふつうのブラウザのブックマークです。ページを開いてブックマークをクリックすると、ブラウザは別のページに移動する代わりに、そのページに対してスクリプトを実行します。引用の形式を整えてコピーする、読みやすい表示に切り替える、選択した文字列を取り出す、いま見ているURLを別のサービスで開くといった、ページごとの操作に便利です。拡張機能のインストールは不要で、許可を求められることもなく、ほかのリンクと同じようにブックマークバーに置いておけます。

JavaScriptをブックマークレットに変換する方法

手作業での変換は3つの手順で、ジェネレーターがそのすべてを代わりに行います。2行のスクリプトと、それが変換されたブックマークレットは次のとおりです。

const n = document.links.length;
alert(n + ' links on this page');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20links%20on%20this%20page')%3B%0A%7D)()

1. コードを関数で包む

このツールは、コードを即時実行のアロー関数(() => { … })()の中に入れます。これにより、変数がページがすでに定義しているものとぶつからなくなります。もう1つ理由があります。javascript:のURLのコードが文字列の値で終わると、ブラウザは、その文字列を表示する新しい文書にページを置き換えてしまいます。ブロック本体の関数は何も返さないので、ページはそのまま残ります。手作業で書く場合の古典的な代替手段は、コードの先頭にvoidを付けることです。

2. パーセントエンコードする

ブラウザは、URLを使う前に、タブと改行の文字をすべて取り除きます。そのため、複数行のスクリプトをそのままブックマークに貼り付けると、1行につぶされてしまいます。すると、1つの//コメントがその後ろのコードをすべて飲み込み、改行に頼っていた文はくっついて実行されます。エンコードすると、改行は%0Aに変わって残ります。ブラウザは、実行する直前にコードをパーセントデコードして元に戻します。エンコードは、スペース、二重引用符、%、#も守ります。

3. javascript:を先頭に付ける

javascript:というスキームが、アドレスの残りをスクリプトとして実行するようブラウザに伝えます。できあがった文字列が、バーにドラッグしたり、ブックマークに貼り付けたりするものです。

ブックマークレットの登録方法

パソコンの場合

Chrome、Edge、Firefox、Safariなど、パソコンのどのブラウザでも、黒いボタンをブックマークバーにドラッグします。ドラッグしにくいときは、ブックマークのURLをコピーを押し、新しいブックマークを作って、そのアドレス欄にURLを貼り付けてください。

iPhone、iPad、Androidの場合

スマホのブラウザにはドラッグ先のブックマークバーがないので、編集する方法を使います。

1. ブックマークのURLをコピーを押します。
2. 好きなページをブックマークします。このページでも構いません。
3. ブックマークを開き、いま作ったブックマークを編集して、アドレスをコピーしたjavascript:のURLに置き換えます。ついでに名前も付け替えておきましょう。
4. 実行したいページを開きます。iPhoneやiPadのSafariでは、ブックマークから開きます。AndroidのChromeでは、アドレスバーにブックマークレットの名前を入力し、候補に出たブックマークをタップします。ブックマーク画面から開くとページから離れてしまい、実行する対象がなくなるためです。

アドレスバーには貼り付けない

近道のように見えますが、Chromeは、アドレスバーに貼り付けたテキストの先頭のjavascript:を、意図的に取り除きます。悪意のあるコードを貼り付けさせる詐欺への対策です。残りの部分は検索語として扱われます。コードをブックマークとして保存するのが確実な方法です。

そのまま貼り付けて使えるブックマークレットの例

どれも標準のブラウザAPIだけを使っています。1つをコピーして上のコード欄に貼り付け、ブックマークレットを作成を押して、登録してください。

ページをMarkdownリンクとしてコピーする

リンクが選択された状態のダイアログが開くので、そのままコピーできます。

prompt('Markdownリンク：', '[' + document.title + '](' + location.href + ')');

選択した文字数を数える

先に文字列を選択してから、ブックマークレットをクリックします。

const chars = String(getSelection()).replace(/\s/g, '').length;
alert('選択中：' + chars + '文字（空白を除く）');

ページを編集できる状態にする

もう一度クリックすると編集をオフにできます。再読み込みすると元に戻ります。

document.designMode = document.designMode === 'on' ? 'off' : 'on';

ページをWayback Machineで開く

表示中のページの保存済みコピーを一覧で表示します。

location.href = 'https://web.archive.org/web/*/' + location.href;

ブックマークレットのよくある使い道

ブックマークレットが動かない理由

サイトのセキュリティポリシーにブロックされている

ブックマークレットが大半のサイトで動くのに、特定のサイトだけ何も起こらないときは、そのサイトのContent-Security-Policyを確認してください。CSPの仕様では、ページのポリシーがブックマークレットを妨げるべきではないとされていますが、script-srcの規則が厳しいページでは、ブラウザがjavascript:のURLをブロックすることがあります。別のドメインからスクリプトを読み込むブックマークレットは、二重に影響を受けます。実行できたとしても、その外部スクリプトを読み込んでよいかどうかは、ページのポリシーが決めるからです。ブックマークレットの側で、これを回避する方法はありません。そのようなサイトでスクリプトを動かしたいときは、ブラウザ拡張機能かユーザースクリプトが回避策になります。

ページが文字だけの白紙になった

コードが文字列の値で終わっていたため、ブラウザがそれを新しいページとして表示しました。文字列を返すreturnがあれば取り除いてください。手作業で書いたブックマークレットは、ここで作り直せば関数で包まれるので、末尾の文字列の式がページを置き換えることはなくなります。

何も起こらず、エラーも出ない

ブラウザの開発者コンソールを開いてから、もう一度ブックマークレットをクリックしてください。構文エラー、見つからない要素、ブロックされたスクリプトは、そこに報告されます。手作りのブックマークレットでよくある原因は、//コメントがほかのコードと同じ行に入ってしまうことです。元のソースから作り直せば直ります。

既存のブックマークレットを編集する方法

ブックマークのアドレスをコピーし、先頭のjavascript:を取り除いて、残りをURLエンコード・デコードツール（英語版）でデコードすると、読めるコードに戻せます。変更を加えたら、そのコードをこのブックマークレット作成ツールに貼り付け、古いブックマークのアドレスを新しいURLに置き換えてください。元のソースをテキストファイルに残しておけば、この手間は省けます。

セキュリティについて

ブックマークレットは、ページ自身のスクリプトと同じ権限で動作し、ページが公開しているものはすべて読み取り、変更できます。インストールする前にコードを確認し、リモートのスクリプトを読み込むスニペットは避けてください。他人が管理するURLの内容は、あなたが登録したあとで変わる可能性があります。機密情報が表示されているページでは、出どころのわからないブックマークレットを実行してはいけません。Webサイト、メッセージ、動画から、コードをブックマークやアドレスバーに貼り付けるよう求められたら、詐欺だと考えてください。

ブックマークレット、ユーザースクリプト、拡張機能の違い

3つは似ていますが、応える用途が違います。ブックマークレットは、クリックしたときに1つのページで1回だけ動く1本のスクリプトです。インストールは不要で、ブックマークといっしょに持ち運べます。ユーザースクリプト（ユーザースクリプトマネージャーで管理します）は、条件に合うサイトに紐づいて、訪れるたびに自動で動き、ページをまたいで独自の設定を保てます。ブラウザ拡張機能は、その両方に加えて、バックグラウンド処理、通信の仲介、ツールバーのアイコンなども扱えます。その代わり、インストールの手順と、ブラウザが事前に表示する広い権限が必要です。拡張機能は、ページのセキュリティポリシーからの扱いも異なります。CSPの仕様には、Chromeが、ページのポリシーにかかわらず、拡張機能によるコードの挿入が動くようにしている、という記載があります。まずはブックマークレットから始め、限界に突き当たったときに乗り換えるのがおすすめです。

限界：ブックマークレットを使わないほうがよい場合

ブックマークレットは、クリックしたときに、1度に1つのページでしか動きません。訪問をまたいで状態を保つことも、バックグラウンドで動くことも、すべてのページを自動で書き換えることもできません。長さが問題になることはほとんどありません。Chromeでは、URLの最大長は2 MBと公開されています。ただ、スクリプトが長くなるとブックマークのURLが読めなくなり、その規模ではユーザースクリプトマネージャーや拡張機能のほうが管理しやすくなります。ブックマークレットによる変更は、再読み込みで消えます。次に開いたときも残るハイライトが欲しいなら、あらゆるWebサイトでテキストをハイライトして残す方法をご覧ください。また、目的が「スニペットを動かす」ことではなく「ワンクリックでページを保存する」ことなら、専用のブラウザ拡張機能（英語版）を使えば、コードを管理する必要はありません。

プライバシー：コードの行き先

どこにも送られません。名前、スニペット、生成されたURLは、ページの外に出ません。ブックマークレットを作る過程で、通信は発生しません。1つだけ正直にお伝えしておくと、完成したブックマークレットは、ふつうのブックマークとして保存されます。ブックマークを複数の端末で同期している場合、スクリプトはほかのブックマークといっしょに移動し、同期されたプロファイルを読み取れるものからは見えます。

関連するツールとガイド

上のMarkdownリンクのブックマークレットは、リンクを1つずつコピーします。ページのHTML全体をMarkdownに変換したいときは、HTMLからMarkdownへの変換ツール（英語版）をお使いください。コピーするリンクにトラッキングパラメータがたくさん付いているなら、URLクリーナーで取り除けます。スクリプトを書かずにページを保存して活用する方法は、MarqlyのWebハイライター、Chrome向けブックマーク管理、セカンドブレインのワークフローをご覧ください。ブックマークの整理方法のガイドもおすすめです。