创建 Edge 浏览器扩展教程(下)

创建 Edge 浏览器扩展教程(下)

    • 创建扩展教程,第 2 部分
      • 1:更新弹出窗口.html以包含按钮
      • 2:更新弹出窗口.html在浏览器选项卡顶部显示图像
      • 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>
<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 以发送消息

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

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,以备稍后使用:

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资源,以便可以在内容页面中使用。您可以通过在清单文件中添加以下条目来声明图像可以在所有浏览器选项卡中使用:

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

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

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

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

{"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:添加内容脚本的消息监听器

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

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

图示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全国三维数字化创新设计大赛湖北赛区省赛成功举办

须弥芥子&#xff0c;数字如海。10月14日—15日&#xff0c;2023 年数字科技文化节——第16届全国三维数字化创新设计大赛湖北赛区省赛暨产教联合体大会在武汉软件工程职业学院成功举行。 &#xff08;大赛全体专家领导合影&#xff09; 全国三维数字化创新设计大赛组委会副秘…

Windows 安装 jmeter

注&#xff1a;在安装Jmeter之前&#xff0c;请先检查下电脑有没有装JDK&#xff1a;开始->运行->然后输入cmd->进入命令行界面&#xff0c;输入java -version &#xff0c; 出现以下信息就是此电脑已安装了JDK&#xff1a; 下载地址 http://jmeter.apache.org/downlo…

C/C++程序设计和预处理

个人主页&#xff1a;仍有未知等待探索_C语言疑难,数据结构,小项目-CSDN博客 专题分栏&#xff1a;C语言疑难_仍有未知等待探索的博客-CSDN博客 目录 一、引言 二、程序的翻译环境和执行环境 1、什么是程序 2、程序的翻译环境 3、程序的执行环境 三、预处理 1、预定义符…

python爬虫分析基于python图书馆书目推荐数据分析与可视化

收藏关注不迷路 文章目录 前言一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、文章目录 前言 随着电子技术的普及和快速发展&#xff0c;线上管理系统被广泛的使用&#xff0c;有很多商业机构都在实现电子信息化管理&#xff0c;图书推荐也不例外&#xff0c…

windows协议详解之-RPC/SMB/LDAP/LSA/SAM域控协议关系

如果你在windows域控环境中&#xff0c;例如企业的网络中开启wireshark抓包&#xff0c;你一定会遇到一大堆各种各样的协议。不同于互联网服务&#xff08;大多基于HTTP&#xff09;&#xff0c;为了实现域控中各种各样的服务&#xff0c;windows的域控环境中采用了非常多的协议…

【JavaEE】Java的文件IO

文件IO操作 Linux 下的文件操作讲解Java中的文件操作 -- 对文件的增删改查Java中对文件内容的操作 -- 读写操作使用案例 Linux 下的文件操作讲解 在我的Linux栏目下有, 如有需要, 点击下面进行跳转: 内存级文件系统语言级别的文教操作磁盘文件 Java中的文件操作 – 对文件的…

程桌面管理软件Apple Remote Desktop mac中文介绍说明

Apple Remote Desktop mac是一款远程桌面管理软件。它可以让用户通过局域网或互联网连接到其他远程计算机&#xff0c;并实时监控和管理这些计算机。 使用Apple Remote Desktop&#xff0c;用户可以轻松远程操作和控制其他计算机的桌面。用户可以在远程计算机上查看、操控和键入…

风力发电功率预测(CEEMDAN-LSTM-CNN-CBAM模型,Python代码)

1.前言 1.1.运行效果&#xff1a;风力发电功率预测&#xff08;CEEMDAN-LSTM-CNN-CBAM模型&#xff0c;Python代码&#xff09;_哔哩哔哩_bilibili 1.2.环境库&#xff1a; 如果库版本不一样&#xff0c; 一般也可以运行&#xff0c;这里展示我运行时候的库版本&#xff0c;是…

J2EE的N层体系结构

J2EE平台采用了多层分布式应用程序模型&#xff0c;实现不同逻辑功能的应用程序被封装到不同的构件中&#xff0c;处于不同层次的构件可被分别部署到不同的机器中。 RMI/IIOP&#xff1a;RMI&#xff08;Remote Method Invocation&#xff0c;远程方法调用&#xff09;是Java的…

C语言每日一题(18)数组匹配

牛客网 BC156 牛牛的数组匹配 题目描述 描述 牛牛刚学会数组不久&#xff0c;他拿到两个数组 a 和 b&#xff0c;询问 b 的哪一段连续子数组之和与数组 a 之和最接近。 如果有多个子数组之和同样接近&#xff0c;输出起始点最靠左的数组。 输入描述&#xff1a; 第一行输…

网络安全https

http是明文的&#xff0c;相当于在网上裸奔&#xff0c;引出了https&#xff0c;大多数网站都转为了https&#xff0c;连非法的赌博网站有的都是https的。 1.https的网站是不是必须让用户装数字证书&#xff1f; 答&#xff1a;分两种&#xff0c;一种是单向认证&#xff0c;像…

【STM32】HAL库ADC多通道精准测量(采用VREFINT内部参考电压)

【STM32】HAL库ADC多通道精准测量&#xff08;采用VREFINT内部参考电压&#xff09; 文章目录 多通道测量VREFINTADC采样周期多通道配置 附录&#xff1a;Cortex-M架构的SysTick系统定时器精准延时和MCU位带操作SysTick系统定时器精准延时延时函数阻塞延时非阻塞延时 位带操作…

GCE的安装和使用

GCE的安装和使用 GCE的安装使用1. GCE的安装2. GCE的使用补充&#xff1a;一个简单的R脚本——kmerpdf.R&#xff0c;用于绘制kmer的种类和数量分布图 GCE的安装使用 一个基因组评估软件。其他同类型软件Genomescope 1. GCE的安装 Github官网&#xff1a;https://github.com…

【VictoriaMetrics】单机版配置

为方便查看,释义都已翻译成中文,本文配置基于VictoriaMetrics 1.87.1版本 bigMergeConcurrencyint用于大合并的最大 CPU 核数。设置为 0 时使用默认值cacheExpireDuration30m0s

Docker基础知识

文章目录 Docker Docker 一次构建&#xff0c;处处运行&#xff0c;类似于JVM 虚拟机是软件硬件&#xff08;需要Hypervisors实现硬件资源虚拟化&#xff09;&#xff1a; 资源占用大启动慢&#xff08;虚拟机是分钟级&#xff0c;Docker是秒级&#xff09;冗余步骤多 sha2…

冒泡排序:了解原理与实现

目录 原理 实现 性能分析 结论 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单但效率较低的排序算法。它重复地比较相邻的元素并交换位置&#xff0c;直到整个序列有序为止。虽然冒泡排序的时间复杂度较高&#xff0c;但在小规模数据集上仍然具有一定的实际应用价…

【JavaEE】CAS -- 多线程篇(7)

CAS 1. 什么是 CAS2. CAS 伪代码3. CAS 是怎么实现的4. CAS的应用4.1 实现原子类4.2 实现自旋锁 5. CAS 的 ABA 问题 1. 什么是 CAS CAS: 全称Compare and swap&#xff0c;字面意思:”比较并交换“能够比较和交换 某个寄存器中的值和内存中的值, 看是否相等, 如果相等, 则把另…

[support2022@cock.li].faust、[tsai.shen@mailfence.com].faust勒索病毒数据怎么处理|数据解密恢复

引言&#xff1a; 威胁网络安全的恶意软件不断涌现&#xff0c;而[support2022cock.li].faust勒索病毒则是其中的一员。这个网络黑暗角落的新星&#xff0c;以其数据绑架的方式&#xff0c;一度成为数据安全的威胁焦点。本文将探究[support2022cock.li].faust勒索病毒的运作方…

全是干货!2023年双十一买什么最划算、双十一值得买的好物推荐

在双十一前选购到好物&#xff0c;打败99.99%的人&#xff01;看了下日历马上就要到一年一度的购物节了&#xff0c;双十一都想好买什么了吗朋友们&#xff1f;双十一购物狂欢即将来临&#xff0c;你是否已经开始准备购买自己心仪的商品&#xff1f;在这个购物狂欢节中&#xf…

华为ERP,包含哪些内容?技术的先进性体现在哪里?

华为作为全球领先的信息和通信技术&#xff08;ICT&#xff09;解决方案提供商&#xff0c;其企业资源规划&#xff08;ERP&#xff09;系统是一个高度复杂且集成的管理软件平台&#xff0c;用于优化公司内部的业务流程和资源分配。华为ERP系统包括一系列模块和功能&#xff0c…