namaraii.com

⌨️ 久しぶりにChrome拡張を書いた

ずいぶん久しぶりにChrome拡張を書いた。

icon このサイトもそうだが、自分が管理している静的サイトのほとんどはHugoで作っている。

Hugoが公式で提供しているショートコードでTweetを引用する場合、

  1. Tweetをブラウザで表示する
  2. URLを参照しユーザIDとTweet ID?を調べる。URLがhttps://twitter.com/SanDiegoZoo/status/1453110110599868418だとすると
  3. {{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}の形式でショートコードを書く

という手順となり、かなり面倒だ。作成したChrome拡張はこれを支援するもの。

上の例で言えば1でTweetを表示した状態で機能拡張を起動すれば、3のショートコードがクリップボードへコピーされる。

私が運用している横浜FC関連のサイトではTweetの引用を多用するため、この動作を行うブックマークレットを作成して使用していた。

しかし、最近常用しているArcブラウザではブックマークレットを使えないため、Chrome拡張へ変換してくれるサービスを使ってChrome拡張に変換した。

その流れで、どうせならHugoが公式で用意している他サービス向けのショートコードにも対応しようと書いたのが、このChrome拡張だ。対応しているサービスは以下の通り。

  • gist
  • Instagram
  • X (Twitter)
  • Vimeo
  • YouTube

新しく開発するChrome拡張はManifest V3を前提にすることになっていて、いろいろできないことが増えており困惑した。なかでもクリップボード周りでかなりハマってしまい、以下のページはとても参考になった。

Chrome の拡張機能を Manifest V3 に対応する | バグ取りの日々

ServiceWorkerからクリップボードへのアクセスは、

  • document.execCommand(“copy”)は使用できない（非推奨なのはおいといて、そもそもdocumentへアクセスできない）
  • navigator.clipboard.writeText()も使えない

となかなか厳しい状況にあるのだが、このページではアクティブタブにnavigator.clipboard.writeText()するスクリプトを挿入し、chrome.scripting.executeScriptすることで問題を回避していた。

絶対に自分では思いつかなかったと思う。感謝