8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

はじめに

記事を書く際、参考 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 */
});

参考:

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

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?