Microsoft Edge サイドバーの拡張機能を開発する

[アーティクル]
10/10/2023

Microsoft Edge 拡張機能の開発者は、新規または既存の Microsoft Edge 拡張機能をサイドバーに表示できます。任意の拡張機能では、その他の UI に加えてサイドバーを使用できます。

Microsoft Edge 拡張機能のサイドバー

注: サイドバー拡張機能機能は、Microsoft Edge のすべてのチャネルの拡大するユーザーベースにロールアウトされています。

拡張機能用のサイドバー API を使用すると、ユーザーが Web ページのメインコンテンツと共に追加情報を表示できるようにすることで、閲覧エクスペリエンスを強化できます。

サイドバーは、ブラウザーの側面にある永続的なウィンドウであり、ブラウザーのプライマリコンテンツと共存します。サイドバーを使用すると、タブを常に切り替える必要が減り、閲覧エクスペリエンスの生産性が向上します。

拡張機能では、必要に応じてサイドバー API を使用して、Microsoft Edge サイドバーにカスタム UI を表示できます。拡張機能は、ポップアップなどの UI と共に Microsoft Edge ツールバーに引き続き表示され、スクリプトを挿入できます。

用語

用語	定義
サイドバー API	Microsoft Edge 拡張機能で使用できる機能の名前。 Chrome ドキュメントでは、用語のサイドパネルが使用されます。
`sidePanel` または `side_panel`	API の名前と、サイドバー拡張機能として拡張機能を有効にするアクセス許可。
サイドバー拡張機能	サイドバーに UI を含む Microsoft Edge 拡張機能。

サイドバー API の機能は次のとおりです。

サイドバーは、タブ間を移動しながら開いたままです。
サイドバーの拡張機能は、特定の Web サイトで使用できます。
サイドバーの拡張機能は、 Microsoft Edge 拡張機能でサポートされているすべての API にアクセスできます。

始点

他の拡張機能リソースと同様に、サイドバーページは、その配信元 (extension://<id>) で信頼された拡張コンテキストにコミットします。サイドバーには、他の信頼された拡張コンテキストと同じ API アクセス権があります。

既存のすべての拡張機能 API はサイドバー拡張機能に使用できるため、サイドバー対応拡張機能で機能拡張フレームワークのすべての現在の機能を利用できます。

拡張機能のマニフェストファイルに sidePanel アクセス許可を追加する

サイドバー API を使用するには、ファイルにアクセス許可を追加します manifest.json 。拡張機能manifest.jsonのsidePanelファイルにアクセス許可を含めます。

{
  ...
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidebar.html"
  },
  "permissions": [
    "sidePanel"
  ]
   ...
}

Microsoft Edge のすべての拡張機能には、という名前 manifest.jsonの JSON 形式のマニフェストファイルがあります。マニフェストファイルは、拡張機能のブループリントです。

関連項目:

拡張機能のマニフェストファイル形式

次のセクションでは、サイドバー API の一般的なユースケースについて説明します。

サイドバーを既定として設定すると、開いているすべてのブラウザータブ全体で同じ拡張機能を表示できます。既定値は、ブラウザーセッション間で保持されます。

でmanifest.json、などの"sidebar.html"キーを"default_path"定義します。

{
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidebar.html"
  }
  ...
}

既定として指定したファイル (など sidebar.html) は、開いているすべてのブラウザータブに表示されます。

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidebar</title>
  </head>
  <body>
    <h1>Sidebar extension for all sites</h1>
    <p>This sidebar is enabled on all sites</p>
  </body>
</html>

拡張機能では、sidepanel.setOptions() を使用して、特定のタブでサイドバーを有効にすることができます。これは特定の Web サイトである可能性があるため、ユーザーがこの Web サイトにアクセスするとサイドバーで拡張機能が開きます。

この例では、chrome.tabs.onUpdated() を使用して、タブに対する更新をリッスンします。URL があるかどうかがチェックされ、その場合は www.bing.com サイドバーが有効になります。それ以外の場合は、サイドバーが無効になります。

のでservice-worker.jsaddListener()、目的のタブかどうかをテストurl.originし、で sidePanel.setOptions()またはにfalsetrue設定enabledします。

const BING_ORIGIN = 'https://www.bing.com';

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the sidebar when at bing.com
  if (url.origin === BING_ORIGIN) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the sidebar when at other sites
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

ユーザーがサイドバーが有効になっていないタブまたはサイトに切り替えると、サイドバーは非表示になります。

完全な例については、「サイト固有のサイドパネルの例」を参照してください。

ユーザーがアクションツールバーアイコンをクリックしてサイドバーを開くことを許可するには、 sidePanel.setPanelBehavior()を使用します。まず、でmanifest.jsonキーを宣言します"action"。

{
  "name": "My sidebar extension",
  ...
   "action": {
    "default_title": "Click to open sidebar"
  },
  ...
}

次に、上記の「特定のservice-worker.jsサイトのサイドバーのみを有効にする」にあるコード一覧に次のコードを追加します。

// Allow users to open the sidebar by clicking the action toolbar icon
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

拡張機能では、sidepanel.getOptions() を使用して現在のサイドバーを取得し、特定のタブに対して別のサイドバーを有効にすることができます。

次の使用例は、 runtime.onInstalled()のウェルカムメッセージを含むサイドバーを設定します。ユーザーが別のタブに移動すると、サイドバーはブラウザーレベルのサイドバーに置き換えられます。

