此範例是一個瀏覽器擴充功能，未啟用 JavaScript，可在任何 Microsoft Edge 分頁的彈出視窗中顯示該 stars.jpeg 圖片：
複製 MicrosoftEdge-Extensions 儲存庫
你可以用各種工具來複製 GitHub 倉庫。 你可以下載選定的目錄，或是複製整個倉庫。
先將 MicrosoftEdge-Extensions 的儲存庫複製到本地硬碟，然後切換到可用的分支，步驟如下。
在命令提示字元中，請輸入
git檢查 git 是否已安裝。如果還沒完成，就 下載 git 並安裝。
如果還沒完成，可以啟動一個安裝 git 的命令提示字元。
請將 MicrosoftEdge-Extensions 倉庫的資料夾切換到你想要複製的目錄。 例如：
cd C:/Users/localAccount/GitHub/在 Microsoft Edge 中，請前往 MicrosoftEdge-Extensions 倉庫。
點擊綠色程式碼按鈕右側的下箭頭，然後在使用網頁網址的複製部分，點擊旁邊
https://github.com/microsoft/MicrosoftEdge-Extensions.git的「複製網址到剪貼簿」按鈕。在指令提示字元視窗中，輸入以下指令：
git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git/MicrosoftEdge-Extensions/目錄是加入你指定的目錄內的。
建立一個工作分支並切換到
請查看目錄列表：
ls/MicrosoftEdge-Extensions/目錄已列出。切換到新目錄：
cd MicrosoftEdge-Extensions建立一個運作中的分支：
git branch test切換到工作分支：
git switch test退貨：
Switched to branch 'test'
你現在可以自由修改工作分支中的程式碼，而不用修改倉庫「主」分支的程式碼。 之後你可能會想切回「主」分支，或是根據「主要」分支建立另一個分支。
請在本地安裝樣品
你不需要從 Microsoft Edge Add-on 安裝樣本，而是在本地安裝樣本，這樣你才能修改並快速測試變更。 本地安裝有時也稱為 側載 擴充功能。
在 Edge Microsoft，如果顯示地址列旁的 擴充功能 (
) 按鈕，請點擊該圖示。 或者，選擇「設定及更多」
(擴充功能) > 選擇。 擴充 功能 彈出視窗會打開：
點選 管理擴充功能。 擴充管理頁面在一個新分頁開啟：
開啟 開發者模式 切換。
第一次安裝擴充功能時，請點擊 「載入解包 」 (「
) 按鈕。 「 選擇擴充功能目錄 」對話框隨即開啟。選擇包含副檔名來源檔案的目錄，例如
manifest.json。範例路徑：
C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage點擊 「選擇資料夾 」按鈕。
「選擇擴充目錄」對話框關閉。
這個擴充功能是安裝在瀏覽器裡，類似於從 Microsoft Edge Add-on 安裝的擴充功能：
執行範例
進入新的視窗或分頁，前往網頁，例如 TODO 應用程式。在這個範例中，這個步驟是可選的，只是為了匹配截圖;這個範例不需要網頁開啟。
重新整理網頁。 有時在重新載入擴充後需要這麼做。
在 Microsoft Edge 地址列右側，如果顯示此圖示，請點擊「 擴充功能 」
) 按鈕。 或者，選擇「設定及更多」 (擴充功能) > 選擇。擴充 功能 彈出視窗會打開：
點擊擴充功能的圖示或名稱 (圖片檢視器彈出網頁) 。
擴充功能開啟後，擴充功能的圖示會被加入地址列旁邊，擴充 功能 (
) 。 擴充功能會以彈出視窗顯示 popup.html包含stars.jpeg，如下：
點擊地址列旁的擴充功能按鈕。 彈出視窗關閉。
另請參閱:
研究樣本
在接下來的章節中，你會研究這個樣本。 之後，若要開發自己的 Microsoft Edge 擴充功能，你可以複製並修改範例目錄，並安裝並測試產生的擴充功能。
檔案與目錄
範例目錄結構如下：
範例路徑：
C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage
目錄中的 /picture-viewer-popup-webpage/ 目錄與檔案：
/icons/
extension-icon16x16.png
extension-icon32x32.png
extension-icon48x48.png
extension-icon128x128.png
/images/
stars.jpeg
/popup/
popup.html
manifest.json
- 該
/icons/目錄包含一個檔案版本.png，用來代表瀏覽器網址列附近的副檔名。 - 該
/images/目錄包含stars.jpeg，並會在擴充功能的彈出視窗中顯示。 - 該
/popup/目錄包含popup.html，定義了在擴充功能彈出視窗中顯示的網頁內容。 -
manifest.json包含關於擴充功能的基本資訊。
清單檔案 (manifest.json)
每個擴充套件必須在根目錄中有一個 manifest.json 檔案。 清單會提供你的擴充功能詳細資料、擴充套件版本，以及擴充名稱和描述。
manifest.json 包含以下幾行：
{
"name": "Picture viewer pop-up webpage",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "A browser extension that displays an image in a pop-up webpage.",
"icons": {
"16": "icons/extension-icon16x16.png",
"32": "icons/extension-icon32x32.png",
"48": "icons/extension-icon48x48.png",
"128": "icons/extension-icon128x128.png"
},
"action": {
"default_popup": "popup/popup.html"
}
}
啟動擴充功能的圖示
目錄中 /icons/ 包含圖示影像檔案。 這些圖示作為啟動擴充功能按鈕的背景圖片：
當擴充功能執行時，工具列上會出現其中一個圖示，位於地址列旁邊：
要關閉擴充功能，請點擊工具列上的擴充功能圖示，或點擊擴充 功能 () 按鈕。
圖示推薦：
- 使用
PNG格式，但你也可以使用BMP、 、GIF或ICOJPEG格式。 - 如果你只提供一個圖示檔案，請使用 128 x 128 像素，瀏覽器可調整大小。
彈出視窗 (popup.html)
popup.html
/popup/在目錄中執行時，當你啟動擴充功能時。 當你點擊圖示啟動副檔名時，這個檔案會以模態對話框的形式顯示。
popup.html 包含以下程式碼，用以顯示標題及星星圖片：
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Picture viewer pop-up webpage</title>
</head>
<body>
<div>
<img src="/images/stars.jpeg" alt="Stars" />
</div>
</body>
</html>
) (popup.html 彈出網頁在關鍵區塊中註冊為 "default_popup" ， manifest.json為 action ：
manifest.json (份)
{
"action": {
"default_popup": "popup/popup.html"
}
}
後續步驟
若要開發自己的 Microsoft Edge 擴充功能，您可以複製並修改範例目錄，並安裝與測試產生的擴充功能。
執行並測試此擴充功能範例後，你可以繼續使用 內容腳本進行範例：圖片插入器，該腳本會動態將 JavaScript 作為瀏覽器分頁中的內容插入。
另請參閱
GitHub：
-
MicrosoftEdge-Extensions 倉庫。
- /picture-viewer-popup-webpage/ - 此範例的原始碼。