1 年前、2022 年 5 月に Chrome にサイドパネルが追加されました。これは、ブラウジング中のコンテンツとともにツールを使用できる、新しいコンパニオン サーフェスです。このたび、Chrome 114 以降、ご利用の拡張機能でサイドパネルにコンテンツを表示できるようになったことをお知らせいたします。
ユーザーにとってはメリットがあり、デベロッパーにとっても使いやすい
すでに多くのデベロッパーが、サイドバーのようなエクスペリエンスを拡張機能に実装しています。そのため、このサイドバーを標準プラットフォームにできることを嬉しく思います。新しい Side Panel API では、ユーザーがアクセスしているページの横に表示される永続的な UI を提供できるようになりました。拡張機能間で配置とレイアウトを統一することは効果的です。さらに、ホストの権限をリクエストせずに UI を表示できる機能は、ユーザーのプライバシーに大きく影響します。また、インストール時に拡張機能に表示される警告の数も減るメリットもあります。
Side Panel API を使用すると、信頼できないページにコンテンツを注入する際の問題を解消できます。また、異なるサイト間での互換性の維持や、拡張機能に起因する偶発的な中断に関するバグレポートを精査する要件が大幅に削減されます。
ウェブ上のユーザーに役立つコンパニオン
拡張機能の一部として新しいサイドパネル エクスペリエンスを構築する際は、ウェブ全体でタスクを完了するためにユーザーをどのようにサポートするかを念頭に置いてください。次の点を考慮してください。
- サイドパネルにはどのようなメリットがありますか？
- 単一目的に関するポリシーは、サイドパネルにも適用されます。サイドパネルには、拡張機能の他の部分とユーザーが実現しようとしていることに直接関連する機能を含めてください。
- サイドパネルは関連する場合のみ表示されますか？
- Side Panel API を使用すると、サイドパネルをユーザーに表示するサイトを選択できます。これにより、ユーザーとの関連性が低い場合や、ユーザーが閲覧しているコンテンツとの関連性が低い場合に、広告が表示されないようにできます。
- 拡張機能の他の部分とデザインに一貫性はありますか？
- サイドパネルは、拡張機能やストアの掲載情報のロゴ、色、アイコン、フォントに合った、視覚的に魅力のあるデザインにする必要があります。これにより、ユーザーはどこで拡張機能を使用していても、一貫した認識可能なエクスペリエンスを提供できます。
- ユーザーがサイドパネルを見つける方法
- 拡張機能内で十分なドキュメントやトレーニングを提供して、新規ユーザーにサイドパネルの使い方を伝えます。これにより、ユーザーを維持し、ストアの掲載情報で否定的なレビューが表示されるのを防ぐことができます。ユーザーが拡張機能をインストールする前に、その仕組みをストアの掲載情報で紹介する YouTube 動画を動画に含めて、ユーザーに説明を始めることができます。
また、プログラム ポリシーも更新され、こうした考慮事項を反映させるため、ベスト プラクティスと品質に関するガイドラインのセクションも更新されました。今回の変更は、サイドパネルを補完する機能を提供することで、ユーザーのブラウジング エクスペリエンスに寄与する便利なツールとなるよう強化することを目的としています。また、サイドパネルに不要な情報が表示されないようにすることも明確です。
API の概要
サイドパネルに拡張機能を表示するには、マニフェストで "sidePanel" 権限をリクエストし、拡張機能内のページを指す "default_path" を持つ "side_panel" キーを追加します。
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
サイドパネル ページでは、他の広告表示オプション ページと同じように、スクリプトや電話番号表示オプションの API を読み込むことができます。サイドパネルのアイコンは拡張機能のアイコンから取得されます。これを設定すれば、さらに洗練させることができます。
その他の機能
サイドパネルをアクション アイコンにリンクして、いつでも簡単に開くことができます。
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
サイドパネルを特定のページのみに表示する場合は、サイドパネルを制御して、ユーザーに関係のないページ以外の場所には表示されないようにします。
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
詳細
Side Panel API ドキュメントを公開しましたので、今すぐお読みいただけます。また、chrome-extensions-samples リポジトリにサンプルを追加しました。ここでは、API の実際の使い方を確認できます。
上述したとおり、Google のポリシーページとベスト プラクティスも改訂され、ユーザーに優れたエクスペリエンスを提供するサイドパネルの作成方法について詳しくお知らせしています。
Chrome 拡張機能の最新情報については、新機能のページをご覧ください。また、Side Panel API についてご不明な点やサポートのご要望がございましたら、Chromium 拡張機能の Google グループにアクセスしてください。
写真撮影: Vardan Papikyan（出典: Unsplash）