创建 Edge 浏览器扩展教程（下）

- [创建扩展教程，第 2 部分](#创建扩展教程，第 2 部分)
- - 1：更新弹出窗口.html以包含按钮
  - 2：更新弹出窗口.html在浏览器选项卡顶部显示图像
  - [3：创建弹出式 JavaScript 以发送消息](#3：创建弹出式 JavaScript 以发送消息)
  - 4：从任何浏览器选项卡提供您的服务
  - 5：更新您的清单文件和Web访问权限
  - 6：添加内容脚本的消息监听器

创建扩展教程，第 2 部分

在本文中，我们将继续通过添加一个按钮来更新弹出窗口.html文件，并在浏览器选项卡的顶部显示一个图像。

官方教程连接：https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?tabs=v3

1：更新弹出窗口.html以包含按钮

首先，在之前创建的弹出文件夹中的popup.html文件中，我们将添加包含按钮的标题。我们还将在稍后的步骤中对该按钮进行编程，但现在首先包含对空的JavaScript文件的引用。

以下是一个更新后的HTML文件示例：

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>Display the NASA picture of the day</h1>
    <h2>(select the image to remove)</h2>
    <button id="sendmessageid">Display</button>
    <script src="popup.js"></script>
</body>
</html>

完成后，更新并打开扩展程序，您将看到一个弹出窗口，其中包含一个显示按钮。

2：更新弹出窗口.html在浏览器选项卡顶部显示图像

在添加按钮后，下一个任务是使其在活动选项卡页面的顶部显示图像文件（images/stars.jpeg）。

每个选项卡页面（和扩展）都在自己的线程中运行。我们需要创建一个内容脚本将注入到选项卡页面中。然后，我们可以将消息从弹出窗口发送到运行在选项卡页面上的内容脚本。内容脚本将收到该消息，并描述应该显示哪个图像。

3：创建弹出式 JavaScript 以发送消息

我们将创建一个文件并添加代码，以向尚未创建的内容脚本发送消息。要立即创建该消息并将其注入到浏览器选项卡中，以下代码将在弹出的"显示"按钮上添加一个事件：

javascript 复制代码

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

在这种情况下，我们首先需要找到当前的浏览器选项卡。然后，我们可以使用扩展API向该选项卡发送消息。在onclick事件中，我们使用chrome.tabs.query方法来查询当前选项卡，并使用chrome.tabs.sendMessage方法发送消息。

在发送的消息中，我们需要包含要显示的图像的URL。还请确保为要插入图像的div分配一个唯一的ID。

为了生成唯一的ID，我们可以使用不同的方法：

方法1：让内容脚本生成该图像的ID。我们将在稍后的教程中介绍这种方法。
方法2：在弹出窗口中生成该唯一ID，然后将其传递给尚未创建的内容脚本。我们将在本教程中使用此方法。

下面是上述代码的更新版本。我们还将传递当前选项卡的ID，以备稍后使用：

javascript 复制代码

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: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

以上是第2部分的步骤。完成以上步骤后，您将更新弹出窗口.html以包含一个按钮，并且通过点击该按钮，可以将图像显示在浏览器选项卡的顶部。

要查看本教程此部分的完整扩展包源代码，请转到 MicrosoftEdge-Extensions 存储库> 扩展获取-开始-part-part2。

请注意，源代码已从清单V2更新到清单V3。

在下一部分教程中，我们将继续介绍如何注入JavaScript库到扩展中，并将内容页添加到现有的浏览器选项卡中。

4：从任何浏览器选项卡提供您的服务

要从任何浏览器选项卡提供服务，您需要使用API chrome.runtime.getURL('images/stars.jpeg')。

如果您使用的是清单V2，请改用 .getURL。由于附加的图像返回一个额外的前缀，所以您需要使用以下代码来获取图像的URL：chrome.extension.getURL('images/stars.jpeg')。

您需要将静态图像文件公开为Web资源，以便可以在内容页面中使用。您可以通过在清单文件中添加以下条目来声明图像可以在所有浏览器选项卡中使用：

json 复制代码

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

现在，您已经为注入到选项卡中的内容页面编写了代码，但是您还没有创建和注入该内容页面。接下来，我们来完成这一步骤。

5：更新您的清单文件和Web访问权限

更新您的清单文件如下所示：

json 复制代码

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

在清单文件中，您添加了内容脚本和可访问的资源条目。内容脚本将在所有浏览器选项卡页上运行，并注入所需的JavaScript和CSS文件。可访问的资源条目允许静态图像文件在浏览器选项卡页上使用。

在要注入的内容脚本中，您计划使用jQuery。您可以将jQuery的缩小版本添加为lib/jquery.min.js文件，并将其列为内容脚本中的JavaScript文件。

请注意，注入的内容脚本和页面加载的脚本运行在不同的线程上。注入的JavaScript无法访问页面中运行的脚本。所以，在内容脚本中注入的代码只能操作在浏览器选项卡中加载的DOM。

6：添加内容脚本的消息监听器

在内容脚本中添加一个消息监听器，用于处理来自弹出菜单的消息：

javascript 复制代码

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img src="${request.url}" id="${request.imageDivId}" class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
            .slide-image {
                height: auto;
                width: 100vw;
            }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

在上面的代码中，添加的监听器函数使用jQuery在浏览器选项卡页上添加了一个图像元素。同时，它也添加了一个样式表，以使该图像元素覆盖整个页面。然后，它为图像元素添加了一个点击事件侦听器，以便在用户点击图像时将其删除。

这样，我们成功创建了一个扩展，该扩展可以通过弹出窗口发送消息，并在浏览器选项卡页上显示一个具有动态插入的图像的内容。

当您选择该按钮时，您将获得以下内容。如果选择图像上的任意位置，则会删除该图像元素，选项卡页面将折叠回最初显示的内容：Displaystars.jpeg