範例：使用內容腳本的圖片插入器

本範例使用 JavaScript 程式碼，將圖片插入 stars.jpeg 目前網頁頂端的元素內 <body> 。擴充功能彈出視窗包含標題和一個標示為 「插入圖片」的 HTML 按鈕。當你點擊 插入圖片 按鈕時，擴充套件的 JavaScript 程式碼會從擴充功能圖示的彈出視窗發送訊息，並動態插入瀏覽器分頁執行的 JavaScript。

此範例展示了以下擴充功能：

將 JavaScript 函式庫注入擴充功能。
將擴充功能資產暴露給瀏覽器分頁。
將內容網頁納入現有的瀏覽器分頁。
讓內容網頁聆聽彈出視窗中的訊息並做出回應。

樣本預覽

你可以透過瀏覽器的 「管理擴充功能 」標籤安裝擴充功能範例，點擊擴充功能 () 按鈕顯示已安裝擴充功能清單，然後點擊這個範例擴充功能：

點擊擴充功能的圖示以開啟擴充功能

擴充功能會以彈出視窗顯示一個小型 HTML 網頁，包含標題、 插入圖片 按鈕及指示：

popup.html 選擇擴充功能圖示後顯示

當你點擊「 插入圖片 」按鈕時，JavaScript 程式碼會暫時插入 stars.jpeg 當前網頁的頂端，將網頁內容往下推到圖片下方。注入的內容會將影像元素設定為在當前網頁頂端顯示靜態影像 stars.jpeg ：

瀏覽器中顯示的圖片

當你點擊圖片時，注入的 JavaScript 會將該圖片從 DOM 樹和網頁中移除。

取得、安裝並執行範例的步驟如下。

複製 MicrosoftEdge-Extensions 儲存庫

你可以用各種工具來複製 GitHub 倉庫。你可以下載選定的目錄，或是複製整個倉庫。

先將 MicrosoftEdge-Extensions 的儲存庫複製到本地硬碟，然後切換到可用的分支，步驟如下。

git bash 指令提示字元
GitHub 桌面

在命令提示字元中，請輸入 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'

你現在可以自由修改工作分支中的程式碼，而不用修改倉庫「主」分支的程式碼。之後你可能會想切回「主」分支，或是根據「主要」分支建立另一個分支。

如果還沒安裝，請安裝 GitHub 桌面版：前往 https://github.com/apps/desktop，然後點擊 「立即下載 」按鈕。
請前往 MicrosoftEdge-Extensions 倉庫。
點選 程式碼 按鈕，然後選擇 「用 GitHub 桌面開啟」。

會跳出一個對話框，顯示 「本網站正嘗試開啟 GitHubDesktop.exe」。
點擊開啟按鈕。

GitHub Desktop 開啟，左上角下拉選單中 選中了 MicrosoftEdge-Extensions 儲存庫。

或者，在 GitHub Desktop 中，會開啟「 複製倉庫 」對話框：
指定將複製的倉庫目錄放入的本地磁碟路徑;例如： C:\Users\accountname\GitHub\。
點擊複製按鈕。

建立一個工作分支並切換到

在 GitHub Desktop 中，請確保 GitHub 桌面左上角的 Current repository 是 MicrosoftEdge-Extensions。

在 目前分支 的下拉選單裡，顯示是主分支。
在 「目前分支 」下拉選單中，點選「 分支」 標籤，然後點擊 「新分支 」按鈕。

「 建立分支 」對話框隨即開啟。
在名稱文字框中輸入分支名稱，例如測試，然後點擊 建立分支 按鈕。

在 GitHub Desktop 的上、中、左下，會顯示目前的分支，例如 test。

請在本地安裝樣品

你不需要從 Microsoft Edge Add-on 安裝樣本，而是在本地安裝樣本，這樣你才能修改並快速測試變更。本地安裝有時也稱為側載擴充功能。

在 Edge Microsoft，如果顯示地址列旁的 擴充功能 () 按鈕，請點擊該圖示。或者，選擇設定及更多， (「) >。擴充功能彈出視窗會打開：
點選 管理擴充功能。 擴充管理頁面在一個新分頁開啟：
開啟 開發者模式 切換。
首次安裝範例擴充功能時，點擊「 載入解包 」 (「 ) 按鈕。「 選擇擴充功能目錄 」對話框隨即開啟。
選擇包含副檔名來源檔案的目錄，例如 manifest.json。

