【Javascript】Markdown形式のウェブページのリンクを、ブックマークレットで取得する

はじめに

記事を書く際、参考 URL をいちいちコピー・整形するのが面倒だったので、ブックマークレットで対応した。

ブックマークレットをクリックするだけで、ウェブページのリンクが Clipboard に書き込まれる。

結論

ブックマークレットに以下の URL を登録するだけ。

javascript: navigator.clipboard.writeText(
  `[${document.title}](${location.href})`
);

例えば Qiita 上で上記のブックマークレットをクリックすると、[eyuta - Qiita](https://qiita.com/eyuta)のような文字列が Clipboard に書き込まれる。

後はこれを任意の場所に貼り付けるだけで良い。楽！

詳細

クリップボードへの格納には、Clipboard.writeText() - Web APIs | MDN を使用している。

注意点としては、Web ページのDocumentにフォーカスが当たっていないと、以下のエラーが出力される点。
(アドレスバーやデベロッパーツールにフォーカスしている状態でこの処理を実行するとこのエラーが出力されるので、Documentにフォーカスした状態で実行するようにする)

• Uncaught (in promise) DOMException: Document is not focused.

また、当該メソッドは非同期メソッドなので、後続処理を書く場合はthenで繋ぐ必要がある。

navigator.clipboard.writeText("<empty clipboard>").then(function() {
  /* clipboard successfully set */
}, function() {
  /* clipboard write failed */
});

参考:

• Clipboard.writeText() - Web APIs | MDN
• javascript - DOMException on calling navigator.clipboard.readText() - Stack Overflow

(上のブックマークレットでリンクを取得した)