11-03 02:34 阅读 388

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

概述

此教程的目标是构建一个 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>     <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选择扩展图标后显示

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

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

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

创建弹出式 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}" /> `     );     $("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. 添加功能以在选择时删除显示的图像

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