挑战：成为微软EDGE扩展插件的创造者

用JavaScript构建Microsoft Edge浏览器扩展插件：一步步指南

创建项目文件夹和清单文件

踏上构建Edge扩展之旅的第一步，是建立一个有序的家，即一个名为"EdgeExtension"的根目录。在这里，manifest.json将诞生，它就像扩展插件的身份证，存储着名称、版本和权限等重要信息。

解读manifest.json

"manifest.json"是扩展插件的灵魂，包含了它的基本属性：

• name : 您的扩展插件的名片，短小精悍、印象深刻。
• version : 记录扩展插件的版本，随着更新不断递增。
• manifest_version : 清单文件的版本号，目前是2。
• description : 一句话概括扩展插件的作用，让用户一目了然。
• content_scripts : 定义扩展插件的内容脚本，在网页中运行JavaScript，修改网页内容。

添加图片功能

我们的扩展插件的核心目标之一，是在浏览器中展示美国宇航局的每日图片。为此，我们在"content_scripts"中加入了以下代码：

{
  "matches": ["https://apod.nasa.gov/apod/*"],
  "js": ["content.js"]
}

这表明扩展插件将在特定网页上运行，并加载一个名为"content.js"的JavaScript文件。

编写content.js

"content.js"包含在网页上下文中运行的JavaScript代码。在这里，我们书写功能代码：

• 从美国宇航局网站获取每日图片。
• 在浏览器中显示图片。

fetch("https://apod.nasa.gov/apod/astropix.html")
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const imageUrl = doc.querySelector("img[class='main_image']").src;

    const image = document.createElement("img");
    image.src = imageUrl;
    image.style.position = "fixed";
    image.style.top = "0";
    image.style.left = "0";
    image.style.width = "100%";
    image.style.height = "100%";
    document.body.appendChild(image);
  });

发布扩展插件

完成这些步骤，您已经成功构建了一个Edge扩展插件，现在可以将其发布到扩展商店，让世界欣赏。

常见问题解答

• Q：如何调试扩展插件？
  A：在Edge中打开"扩展"页面，勾选"开发者模式"，然后单击"加载已解压的扩展程序"，选择您的扩展插件文件夹即可。

• Q：如何在不同的网页上使用内容脚本？
  A：在manifest.json的"content_scripts"中添加更多"matches"项，指定扩展插件在哪些网页上运行。

• Q：如何从外部源获取数据？
  A：使用fetch() API或第三方库，如Axios，从外部URL请求数据。

• Q：如何处理错误？
  A：使用try-catch块捕获错误，并使用console.log()打印错误消息。

• Q：如何更新扩展插件？
  A：递增manifest.json中的"version"，然后重新发布扩展插件。