範例：使用內容文本的圖片插入器
此範例會使用 JavaScript 程式代碼，將影像插入 stars.jpeg 目前網頁頂端的 <body> 元素內。 延伸模組的快顯包含標題和標示為 [插入圖片] 的 HTML 按鈕。 當您按下 [ 插入圖片 ] 按鈕時，延伸模組的JavaScript程式代碼會從延伸模組圖示的快顯傳送訊息，並動態插入在瀏覽器索引標籤中執行的 JavaScript。
此範例示範下列擴充功能功能：
- 將 JavaScript 連結庫插入延伸模組。
- 將延伸模組資產公開至瀏覽器索引標籤。
- 在現有的瀏覽器索引標籤中包含內容網頁。
- 讓內容網頁接聽來自彈出視窗的訊息並回應。
範例預覽
您將使用瀏覽器的 [ 管理 延伸模組] 索引標籤來安裝擴充功能範例，按兩下 [擴 充功能 (![延伸模組] 圖示](picture-inserter-content-script-images/extensions-icon.png){kind=icon}
) 按鈕以顯示已安裝的擴充功能清單，然後按兩下此範例延伸模組：
延伸模組會在彈出視窗中顯示小型 HTML 網頁，其中包含標題、 插入圖片 按鈕和指示：
當您按下 [ 插入圖片 ] 按鈕時，JavaScript 程式代碼會暫時插入 stars.jpeg 目前網頁的頂端，並將網頁的內容往下推送到影像下方。 插入的內容會設定影像元素，以在目前網頁的頂端顯示靜態影像 stars.jpeg ：
當您按下影像時，插入的 JavaScript 會從 DOM 樹狀結構和網頁中移除影像。
取得、安裝及執行範例，如下所示。
複製 MicrosoftEdge-Extensions 存放庫
您可以使用各種工具來複製 GitHub 存放庫。 您可以下載選取的目錄，或複製整個存放庫。
將 MicrosoftEdge-Extensions 存放庫複製到本機磁碟驅動器，然後切換至工作分支，如下所示。
在命令提示字元中，輸入
git以檢查是否已安裝 git。如果尚未完成， 請下載 git 並加以安裝。
如果尚未完成，請啟動安裝 git 的命令提示字元。
變更為您要複製 MicrosoftEdge-Extensions 存放庫的目錄。 例如：
cd C:/Users/localAccount/GitHub/在 Microsoft Edge 中，移至 MicrosoftEdge-Extensions 存放庫。
按兩下綠色 [程序代碼] 按鈕右側的向下箭號，然後在 [使用Web URL 複製] 區段中，按兩下 旁邊
https://github.com/microsoft/MicrosoftEdge-Extensions.git的 [複製URL到剪貼簿] 按鈕。在命令提示字元視窗中，輸入命令：
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'
您現在可以自由修改工作分支中的程序代碼，而不需要變更存放庫 「main」 分支中的程式代碼。 稍後，您可能會想要切換回 「main」 分支，或根據 「main」 分支建立不同的分支。
![GitHub Desktop 中的 [複製存放庫] 對話方塊](picture-viewer-popup-webpage-images/clone-a-repo-dbox-ghd.png)
在本機安裝範例
您不需要從市集安裝範例，而是在本機安裝範例，以便您可以修改範例並快速測試變更。 在本機安裝有時稱為 側載 擴充功能。
在 Microsoft Edge 中，如果顯示此
，請按兩下 [網址列] 旁的 [擴充功能 (延伸模組] 圖示) 按鈕。 或者，選取 [設定] 和 [更多 (延伸模組![圖示) [設定及更多] 圖示](picture-inserter-content-script-images/settings-and-more-icon.png)
>。 [ 擴充功能] 彈出視窗隨即開啟：![未安裝擴充功能時，[擴充功能] 彈出視窗](picture-inserter-content-script-images/extensions-popup-no-extensions.png)
按兩下 [管理擴充功能]。 [ 擴充功能管理] 頁面會在新的索引標籤中開啟：
開啟 [ 開發人員] 模式 切換。
第一次安裝範例延伸模組時，按兩下 [ 載入已解除封裝 ([
![載入解除封裝] 圖示](picture-inserter-content-script-images/load-unpacked-icon.png)
) 按鈕。 [ 選取延伸模組目錄] 對話框隨即開啟。選取包含擴充功能來源檔案的目錄，例如
manifest.json。範例路徑：
C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script按兩下 [ 選取資料夾] 按鈕。
[ 選取延伸模組目錄] 對話框隨即關閉。
擴充功能會安裝在瀏覽器中，類似於從存放區安裝的延伸模組：
執行範例
在新的視窗或索引標籤中移至網頁，例如 TODO 應用程式。索引標籤不得空白，而且不得為 [管理延伸模組] 頁面，因為此範例會將內容插入目前的網頁。
重新整理網頁。 重載擴充功能之後，有時需要這麼做。
在網址列右側的 Microsoft Edge 中，如果顯示此圖示，請按兩下 [ 擴 充功能 (
) 按鈕。 或者，選取 [設定及更多 ([擴充功能] >) [。[ 擴充功能] 彈出視窗隨即開啟：
使用內容文稿) ，按兩下延伸模組的圖示或名稱 (圖片插入器。
延伸模組隨即開啟，且延伸模組的圖示會新增至 [網址列] 和 [ 延伸 模組] (
旁) 圖示。彈出視窗隨即開啟，其中包含具有標題、 插入圖片 按鈕和指示的小型HTML 網頁：
按兩下 [ 插入圖片] 按鈕。
stars.jpeg會插入目前索引標籤中目前網頁的頂端，並將網頁的內容向下推送至影像下方：
stars.jpeg按兩下填滿網頁頂端的影像。 該影像元素會從 DOM 樹狀結構和網頁中移除，並還原目前的網頁，並將其內容移回索引標籤。
延伸模組會從延伸模組圖示的彈出視窗傳送訊息，並在瀏覽器索引標籤中動態插入執行為內容的 JavaScript。插入的內容會設定要顯示 stars.jpeg 在目前網頁頂端的影像元素，然後在您按兩下影像時移除影像。
另請參閱:
研究範例
在下列各節中，您將研究範例。 之後，若要開發您自己的 Microsoft Edge 擴充功能，您可以複製和修改範例的目錄，並安裝和測試產生的延伸模組。
檔案和目錄
此範例具有下列目錄結構和檔案。
範例的範例路徑：
C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script
目錄中的 /picture-inserter-content-script/ 目錄和檔案：
/content-scripts/
content.js
/icons/
extension-icon16x16.png
extension-icon32x32.png
extension-icon48x48.png
extension-icon128x128.png
/images/
stars.jpeg
/popup/
popup.html
popup.js
manifest.json
- 目錄
/content-scripts/包含content.js，這是插入目前網頁的腳本。 - 目錄
/icons/包含檔案的.png版本，可用來代表瀏覽器的網址列、[ 擴 充功能] 彈出視窗和 [ 擴 充功能管理] 頁面附近的擴充功能。 - 目錄
/images/包含stars.jpeg，其會顯示在擴充功能的快顯中。 - 目錄
/popup/包含下列檔案：-
popup.html定義延伸模組初始快顯網頁中的內容， (標題、按鈕和指示) 。 -
popup.js初始快顯網頁會將訊息傳送至內容腳本， (content.js) 在索引卷標頁面上執行，指定要顯示的圖像檔。
-
-
manifest.json包含擴充功能的基本資訊。
更新網頁以將影像插入頂端 (stars.jpeg)
此範例包含插入至目前瀏覽器索引標籤中所載入網頁的內容腳本。
當您執行擴充功能範例時，初始快顯 HTML 頁面會顯示 ()
popup.html，並顯示標題、指示和 [插入圖片] 按鈕。當您按下 [ 插入圖片 ] 按鈕時，初始快顯頁面的JavaScript
popup.js() 會將訊息傳送至在索引標籤面上執行的內容腳本 (content.js) 。 訊息會指定要顯示的圖像檔。在索引標籤面上執行的內容腳本 (
content.js) 會接收訊息，並顯示指定的圖像檔 (stars.jpeg) 。
初始快顯網頁 (popup.html)
/popup/popup.html 會在指令清單檔案中指定為網頁，以顯示在擴充功能的初始快顯中。 指令清單檔包含索引鍵欄位 "default_popup": "popup/popup.html"。 此範例的 popup.html 檔案是小型網頁，其中包含標題、 插入圖片 按鈕和指示。
popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
width: 500px;
}
button {
background-color: #336dab;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Picture inserter using a content script</h1>
<button id="sendmessageid">Insert picture</button>
<script src="popup.js"></script>
<p>Click the displayed image to remove it from the webpage.</p>
</body>
</html>
初始快顯頁面的 JavaScript (popup.js) ，以將訊息傳送至插入的 JavaScript
/popup/popup.js 會將訊息傳送至暫時插入瀏覽器索引標籤 content.js 的內容腳稿 () 。若要這樣做， popup.js 請將事件新 onclick 增至彈出式網頁的 [ 插入圖片 ] 按鈕，其標識碼 sendmessageid為 ：
popup.js (部分) ：
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
...
};
}
在 popup.js中， chrome.tabs.query 尋找目前的瀏覽器索引標籤，然後 chrome.tabs.sendMessage 將訊息傳送至該索引標籤。此範例會傳入目前索引標籤的標識碼。 訊息必須包含將顯示之影像的 URL。
您必須傳送唯一標識碼以指派給插入的影像，以便稍後再次尋找 image 元素並將其刪除。 若要傳送要指派給插入影像的唯一標識符，會在 popup.js 中產生唯一標識符，並傳遞至內容腳本。
popup.js (完成) ：
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.runtime.getURL("images/stars.jpeg"),
imageDivId: crypto.randomUUID(),
tabId: tabs[0].id
},
function(response) {
window.close();
}
);
});
};
}
內容腳本訊息接聽程式 (content.js)
以下是 content-scripts\content.js 插入每個瀏覽器索引標籤面的檔案。 此檔案會列在 的 content-scripts 區段中 manifest.json。
content.js (完成) ：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
const img = document.createElement("img");
img.id = request.imageDivId;
img.src = request.url;
img.style = "height: auto; width: 90vw;";
document.body.prepend(img);
img.addEventListener("click", () => {
img.remove();
}, { once: true });
sendResponse({ fromcontent: "This message is from content.js" });
});
content.js 使用 chrome.runtime.onMessage.addListener 擴充功能 API 方法註冊接聽程式。 此接聽程式會等候呼叫chrome.tabs.sendMessage時popup.js傳送的訊息。
在 content.js中， addListener 方法會採用函式的單一參數。 該函式的第一個參數 request包含正在傳入之訊息的詳細數據。
在 content.js中，當接聽程式處理事件時，會執行傳入 addListener 的接聽程式函式。 傳入接聽程式函式的第一個 request 參數是具有 所指派之屬性的 sendMessage物件。
在 popup.js中 chrome.tabs.sendMessage ，針對 方法呼叫，的第二個參數 sendMessage 的屬性為 url、 imageDivId和 tabId。
以下是傳遞至 addListener的隔離接聽程式函式：
content.js (部分)
function(request, sender, sendResponse) {
const img = document.createElement("img");
img.id = request.imageDivId;
img.src = request.url;
img.style = "height: auto; width: 90vw;";
document.body.prepend(img);
img.addEventListener("click", () => {
img.remove();
}, { once: true });
sendResponse({ fromcontent: "This message is from content.js" });
}
接聽程式函式中的前五行會在瀏覽器索引標籤中的 元素正下方body附加img元素。
接聽程式函 img.id = request.imageDivId;式中的第二行 會將項目的識別 img 碼設定為 imageDivId 傳入要求的 。
在接聽程式函式中 addEventListener ，呼叫會新增 click 涵蓋整個影像的事件接聽程式函式，讓使用者可以按兩下影像上的任何位置。 當您按下插入的影像時，影像會由行從目前的網頁 img.remove();中移除，並藉由指定 { once: true }來移除事件接聽程式。
如何 stars.jpeg 從任何瀏覽器索引標籤提供
若要 images/stars.jpeg 從任何瀏覽器索引標籤提供：
-
popup.js上述 () 使用chrome.runtime.getURLAPI。 - 下面的指令清單 () 指定
web_accessible_resources類型的.jpeg符合所有URL。
此範例會使用 src 項目的 屬性 img 將影像插入內容頁面。 內容頁面在執行擴充功能的線程不同的唯一線程上執行。 靜態圖像檔案必須公開為 Web 資產，才能正確運作。
檔案中 manifest.json 會新增另一個專案，以宣告影像可供所有瀏覽器索引標籤使用：
/manifest.json (部分) ：
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
檔案中的 popup.js 程式代碼會將訊息傳送至內嵌在目前使用中索引標籤面的內容頁面。
如何將資源列在指令清單 (manifest.json)
此範例會建立並插入內嵌在目前使用中索引標籤面的內容頁面。
manifest.json 包含 和 content-scriptsweb_accessible_resources，如下所示：
/manifest.json (完成) ：
{
"name": "Picture inserter using content script",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "A browser extension that uses JavaScript to insert an image at the top of the current 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"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content-scripts/content.js"]
}
],
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
}
指令清單的 content_scripts 區段會將 JavaScript 插入所有瀏覽器索引標籤
content_scripts在指令清單檔案的索引鍵區段中matches，屬性設定為 <all_urls>，這表示.js載入每個索引標籤時，會將密鑰區段中content_scripts指定的 (或 .css) 檔案插入所有瀏覽器索引標籤面。 可插入的允許文件類型為 JavaScript () .js 和 CSS (.css) 。
這個範例的指令清單會指定單一內容文稿 。 content-scripts/content.js
每個內容腳本都會在自己的線程沙盒化中執行
每個索引標籤頁面 (和延伸模組) 在自己的線程中執行。 即使瀏覽器索引標籤包含執行 JavaScript 程式代碼的網頁， content.js 延伸模組插入該瀏覽器索引標籤中的腳本也無法存取該 JavaScript 程式代碼。 插入的內容文本只能存取網頁的 DOM。
後續步驟
若要開發您自己的 Microsoft Edge 擴充功能，您可以複製和修改範例的目錄，並安裝和測試產生的延伸模組。
另請參閱
GitHub：
-
MicrosoftEdge-Extensions 存放庫。
- /picture-inserter-content-script/ - 此範例的原始程式碼。