// service-worker.js:
const welcomePage = 'sidebar/welcome-sb.html';
const mainPage = 'sidebar/main-sb.html';

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setOptions({ path: welcomePage });
});

chrome.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await chrome.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    chrome.sidePanel.setOptions({ path: mainPage });
  }
});

sidePanel.open() を使用すると、拡張機能は、アクションアイコンのクリックなどのユーザージェスチャを使用するか、拡張機能ページまたはコンテンツスクリプトでボタンをクリックするなど、ユーザー操作を介してサイドバーを開きます。

次のコードは、ユーザーがコンテキストメニューをクリックしたときに、現在のウィンドウでグローバルサイドバーを開く方法を示しています。を使用 sidePanel.open()する場合は、サイドバーを開くコンテキストを選択します。

を使用して windowId 、次の例に示すようにグローバルサイドバーを開きます。
または、を tabId 設定して、特定のタブでのみサイドバーを開きます。

// service-worker.js:
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'openSidePanel',
    title: 'Open sidebar',
    contexts: ['all']
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // Open the sidebar in all the tabs of the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

Microsoft Edge サイドバーの拡張機能を開発するには、これらのユーザーエクスペリエンス (UX) 機能を使用します。

ユーザーがサイドバーで拡張機能を開くには、いくつかの方法があります。

アイコンをクリックすると、

ユーザーは、 拡張機能ハブの 拡張機能の名前の横に表示される ) をクリックできます。

サイドバーダイアログ

または、有効になっている場合は、ツールバーで拡張機能のカスタムアイコンをクリックできます。このユーザーエクスペリエンスでは、上記の「拡張機能のショートカットアイコンを有効にしてサイドバーを開く」の説明に従って、拡張機能でショートカットアイコンを有効にしてサイドバーを開く必要があります。この例では、拡張機能のカスタムアイコンは円 (。

拡張機能のアイコンを右クリックする

ユーザーは、ツールバーで拡張機能のアイコンを右クリックし、[ サイドバーで開く ] または [ サイドバーを閉じる] を選択できます。

ツールバーのショートカットを右クリックして拡張機能を開く

拡張機能のアイコンは、ユーザーが拡張機能ハブの拡張機能の名前の横にある [ツールバーに表示 ] () アイコンをクリックした場合に、ツールバーに表示されます。

キーボードショートカットを押す

アクションコマンドが有効で、アクションアイコンが有効になっている場合、ユーザーはキーボードショートカットを押してサイドバーを開くことができます。

アクションコマンドを有効にするには、「API リファレンスの chrome.commands のアクションコマンド」を参照してください。
アクションアイコンを有効にするには、「API リファレンスで chrome.sidePanel のツールバーアイコンをクリックしてサイドパネルを開く」を参照してください。

openPanelOnActionClick() PanelBehavior 型のプロパティがにtrue設定されている場合、ユーザーはキーボードショートカットを使用してサイドバーを開くことができます。これを有効にするには、マニフェストでアクションコマンドを指定します。

ジェスチャを使用して開く

サイドバーは、次の操作を使用して開くこともできます。

アクションアイコンをクリックするなど、拡張機能のユーザージェスチャでサイドバーを開きます。この方法では、sidePanel.open()を使用します。上記の「ユーザー操作時にサイドバーを開く」を参照してください。
ツールバーアイコンをクリックしてサイドバーを開きます。この方法では、sidePanel.setPanelBehavior()を使用します。上記の「サイドバーで拡張機能を開く」セクションのアイコンをクリックして参照してください。

拡張機能のサンプル

その他のサイドバー API 拡張機能のデモについては、次のいずれかの拡張機能を調べてみます。

型とメソッド

の chrome.sidePanel API リファレンスページdeveloper.chrome.comの「型とメソッド」を参照してください。

次の方法で共有

用語

サイドバー API の機能

始点

拡張機能のマニフェストファイルに sidePanel アクセス許可を追加する

サイドバー API のユースケース

すべてのサイトに同じサイドバーを表示する

特定のサイトに対してのみサイドバーを有効にする

拡張機能のショートカットアイコンを有効にしてサイドバーを開く

別のサイドバーに切り替える

ユーザー操作時にサイドバーを開く

サイドバー拡張機能のユーザーエクスペリエンス

サイドバーで拡張機能を開く

アイコンをクリックすると、

拡張機能のアイコンを右クリックする

キーボードショートカットを押す

ジェスチャを使用して開く

拡張機能のサンプル

型とメソッド

関連項目

フィードバック

その他のリソース

次の方法で共有

Microsoft Edge サイドバーの拡張機能を開発する

用語

サイドバー API の機能

始点

拡張機能のマニフェスト ファイルに sidePanel アクセス許可を追加する

サイドバー API のユース ケース

すべてのサイトに同じサイドバーを表示する

特定のサイトに対してのみサイドバーを有効にする

拡張機能のショートカット アイコンを有効にしてサイドバーを開く

別のサイドバーに切り替える

ユーザー操作時にサイドバーを開く

サイドバー拡張機能のユーザー エクスペリエンス

サイドバーで拡張機能を開く

アイコンをクリックすると、

拡張機能のアイコンを右クリックする

キーボード ショートカットを押す

ジェスチャを使用して開く

拡張機能のサンプル

型とメソッド

関連項目

フィードバック

その他のリソース

拡張機能のマニフェストファイルに sidePanel アクセス許可を追加する

サイドバー API のユースケース

拡張機能のショートカットアイコンを有効にしてサイドバーを開く

サイドバー拡張機能のユーザーエクスペリエンス

キーボードショートカットを押す