Zenn
📺

Chrome でサイトの任意のテキストをハイライトしつつ直接該当箇所にジャンプする形で共有する方法

2020/09/30に公開
Chrome
tech

Google Chrome の Text Flagment という機能で、サイトの任意のテキストをハイライトしつつ直接該当箇所にジャンプする形で共有することができます。

シンタックス

:~:text=[prefix-,]textStart[,textEnd][,-suffix]

         context  |-------match-----|  context

利用パターン

textStart を指定

https://github.com/WICG/scroll-to-text-fragment#:~:text=specific

prefix- + textStart を指定

https://github.com/WICG/scroll-to-text-fragment#:~:text=limited-,specific

textStart + -suffix を指定

https://github.com/WICG/scroll-to-text-fragment#:~:text=the,-text

textStart + textEnd を指定

https://github.com/wicg/scroll-to-text-fragment#:~:text=visually,addressable

textStart にURLエンコードした日本語を指定

https://tbpgr.hatenablog.com/entry/2020/09/18/123923#:~:text=コミュニティ仲間
https://tbpgr.hatenablog.com/entry/2020/09/18/123923#:~:text=%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3%E4%BB%B2%E9%96%93

ユースケース

  • 誤字の指摘箇所を直接参照するURL付きで相手に渡す
  • 同僚に求められた情報をWebページで渡す場合に、読んでもらいたい箇所の最初と最後を textStart + textEnd を指定して渡す
  • ブログで引用箇所を直接URL指定する

関連資料

Discussion