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

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

Oliver Dunk

Amy Steam

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

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

ユーザーにとってより便利で、デベロッパーの作業が容易

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

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