成都网站制作需要多少钱,招聘网站开发费用,wordpress底部加上自己的版权信息,馆陶县网站创建 Edge 浏览器扩展教程#xff08;下#xff09; 创建扩展教程#xff0c;第 2 部分1#xff1a;更新弹出窗口.html以包含按钮2#xff1a;更新弹出窗口.html在浏览器选项卡顶部显示图像3#xff1a;创建弹出式 JavaScript 以发送消息4#xff1a;从任何浏览器选项卡… 创建 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?tabsv3
1更新弹出窗口.html以包含按钮
首先在之前创建的弹出文件夹中的popup.html文件中我们将添加包含按钮的标题。我们还将在稍后的步骤中对该按钮进行编程但现在首先包含对空的JavaScript文件的引用。
以下是一个更新后的HTML文件示例
html
headmeta charsetutf-8 /stylebody {width: 500px;}button {background-color: #336dab;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;}/style
/head
bodyh1Display the NASA picture of the day/h1h2(select the image to remove)/h2button idsendmessageidDisplay/buttonscript srcpopup.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。由于附加的图像返回一个额外的前缀所以您需要使用以下代码来获取图像的URLchrome.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} classslide-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