範例路徑：

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script
點擊 「選擇資料夾 」按鈕。

「選擇擴充目錄」對話框關閉。

這個擴充功能是安裝在瀏覽器裡，類似於從 Microsoft Edge Add-on 安裝的擴充功能：

執行範例

進入新的視窗或分頁，前往網頁，例如 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`)

這個範例包含一個內容腳本，注入到目前瀏覽器分頁載入的網頁中。

當你執行擴充功能範例時，) 會顯示 (popup.html 首個彈出式 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事件，該事件的 ID sendmessageid為：

popup.js (部分) ：

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        ...
    };
}

在 popup.js中 chrome.tabs.query ，找到目前的瀏覽器分頁，然後 chrome.tabs.sendMessage 向該分頁發送訊息。取樣會通過當前分頁的 ID。訊息必須包含將要顯示的圖片網址。

你必須傳送一個唯一 ID 來指派給插入的圖片，這樣之後才能再次找到該圖片元素並刪除它。若要傳送一個獨特 ID 指派給插入的圖片，該唯一 ID 會被 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 Extension 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" });
}

聆聽器函式的前五行會附加 img 瀏覽器分頁中緊鄰該元素下方 body 的元素。

監聽函式img.id = request.imageDivId;的第二行，將該元素的 img ID 設為傳入請求的。imageDivId

在監聽器函式中，呼叫 addEventListener 會新增一個 click 事件監聽器功能，涵蓋整個影像，讓使用者能點擊影像上的任意位置。當你點擊插入的圖片時，該圖片會被列為 img.remove();，事件監聽器也會被移除，透過指定 { once: true }。

如何 `stars.jpeg` 從任何瀏覽器分頁存取

可從任何瀏覽器分頁提供 images/stars.jpeg ：

popup.js (上面) 使用了 chrome.runtime.getURL API。
以下清單 () 指定 web_accessible_resources 了類型 .jpeg 與所有網址相符的類型。

取樣透過在內容頁中注入 src 該元素的 img 屬性來注入影像。內容頁面運行在一個獨特的執行緒上，這執行緒和執行擴充功能的執行緒不同。靜態圖片檔案必須以網頁資產形式公開，才能正常運作。

檔案中會新增 manifest.json 另一條目，宣告該圖片對所有瀏覽器分頁皆可使用：

/manifest.json (部分) ：

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

檔案中的 popup.js 程式碼會傳送訊息到嵌入目前活躍分頁頁的內容頁面。

資源在清單 (`manifest.json`) 中列出的方式

範例會建立並注入嵌入在當前活躍分頁頁的內容頁。 manifest.json 包含 content-scripts 和 web_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/ - 此範例的原始碼。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27

共用方式為

範例：使用內容腳本的圖片插入器

樣本預覽

複製 MicrosoftEdge-Extensions 儲存庫

建立一個工作分支並切換到

請在本地安裝樣品

執行範例

研究樣本

檔案與目錄

更新網頁，將圖片置於頂部的策略 (stars.jpeg)

最初的彈出網頁 (popup.html)

JavaScript (popup.js) 初始彈出頁面，傳送訊息給注入的 JavaScript

內容腳本訊息聽 (content.js)

如何 stars.jpeg 從任何瀏覽器分頁存取

資源在清單 (manifest.json) 中列出的方式

清單 content_scripts 的部分會將 JavaScript 注入所有瀏覽器分頁

每個內容腳本都運行在自己的執行緒中，採用沙盒形式

後續步驟

另請參閱

意見反應

其他資源

更新網頁，將圖片置於頂部的策略 (`stars.jpeg`)

最初的彈出網頁 (`popup.html`)

JavaScript (`popup.js`) 初始彈出頁面，傳送訊息給注入的 JavaScript

內容腳本訊息聽 (`content.js`)

如何 `stars.jpeg` 從任何瀏覽器分頁存取

資源在清單 (`manifest.json`) 中列出的方式

清單 `content_scripts` 的部分會將 JavaScript 注入所有瀏覽器分頁