ブラウザのタイトルや URL をコピーするブックマークレット【スマホ&阿部寛対応】

Pocket

ブラウザで表示しているページのタイトルと URL を一括でコピーしたり、 markdown などのマークアップ言語でフォーマットされたものを、クリップボードにコピーしたくなることは無いだろうか?

意外にも、主要なブラウザには表示ページのタイトル名すら簡単にコピーする方法がない。

いくつかのブラウザ拡張機能(アドオン)には、上述の機能を提供しているものがいくつもある。
しかし、これだけのために拡張機能を入れるのもなんだかなと。
場合によっては、ポリシー等様々な理由で拡張機能を入れることを制限されている場合もあるだろうし。

そこで、表示中ページのタイトルと URL を任意の種類にフォーマットしてクリップボードへコピーしてくれるブックマークレットを作ってみた。

ブックマークレットとした事により、拡張機能の使えないスマートフォンの Chrome や Safari といった、とても不便なブラウザでも利用できる。

使い方

ブラウザのタイトルや URL をコピーするブックマークレット

上記のリンクを(Firefox なら右クリックから直接、 Edge や Chrome なら ブックマークバーに D&D する等の方法で)ブックマークとして保存し、任意のページで呼び出すと、下記のようなダイアログが表示される。
お好きなボタンをクリックすれば、クリップボードにフォーマット済みのリンクが格納されるという算段だ。

暗転したところをクリックすれば、ダイアログはクローズされる。

最低限のコードにするため、 CSS は表示中のページのものを使っており、開いたページによってダイアログのデザインが変わるのは仕様となっている。

Firefox, Chrome, Edge いずれでも動作することは確認している。
Edge の場合ツールバーの「お気に入り☆」ボタンからではブックマークレットが動かないようなので、ブックマークバーから実行する必要があるようだ。(v121 現在)

もちろん、「阿部 寛のホームページ」にも対応している。
このようにフレームセットを使っている場合は、最初のフレームにダイアログを表示させる形で、対応している。

カスタマイズ方法

既定で markdown, textile, LaTeX などいくつかのテンプレートを用意している。

もし追加したいものがあれば、後述のソースコードの Object.entries({の後ろに、 JSON キーにボタンのタイトルを、 JSON 値に変換のテンプレートを指定したものを追加し、 各自 minify して使ってもらえれば OK だ。(ライセンスは CC-0)

ソースコード中に %5B, %5D などといった URL エンコードと解釈できてしまう部分があるため、ブックマークの編集画面の URL に直接貼り付ける場合は、 %255B, %255D などとエスケープしておこう。

なお、テンプレートの定義方法だが、 {{}} で括った部分に title (ページタイトル) もしくは url と、 0~8 の偶数個の / を記述し、置換対象を表す正規表現と、置換後の文字列を交互に記述する。

例えば、

String.raw`{{url/\[/%5B/\]/%5D/\|/%7C}}`

なら、以下と等価となる。

url.replace(RegExp(String.raw`\[`, "g"), "%5B")
  .replace(RegExp(String.raw`\]`, "g"), "%5D")
  .replace(RegExp(String.raw`\|`, "g"), "%7C");

雑な説明だがわかって。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください