共用方式為

為 Microsoft Edge 側邊欄開發擴充功能

作為 Microsoft Edge 擴充功能的開發者，你可以讓你的新 Microsoft Edge 擴充功能顯示在側邊欄。 任何擴充功能除了其他介面外，都可以使用側邊欄。

Microsoft Edge 擴充功能的側邊欄

透過使用 Sidebar API 擴充功能，您可以提升瀏覽體驗，讓使用者能在網頁主內容旁同時查看更多資訊。

側邊欄是一個位於瀏覽器側邊的持久窗格，與瀏覽器的主要內容共存。 側邊欄減少了頻繁切換分頁的需求，讓瀏覽體驗更有效率。

擴充功能可選擇性地使用側邊欄 API，在 Microsoft Edge 側邊欄中顯示自訂使用者介面。 擴充功能可以持續出現在 Microsoft Edge 工具列中，並搭配 UI 如彈出視窗，並可注入腳本等。

術語

術語 定義
側邊欄 API 你可以在 Microsoft Edge 擴充功能中使用的功能名稱。 Chrome 文件會用側 面板這個詞。
sidePanel 或 side_panel API 名稱以及啟用任何擴充功能作為側邊欄擴充功能的權限。
側欄延伸 一個 Microsoft Edge 擴充功能，側邊欄有介面。

側邊欄 API 的功能

側邊欄 API 的功能包括：

  • 側邊欄在切換分頁時會保持開啟。 已知問題：當使用者切換到該側邊欄先前開啟過的分頁時，側邊欄不會自動再次顯示 (#142) 。

  • 側邊欄可為特定網站提供擴充功能。

  • 側邊欄中的擴充功能可存取所有 Microsoft Edge 擴充功能的支援 API。

Origin

與其他擴充資源一樣，側邊欄頁面會提交到受信任的擴充情境，並 (extension://<id>) 。 側邊欄的 API 存取權限與其他受信任擴充情境相同。

所有現有的擴充 API 都可用於側邊欄擴充，因此你可以在側邊欄啟用的擴充功能中，充分利用目前可擴充性框架的所有功能。

在擴充功能的清單檔案中新增 sidePanel 權限

要使用 Sidebar API，請在你的 manifest.json 檔案中新增一個權限。 請將權限包含 sidePanel 在擴充檔中 manifest.json ：

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

Microsoft Edge 的每個擴充功能都有一個名為 manifest.json的 JSON 格式清單檔案。 清單檔案就是你擴充功能的藍圖。

另請參閱:

側邊欄 API 的使用案例

以下章節將展示側邊欄 API 的一些常見使用案例。

每個網站都顯示相同的側邊欄

側邊欄可以設為預設，讓所有開啟的瀏覽器分頁都能顯示相同的擴充功能。 預設值會在瀏覽器會話間持續存在。

在 manifest.json中，定義 "default_path" 鍵，例如 "sidebar.html"：

{
  "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 () 在特定分頁啟用側邊欄。這可能是特定網站，當使用者造訪該網站時，擴充功能會在側邊欄開啟。

這個範例使用 chrome.tabs.onUpdated () 來監聽分頁是否有更新。它會檢查 URL 是否正確 www.bing.com ，若是，則啟用側邊欄。 否則，側邊欄會被關閉。

在 service-worker.js， ， addListener()測試 url.origin 是否是想要的 tab 鍵，然後在 sidePanel.setOptions()， 設定 enabled 為 true 或 false：

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
    });
  }
});

當使用者切換到未啟用側邊欄的分頁或網站時，側邊欄會被隱藏。

已知問題：當使用者切換到該側邊欄先前開啟過的分頁時，側邊欄不會自動再次顯示 (#142) 。

完整範例請參見 特定地點側面板範例。

啟用擴充功能的捷徑圖示以開啟側邊欄

要讓使用者點擊動作工具列圖示開啟側邊欄，請使用 sidePanel.setPanelBehavior () 。 首先，宣告 "action" in 中的 manifest.json密鑰：

{
  "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) 功能。

在側邊欄開啟擴充功能

使用者有幾種方式可以在側邊欄開啟擴充功能：

點擊圖示

使用者可以點擊「 在側邊欄開啟 」圖示 (「 在側邊欄開啟」圖示) ，該圖示顯示在擴充功能中心的擴充功能名稱旁邊：

側邊欄對話框

或者，使用者也可以點擊工具列中的自訂圖示（如果啟用了）。 此使用者體驗要求擴充功能啟用捷徑圖示以開啟側邊欄，詳見上方 「啟用擴充功能的捷徑圖示以開啟側邊欄」。 在這個例子中，擴充功能的自訂圖示是一個圓圈 (擴充 功能的自訂圖示) ：

點擊工具列中擴充功能的圖示

透過右鍵點擊擴充功能的圖示

使用者可以在工具列中右鍵點擊擴充功能的圖示，然後選擇側 邊欄開啟 或 關閉側邊欄：

右鍵點擊工具列上的捷徑以開啟擴充功能

右鍵點擊工具列上的捷徑關閉擴充功能

如果使用者在擴充功能中心點擊了工具 列中的「顯示工具列 」 (「 工具列顯示」圖示) 擴充功能名稱旁的圖示，該擴充功能圖示會出現在工具列中。

透過按下鍵盤快捷鍵

使用者若啟用動作指令且動作圖示開啟側邊欄，即可按下鍵盤快捷鍵。

  • 要啟用 action 指令，請參考 API 參考中的 chrome.commands 中的動作指令。
  • 要啟用動作圖示，請參見 API 參考中 chrome.sidePanel中點選工具列圖示開啟側面板。

如果 openPanelOnActionClick()PanelBehavior 類型的屬性設定為 true，使用者可以透過鍵盤快捷鍵開啟側邊欄。 要啟用此功能，請在清單中指定一個動作指令。

透過一個手勢打開心扉

側邊欄也可以透過以下互動方式開啟：

延伸範例

想看更多側邊欄 API 擴充功能的示範，請探索以下任一擴充功能：

類型與方法

請參閱 chrome.sidePanel API 參考頁面developer.chrome.com中的類型與方法。

另請參閱

注意事項

本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可在此查閱。

創用CC授權 本作品採用 創用CC 姓名標示4.0國際授權條款授權。

  • Last updated on