Chrome拡張機能の新機能 Side Panel APIについて

https://gdgnagoya.connpass.com/event/283782/
で発表した資料です。

Transcript

1. Google I/O 2023 Chrome拡張機能の新機能！ Side Panel APIについて
2. Google I/O 2023 振り返り • Google Map Immersive view • Google Photo Magic Editor • 次世代言語モデルPaLM2の発表 • Bard 日本語化対応 • Duet AI for Google Workspace, Google Cloud • Pixel新製品の発表 などなど
3. 講演内容: https://io.google/2023/program/ef3f10de-8e4f-43f4-9a04-82d03bbebe06/intl/ja/ この講演内容では、セキュリティについてや Chrome拡張の歴史についても語っているので一度見てみると面白いです。 (というかそちらがメインで話されてます ) Chrome拡張機能の新機能について
4. Side Panel APIというのが使用可能になりました
5. Side Panelとは 2022年3月に有効化された機能 Webブラウザの左右片側に拡張表示されるパネルのこと デフォルトだとリーディングリスト/ブックマーク/google関連サービス などが利用可能 今までは調べ物を ちょっと快適にしてくれる くらいの機能でした。
6. このサイドパネルの表示領域を Chrome拡張で使えるように！
7. Side Panel APIが使えることで何が嬉しくなるか • 情報拡張に役立つ ◦ 例)特定サイト専用の独自ショートカットを作る ◦ 例)簡易的なメモ機能の作成 • マルチタスクの効率化 ◦ 例)ブラウザで調査しながら、サイドパネルで別作業
8. Side Panel APIの機能 • 独自のUIをサイドパネル上に表示する • 特定のWebサイトのみで起動させることも可能 • 今表示しているサイドパネルから別のサイドパネルに切替可 • サイドパネルから全てのChromeAPIにアクセスすることが可能
9. 使い方 同一階層にsidepanel.htmlを追加 manifest.jsonに下記を追加 • permissionsにsidePanelを追加する。 • side_panelのdefault_pathにsidepanel.htmlを追加 あとは普通の拡張機能の作成とそこまで変わらないです。 サンプルを公式が上げてくれているので参考にしてください。 (github/chrome-extensions-samples)
10. { "manifest_version": 3, ~~~~~~~~~ "side_panel": { "default_path": "sidepanel.html" }, "permissions": ["sidePanel"] } manifest.jsonのイメージ
11. サンプル作成 TODOアプリをサイドパネルに表示した例 作り方は普通のTODOアプリを作るのと変わらないです!
12. 最後に開発におすすめの拡張機能を紹介します！ • DeepL翻訳: 英語ドキュメント読むのに必須レベル • Redirect Path: リダイレクトの確認に便利 • GoFullPage: ページ全体のスクショを取るときに便利(開発時に検 証結果のスクショを貼るときなど) • Talend API Tester: curlより直感的. APIの検証などに便利 • Autofill: テスト時の自動入力が楽になります。 などなど
13. みなさんもよいChrome拡張ライフを！