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

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

Oliver Dunk

Amy Steam

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

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

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

すでに多くのデベロッパーが、拡張機能にサイドバーのような機能を実装しています。プラットフォームを標準にすることに喜びを感じています。新しい Side Panel API では、ユーザーがアクセスしているページの横に表示される永続的な UI を提供できるようになりました。ユーザーは拡張機能間の配置とレイアウトに一貫性を持たせることができます。またホスト権限をリクエストしない UI は、ユーザーのプライバシー保護に大きなメリットをもたらします。インストール時に拡張機能に表示される警告の数を減らすことができます。

Side Panel API を使用すると、コンテンツを Google Workspace に追加する際の問題が解消されます。防ぐことができます。また、互換性を維持するための要件も大幅に削減されます。バグレポートを綿密に調査し、あります。

ウェブ全体でユーザーをサポート

拡張機能の一部として新しいサイドパネルエクスペリエンスを構築する場合は、マインド: ユーザーがウェブでタスクを完了できるよう、どのようにサポートしていますか？では、考慮すべき点:

サイドパネルはユーザーにどのように役立ちますか？: 単一目的ポリシーはサイドパネルにも適用されます。拡張機能の残りの部分やユーザーが実現しようとしていることに直接関係する機能がサイドパネルにあることを確認してください。
サイドパネルは関連する場合にのみ表示されますか？: 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 で優れたユーザー エクスペリエンスを設計