はじめに
こんにちは。ニフティ会員システムグループのたけろいどです。今回は業務改善の一環としてGoogle拡張機能を作ってみました。そのとき躓いたポイントを書いていきます。
背景
みなさんはGoogle拡張機能を作ったことはありますか？ 低コストで行える業務改善の手段の一つとしてGoogle拡張機能はとてもよい選択肢です。私も面倒だなと感じていた作業があったのでGoogle拡張機能をつかって作業の簡略化を図りました。そこで得た知見をみなさんに共有出来たらと思います。
今回はフレームワークにSvelteを使用しています。Svelteについては過去に記事で触れています。そちらをご覧ください。
また、躓きポイントはサービス固有のものではなくGoogle拡張機能やSvelteの全般的なものを紹介するつもりです。誰かの助けになれば幸いです。
躓き
SvelteとCRXJSの相性が悪い
当初CRXJSを使用して開発環境を整えようとしました。CRXJSとはGoogle拡張機能開発時のVite環境でHMRが可能になるなど開発のサポートをしてくれるライブラリです。開発体験があがるためモチベの維持や素早いデプロイなど様々なメリットなどあったのですが、インストール時Svelteと依存関係でコンフリクトが起こりました。 ドキュメントにスタートガイドもなく、Svelteのバージョンを3.49.0からいくつか下げるなど行ったのですがうまくいきませんでした。
時間を無駄に浪費していたため、HMRの導入をあきらめ気合でビルドする方向で舵取りしました。
悔しい躓きの一つです
ClipBoard APIを動かすのは大変
ブラウザ上でコピペを行うには2種類の方法があります。それがClipBoard APIとexecCommandです。execCommandはすでに非推奨となっておりClipBoard APIを使うのが通常です。しかし拡張機能上ではClipBoard APIを動かすことは困難です。Permission関係なのかGoogle拡張機能の対応が遅れているのか、これだという原因は不明です。回避方法はありますがこちらの方法少々コストが高く、スマートな方法ではありませんでした。
今回は個人で使うもの＆他のGoogle拡張機能のコードでもexecCommandが使用されていたため、execCommandで実装しました。
execCommandやClipBoard APIの仕様や使い方はMDNを参考にしました。
コンポーネントの再レンダリングについて
SvelteはRefなどの変数に更新があればコンポーネントを自動的かつ部分的に再レンダリングしてくれます。この際即時に再レンダリングするわけではなく、ほかに更新するものがないか一旦確認してから再レンダリングします。 つまり再レンダリング後の値を参照するにはすこしだけ待たなければいけません。そこで
tick()が役に立ちます。詳細は参考に置いておきます。値が参照できないなどの問題があった場合は
tick()を使うことも検討してみましょう。
まとめ
以上3点の躓きでした。SvelteとGoogle拡張機能の文献や記事はまだ少なく手探りな状態ですが、知的好奇心をくすぐられて楽しかったです。 いくつか妥協はしましたが、無事Google拡張機能も完成し目的も達成できたのでよしとします。
ありがとうございました。
参考
クリップボードとのやりとりtickについて
We are hiring!
ニフティでは、さまざまなプロダクトへ挑戦するエンジニアを絶賛募集中です！ご興味のある方は以下の採用サイトよりお気軽にご連絡ください！ Tech TalkやMeetUpも開催しております！
こちらもお気軽にご応募ください！ この記事は、ニフティグループ Advent Calendar 2022 3日目の記事です。 次回もおたのしみに！
