このページは Cloud Translation API によって翻訳されました。

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

Oliver Dunk

Amy Steam

1 年前の 2022 年 5 月に、Chrome にサイドパネルを追加しました。これは、ユーザーがブラウジング中のコンテンツとともにツールを使用できる新しいコンパニオンサーフェスです。このたび、Chrome 114 以降で、拡張機能のコンテンツをサイドパネルに表示できるようになりました。

選択した単語の定義を表示する辞書拡張機能 — 選択した単語の定義を表示する辞書の拡張機能。chrome-extensions-samples リポジトリのコードをご覧ください。

ユーザーにとって優れ、デベロッパーにとって簡単

すでに多くのデベロッパーが拡張機能にサイドバーのような機能を実装しています。そのため、これをプラットフォームの標準にすることを決定しました。新しいサイドパネル API を使用すると、ユーザーがアクセスしているページとともに開く永続的な UI を提供できるようになりました。拡張機能間の位置とレイアウトが統一されていると、ユーザーにとって便利です。さらに、ホスト権限をリクエストせずに UI を表示できる機能は、ユーザーにとってプライバシーに大きく影響します。さらに、インストール時に拡張機能に表示される警告の数が減るという利点もあります。

サイドパネル API を使用すると、信頼できないページにコンテンツを挿入する際の煩わしさを解消できます。また、さまざまなサイト間での互換性を維持する必要性や、拡張機能によって意図しない中断が発生した際のバグレポートの確認も大幅に減らすことができます。

ウェブ全体のユーザーをサポートする

拡張機能の一部として新しいサイドパネルエクスペリエンスを構築する場合は、ウェブ全体でユーザーがタスクを完了できるようにする方法について、1 つのことを念頭に置く必要があります。以下のような質問を検討してください。

サイドパネルはユーザーにとってどのように役立ちますか？: 単一目的ポリシーはサイドパネルにも適用されます。サイドパネルには、拡張機能の他の部分とユーザーが達成しようとしている内容に直接関連する機能を用意してください。
サイドパネルは関連する場合にのみ表示されますか？: 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 });
  }
});

その他の情報

サイドパネル API のドキュメントを公開しました。今すぐご覧ください。また、chrome-extensions-samples リポジトリにサンプルも追加しました。このサンプルは、API を実際に使用する方法を確認するのに最適です。

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

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

写真撮影: Vardan Papikyan（出典: Unsplash）

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