🔖

Webページのハイパーリンク付きタイトルを取得するブックマークレット

2026/01/26に公開

Bookmarklet

tech

はじめに

Microsoft Edge のアドレスバーから URL をコピーし、Notion などのアプリケーションに貼り付けると「ハイパーリンク付きタイトル」として展開されます。

この仕組みが便利でしばらく Edge を使っていたのですが、URL コピーのためだけにブラウザが固定化されるのは不便だなと思い、 Edge と同様にハイパーリンク付きタイトルを取得できるブックマークレットを作成しました。

本ブックマークレットを実行するとクリップボードに情報が書き込まれ、下記のように動作します。

メモ帳やブラウザアドレスバーなどのプレーンテキスト環境:
- そのまま URL として貼り付けられる
Notion や Teams などのリッチテキスト対応アプリ:
- 「ハイパーリンク付きタイトル」として貼り付けられる
- ※ Ctrl + Shift + V すれば URL だけ貼り付けられる

ブックマークレットの完成形

javascript:(async()=>{const t=document.title||location.href,u=location.href,h=`<a href="${u}">${t}</a>`;await navigator.clipboard.write([new ClipboardItem({"text/plain":new Blob([u],{type:"text/plain"}),"text/html":new Blob([h],{type:"text/html"})})]);})();

以下は処理部分を読みやすくフォーマットしたコードです。

(async () => {
  const pageTitle = document.title;
  const pageUrl = location.href;

  const htmlLink = `<a href="${pageUrl}">${pageTitle}</a>`;

  const clipboardItem = new ClipboardItem({
    "text/html": new Blob([htmlLink], { type: "text/html" }),
    "text/plain": new Blob([pageUrl], { type: "text/plain" })
  });

  await navigator.clipboard.write([clipboardItem]);
})();

ブックマークレットを作るまでの経緯

本ブックマークレットを作るにあたり、まずは「Edge での URL コピー時に何がコピーされているのか」を知る必要がありました。

そこで PowerShell を使って、Edge で URL コピーした直後のクリップボードの内容を確認しました。

# Edge で適当なページの URL をコピーした後、下記のコマンドを実行
Add-Type -AssemblyName System.Windows.Forms
$clipboard = [System.Windows.Forms.Clipboard]::GetDataObject()
$clipboard.GetFormats()

その結果、クリップボードには 複数のデータ形式が同時に格納されている ことが分かりました。

（参考: コピペってなんだろう？Clipboard編）

実際に先程のコマンドを実行した結果が以下です。

System.String
UnicodeText
Text
Locale
OEMText
HTML Format
Link Preview Format
Titled Hyperlink Format

ポイントは UnicodeText と HTML Format です。

実際に中身を見てみます。

$clipboard.GetData("UnicodeText")

# 以下は出力
https://toragramming.com/

$clipboard.GetData("HTML Format")

# 以下は出力
Version:0.9
StartHTML:0000000105
EndHTML:0000000229
StartFragment:0000000141
EndFragment:0000000193
<html>
<body>
<!--StartFragment--><a href="https://toragramming.com/">Toragramming</a><!--EndFragment-->
</body>
</html>

UnicodeText にはただの URL が、 HTML Format にはハイパーリンクが保持されていることがわかります。

これらの形式は貼り付け先のアプリケーションによって適宜選択されるようで、例えばブラウザのアドレスバーに貼り付けた場合は UnicodeText が、 Notion に貼り付けた場合は HTML Format が使用されるようです。

以上を踏まえ、クリップボードに UnicodeText と HTML Format の両形式で情報を書き込むコードを作ることで、 Edge の URL コピーと同じ挙動を再現することが出来ました。

(async () => {
  // HTML Format 用にリンクを作る
  const pageTitle = document.title;
  const pageUrl = location.href;
  const htmlLink = `<a href="${pageUrl}">${pageTitle}</a>`;

  // new ClipboardItem で、形式ごとに値を設定できる
  const clipboardItem = new ClipboardItem({
    // HTML Format
    "text/html": new Blob([htmlLink], { type: "text/html" }),
    // UnicodeText
    "text/plain": new Blob([pageUrl], { type: "text/plain" })
  });

  // クリップボードに書き込み
  await navigator.clipboard.write([clipboardItem]);
})();

はじめに

ブックマークレットの完成形

ブックマークレットを作るまでの経緯

Discussion