Chrome に追加された Copy link to highlight とは

最近, Chrome に追加された機能で **Copy link to highlight** があります。
これが結構便利でWebページ内の選択箇所へのリンクを作成してくれます。

このリンクの仕様自体はChrome独自でなくW3Cにも[Text Fragments]として書かれてる仕様でChrome 80 以降から利用でき他のブラウザも対応するはずです。
**Copy link to highlight** はこの [Text Fragments] に沿ったリンクをコピーするものになります。

URL Fragments 拡張するもので URL中にある `https://example.com/#id` の `#id` の部分を `#:~:test=smth` とするとページ上の`smth` を表示してくれます。
仕様上では表示をどう表現するかは各ブラウザの実装に委ねていますが、何かしらの方法でページ上で指定した文字列を視覚的にわかる効果で表現されるはずです。

この[Text Fragments]の構文としては以下のように定義されています。

> ```
> #:~:text=[prefix-,]textStart[,textEnd][,-suffix]
>           context  |-------match-----|  context
> ```

スクエアブラケットで囲まれてるところはオプショナルのパラメータで`textStart`のみが必須になります。
`prefix`, `textStart`, `textEnd`, と `suffix` は実際には任意の％エンコーディングされた文字列になります。
`prefix` と `suffix` は、前後の一致を表現できホワイトスペースを許容します。

## 各ブラウザでの確認
もう少し詳しく見ていきます. Chrome(96.0.4664.55), Microsoft Edge(96.0.1054.34) の挙動を元にしたものになります。
Filefox(94.0.2), Safari(15.1)でも確認しましたが未対応の様です。

2021/11/28時点で `https://example.com/` は以下の様に表示されています。

> <h1>Example Domain</h1>
> This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
>
> [More information...](https://www.iana.org/domains/example)


### textStart
[#:~:text=for](https://example.com/#:~:text=for) と指定すると **This domain is for** の **for** がハイライトになります

> <h1>Example Domain</h1>
> This domain is <strong>for</strong> use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

### prefix-,textStart
[#:~:text=asking-,for](https://example.com/#:~:text=asking-,for) と指定すると **asking for** の **for** がハイライトになります

> <h1>Example Domain</h1>
> This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking <strong>for</strong> permission.

### textStart,textEnd
[#:~:text=for,in](https://example.com/#:~:text=for,in) と指定すると **This domain is for use in** の **for use in** がハイライトになります

> <h1>Example Domain</h1>
> This domain is <strong>for use in</strong> illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

### textStart,-suffix
[#:~:text=examples%20in,-examples](https://example.com/#:~:text=examples%20in,-documents) と指定すると **examples in** がハイライトになります

> <h1>Example Domain</h1>
> This domain is for use in illustrative <strong>examples in</strong> documents. You may use this domain in literature without prior coordination or asking for permission.

### textStart,textEnd,-suffix
[#:~:text=examples,in,-literature](https://example.com/#:~:text=examples,in,-literature) と指定すると **examples in documents. You may use this domain in** がハイライトになります

> <h1>Example Domain</h1>
> This domain is for use in illustrative <strong>examples in documents. You may use this domain in</strong> literature without prior coordination or asking for permission.

## 通常のフラグメントとの併用
通常のフラグメントと併用する場合は `#id:~:text=sample` の様に `:~:` の手前に指定できます。

## セキュリティ面の考慮
セキュリティ面からの説明も書かれていてトラッキングできない様に考慮されています。
今までのフラグメント同様、サーバサイドではフラグメントの情報は取得できません。
アクセス分析等の実装では JavaScript で [Location](https://developer.mozilla.org/en-US/docs/Web/API/Location) の`hash` で取得していました。
[Text Fragments]は更に厳しく、JavaScriptでも取得できないようになっています。

| Text Fragment                      | Browser                 | HTTP                 |
| ---------------------------------- | ----------------------- | -------------------- |
| https://example.com/#id:~:text=for | https://example.com/#id | https://example.com/ |

## 参考
- [Text Fragments]
- [URLの `#:~:text=` とは何か？（ Text Fragments ） - Qiita](https://qiita.com/rithmety/items/3f302d5644c17167a967)

[Text Fragments]: https://wicg.github.io/scroll-to-text-fragment/