向工具欄新增按鈕
工具欄按鈕是擴充套件程式可用的主要 UI 元件之一。工具欄按鈕位於主瀏覽器工具欄中，包含一個圖示。使用者點選圖示時，會發生以下兩種情況之一：
- 如果為圖示指定了彈出視窗，則會顯示該彈出視窗。彈出視窗是使用 HTML、CSS 和 JavaScript 指定的瞬態對話方塊。
- 如果未指定彈出視窗，則會生成一個點選事件，您可以在程式碼中監聽該事件並響應式地執行其他型別的操作。
使用 WebExtension API，這些型別的按鈕稱為“瀏覽器操作”，設定方法如下：
manifest.json中的browser_action鍵用於定義按鈕。browserActionJavaScript API 用於監聽點選事件、更改按鈕或透過程式碼執行操作。
一個簡單的按鈕
在本節中，我們將建立一個在工具欄中新增按鈕的擴充套件程式。當用戶點選按鈕時，我們將在新標籤頁中開啟 https://mdn.club.tw。
首先，建立一個名為“button”的新目錄，並在其中建立一個名為“manifest.json”的檔案，其內容如下：
{
"description": "Demonstrating toolbar buttons",
"manifest_version": 2,
"name": "button-demo",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"16": "icons/page-16.png",
"32": "icons/page-32.png"
}
}
}
這指定我們將擁有一個名為“background.js”的 背景指令碼，以及一個圖示將位於“icons”目錄中的瀏覽器操作（按鈕）。
接下來，在“buttons”目錄中建立“icons”目錄，並將下方顯示的兩個圖示儲存在其中：
"page-16.png"
"page-32.png"
注意： 這些圖示來自 Recep Kütük 建立的 bitsies! 圖示集。
我們有兩個圖示，因此可以在高解析度顯示器上使用較大的圖示。瀏覽器將負責選擇最適合當前顯示的圖示。
接下來，在擴充套件程式的根目錄中建立“background.js”，併為其提供以下內容：
function openPage() {
browser.tabs.create({
url: "https://mdn.club.tw",
});
}
browser.browserAction.onClicked.addListener(openPage);
這會監聽瀏覽器操作的點選事件；當事件觸發時，將執行 openPage() 函式，該函式使用 tabs API 開啟指定的頁面。
此時，完整的擴充套件程式應如下所示：
button/
icons/
page-16.png
page-32.png
background.js
manifest.json
現在 安裝擴充套件程式 並點選按鈕。
新增彈出視窗
讓我們嘗試為按鈕新增彈出視窗。將 manifest.json 替換為：
{
"description": "Demonstrating toolbar buttons",
"manifest_version": 2,
"name": "button-demo",
"version": "1.0",
"browser_action": {
"default_popup": "popup/choose_page.html",
"default_icon": {
"16": "icons/page-16.png",
"32": "icons/page-32.png"
}
}
}
我們對原始檔案做了兩處更改：
- 移除了對“background.js”的引用，因為現在我們將處理彈出視窗指令碼中的擴充套件程式邏輯（您可以使用 background.js 和彈出視窗，只是在這種情況下我們不需要它）。
- 添加了
"default_popup": "popup/choose_page.html"，這告訴瀏覽器此瀏覽器操作現在將在點選時顯示彈出視窗，其文件可以在“popup/choose_page.html”中找到。
現在我們需要建立該彈出視窗。建立一個名為“popup”的目錄，然後在其中建立一個名為“choose_page.html”的檔案。為其提供以下內容：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="choose_page.css" />
</head>
<body>
<div class="page-choice">developer.mozilla.org</div>
<div class="page-choice">support.mozilla.org</div>
<div class="page-choice">addons.mozilla.org</div>
<script src="choose_page.js"></script>
</body>
</html>
您可以看到這是一個普通的 HTML 頁面，其中包含三個 <div> 元素，每個元素都包含一個 Mozilla 網站的名稱。它還包含一個 CSS 檔案和一個 JavaScript 檔案，我們將在下一步新增。
在“popup”目錄中建立一個名為“choose_page.css”的檔案，併為其提供以下內容：
html,
body {
width: 300px;
}
.page-choice {
width: 100%;
padding: 4px;
font-size: 1.5em;
text-align: center;
cursor: pointer;
}
.page-choice:hover {
background-color: #cff2f2;
}
這只是我們彈出視窗的一些樣式。
接下來，在“popup”目錄中建立一個“choose_page.js”檔案，併為其提供以下內容：
document.addEventListener("click", (event) => {
if (!event.target.classList.contains("page-choice")) {
return;
}
const chosenPage = `https://${event.target.textContent}`;
browser.tabs.create({
url: chosenPage,
});
});
在我們的 JavaScript 中，我們監聽彈出視窗選擇的點選事件。我們首先檢查點選是否落在頁面選擇之一上；如果沒有，我們就什麼也不做。如果點選落在頁面選擇上，我們則根據它構建一個 URL，並開啟一個包含相應頁面的新標籤頁。請注意，我們可以在彈出視窗指令碼中使用 WebExtension API，就像在背景指令碼中使用一樣。
擴充套件程式的最終結構應如下所示：
button/
icons/
page-16.png
page-32.png
popup/
choose_page.css
choose_page.html
choose_page.js
manifest.json
現在 重新載入擴充套件程式，再次點選按鈕，然後嘗試點選彈出視窗中的選項。
頁面操作
頁面操作 就像瀏覽器操作一樣，只是它們適用於特定頁面而不是整個瀏覽器相關的操作。
瀏覽器操作始終顯示，而頁面操作僅在相關選項卡中顯示。頁面操作按鈕顯示在 URL 欄中，而不是瀏覽器工具欄中。
瞭解更多
-
browser_actionmanifest 鍵 -
browserActionAPI -
瀏覽器操作示例
-
page_actionmanifest 鍵 -
pageActionAPI -
頁面操作示例