新しい Side Panel API で優れたユーザー エクスペリエンスを設計

Oliver Dunk
Amy Steam

1 年前の 2022 年 5 月に、Chrome にサイドパネルを追加しました。これは、ユーザーが閲覧しているコンテンツと並行してツールを使用できる新しいコンパニオン サーフェスです。本日、Chrome 114 以降で、拡張機能がサイドパネルにコンテンツを表示できるようになることをお知らせいたします。

選択した単語の定義を表示する辞書拡張機能
選択した単語の定義を表示する辞書拡張機能。コードは chrome-extensions-samples リポジトリにあります。

ユーザーにとってより使いやすく、デベロッパーにとってより簡単に

多くのデベロッパーがすでに拡張機能にサイドバーのようなエクスペリエンスを実装しているため、これをプラットフォームの標準にすることにしました。新しい 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 の実際の使用方法を確認できます。

前述のとおり、ポリシーページとベスト プラクティスも改訂され、ユーザーに最適なエクスペリエンスを提供するサイドパネルの構築方法について詳しく説明しています。

Chrome 拡張機能の最新情報については、新機能ページをご覧ください。Side Panel API についてご不明な点やサポートが必要な場合は、Chromium extensions Google グループをご覧ください。