helloWord-创建一个微软EDGE浏览器扩展插件吧

非优秀程序员
1,375 阅读6分钟

概述

此教程的目标是构建一个 Microsoft 边缘扩展，从空目录开始。您正在构建一个扩展，弹出美国宇航局当天的图片。在此教程中，您将学习如何创建扩展：

  • 创建文件。manifest.json
  • 添加图标。
  • 打开默认弹出式对话。
  • 将 JavaScript 库注入扩展
  • 将扩展资产暴露在浏览器选项卡中
  • 将内容页面包含在现有浏览器选项卡中
  • 让内容页面收听弹出窗口的消息并做出响应

在开始之前

要在此教程中测试您正在构建的已完成扩展，请下载源代码。

第 1 步：创建一个清单. json 文件

每个扩展包必须在根部有一个文件。清单提供了扩展、扩展包版本、扩展名称和描述等详细信息。manifest.json

以下代码片段概述了文件中所需的基本信息。manifest.json

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 2,
    "description": "An extension to display the NASA picture of the day."
}

第 2 步：添加图标

首先创建项目中的目录来存储图标图像文件。图标用于用户选择启动扩展的按钮的背景图像。icons

工具栏上的图标以打开扩展

工具栏上的图标以打开扩展

对于图标，我们建议使用：

  • PNG图标的格式，但您也可以使用，或格式。BMP``GIF``ICO``JPEG
  • 图像为 128 x 128 px，如有必要，浏览器会对图像进行调整。

项目目录应与以下结构类似。

└── part1
    ├── _manifest.json
    └── icons
        ├── nasapod16x16.png
        ├── nasapod32x32.png
        ├── nasapod48x48.png
        └── nasapod128x128.png

接下来，将图标添加到文件中。使用图标信息更新文件，以便它与以下代码片段匹配。本文前面提到的下载文件中提供了以下代码中列出的文件。manifest.json``manifest.json``png

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 2,
    "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"
    }
}

步骤 3：打开默认弹出式对话

现在，创建一个文件来运行时，用户启动您的扩展。创建在名为 ""目录"中命名的 HTML 文件。当用户选择图标以启动扩展时，将显示为模态对话。HTML``popup.html``popup``popup/popup.html

将以下代码片段中的代码添加到显示星星图像。popup.html

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>NASA picture of the day</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Display the stars image" />
        </div>
    </body>
</html>

确保将图像文件添加到图像文件夹。项目目录应与以下结构类似。images/stars.jpeg

└── part1
    ├── _manifest.json
    ├── icons
    │   ├── nasapod16x16.png
    │   ├── nasapod32x32.png
    │   ├── nasapod48x48.png
    │   └── nasapod128x128.png
    ├── images
    │   └── stars.jpeg
    └── popup
        └── popup.html

最后，请确保在下面注册弹出窗口，如下图代码片段中所示。manifest.json``browser_action

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 2,
    "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"
    },
    "browser_action": {
        "default_popup": "popup/popup.html"
    }
}

第四步 引入JavaScript

1.实现从弹出窗口中删除图像，并将其替换为按钮

首先，使用显示标题和按钮的一些直截了当的标记更新您的文件。您很快就会编程该按钮，但目前，只需包括一个空的 JavaScript 文件的参考。这里是更新 Html 。popup.html``popup.js

<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>

更新和打开扩展后，弹出窗口会打开显示按钮。

弹出窗口.html选择扩展图标后显示

弹出窗口.html选择扩展图标后显示

2. 更新策略，以显示浏览器选项卡顶部的图像

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

请记住，每个选项卡页面都以自己的线程运行。此外，扩展使用不同的线程。首先，创建注入到选项卡页面的内容脚本。然后，从弹出窗口向在选项卡页面上运行的内容脚本发送消息。内容脚本接收消息，该消息描述了应显示的图像。

  1. 创建弹出式 JavaScript 以发送消息

首先，创建并添加代码，以便向尚未创建的内容脚本发送消息，您必须暂时创建该脚本并将其注入浏览器选项卡。为此，以下代码将在弹出式显示按钮中添加事件。popup/popup.js``onclick

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

在该事件中，请查找当前的浏览器选项卡。然后，使用扩展 API 向该选项卡发送消息。onclick``chrome.tabs.sendmessage

在该消息中，您必须将 URL 包含到要显示的图像中。此外，发送唯一的 ID 以分配给插入的图像。您可以选择让内容插入 JavaScript 生成该内容，但由于后来变得明显的原因，请在此处生成该唯一 ID 并将其传递给尚未创建的内容脚本。popup.js

以下代码片段概述了更新的代码 。此外，请通过当前选项卡 ID，本文稍后将使用该选项卡。popup/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.extension.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());
            }
        });
    };
}

4. 让您的星星.jpeg从任何浏览器选项卡中获取

你可能想知道为什么，当你通过必须使用铬扩展API，而不是只是通过相对网址没有额外的前缀，如在前一节。顺便说一句，附加图像返回的额外前缀看起来就像以下几个样子。images/stars.jpeg``chrome.extension.getURL``getUrl

extension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg

原因是您使用元素属性将图像注入内容页面。内容页面在运行与运行扩展的线程不相同的唯一线程上运行。您必须将静态图像文件作为 Web 资产进行曝光，以便其正确工作。src``img

在文件中添加另一个条目，以声明图像可用于所有浏览器选项卡。该条目如下（当您添加即将出现的内容脚本声明时，应在下面的完整文件中看到它）。manifest.json``manifest.json

"web_accessible_resources": [
    "images/*.jpeg"
]

现在，您已在文件中编写了代码，以便向嵌入当前活动选项卡页面的内容页面发送消息，但您尚未创建并注入该内容页面。现在就做。popup.js

5. 更新您的清单.json 以获取内容和 Web 访问

更新，包括和如下。manifest.json``content-scripts``web_accessible_resources

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 2,
    "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"
    },
    "browser_action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        "images/*.jpeg"
    ]
}

您添加的部分是 。属性设置为，这意味着当每个选项卡加载时，所有文件都注入到所有浏览器选项卡页面中。可注入的允许文件类型为 JavaScript 和 CSS。您还添加了 。您可以从该节顶部提到的下载中包括这一点。content_scripts``matches``<all_urls>``content_scripts``libjquery.min.js

6. 添加 jQuery 并了解相关线程

在您正在注入的内容脚本中，计划使用 jQuery （）。您添加了 jQuery 的小型版本，并将其放入您的扩展包中。这些内容脚本以单独的沙盒运行，这意味着注入页面的 jQuery 不会与内容共享。$``lib\jquery.min.js``popup.js

请记住，即使浏览器选项卡上加载的网页上运行了 JavaScript，注入的任何内容也无法访问该内容。注入的 JavaScript 只需访问该浏览器选项卡中加载的实际 DOM。

7. 添加内容脚本消息收听器

下面是根据您的部分注入到每个浏览器选项卡页面的文件。content-scripts\content.js``manifest.json``content-scripts

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" });
});

请注意，上述 JavaScript 所做的只是使用扩展 API 方法注册。此听众等待像您之前使用扩展 API 方法从描述中发送的消息。listener``chrome.runtime.onMessage.addListener``popup.js``chrome.tabs.sendMessage

该方法的第一个参数是一个函数，其第一个参数请求是传递消息的详细信息。请记住，从，当你使用的方法，这些属性的第一个参数是和。addListener``popup.js``sendMessage``url``imageDivId

当一个事件由听者处理时，第一个参数的功能将运行。该函数的第一个参数是具有所分配属性的对象。该功能只需处理三个 jQuery 脚本行。sendMessage

  • 第一个脚本行动态地将一个<样式> 部分插入 DOM 头，您必须将其分配为元素中的类。slide-image``img
  • 第二个脚本行在浏览器选项卡的下方附加一个元素，该选项卡分配了类以及该图像元素的 ID。img``body``slide-image``imageDivId
  • 第三个脚本行添加了覆盖整个图像的事件，允许用户在图像的任意任何地方进行选择，并且该图像从页面中删除（以及它是事件收听者）。click

8. 添加功能以在选择时删除显示的图像

现在，当您浏览到任何页面并选择扩展图标时，弹出式菜单显示如下。

弹出窗口.html选择扩展图标后显示

弹出窗口.html选择扩展图标后显示

当您选择按钮时，您会得到下面的内容。如果您选择图像上的任意一个，则删除该图像元素，并将标签页面崩溃回最初显示的内容。Display``stars.jpeg

浏览器中显示的图像

浏览器中显示的图像

您创建了一个扩展，该扩展成功从扩展图标弹出窗口发送消息，并动态插入 JavaScript 作为浏览器选项卡上的内容运行。注入的内容设置图像元素，以显示您的静态星 jpeg。

avatar
文章
阅读
粉丝