Microsoft Edge 浏览器插件开发教程

最新推荐文章于 2024-10-11 22:20:17 发布

Zero_Dot_Nine

最新推荐文章于 2024-10-11 22:20:17 发布

阅读量142

点赞数 2

文章标签： microsoft

本文链接：https://blog.csdn.net/m0_75100181/article/details/142797381

版权

要为Edge浏览器开发一个SM4插件，你需要遵循WebExtension API的标准。以下是一个简单的SM4加密插件的示例结构，包括基本的HTML、JavaScript和manifest文件。请根据需要扩展功能。

1. 创建项目结构

my-plugin/
├── manifest.json
├── popup.html
├── popup.js
└── helloworld.js

2. manifest.json

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple Hello World extension for Edge.",
  "permissions": [],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

3. popup.html

创建弹出窗口html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 10px;
        }
    </style>
    <script src="popup.js" defer></script>
    <script type="module">
        import { showHelloWorld } from './helloworld.js';
        document.addEventListener('DOMContentLoaded', showHelloWorld);
    </script>
</head>
<body>
    <h1 id="message"></h1>
    <p>This is a simple Edge extension.</p>
</body>
</html>

4. popup.js

document.addEventListener('DOMContentLoaded', function () {
    const message = document.getElementById('message');
    message.textContent = "Hello, World!";
});

5. helloworld.js

function showHelloWorld() {
    alert("Hello, World!");
}

// 如果需要在其他地方调用此函数，可以导出它
export { showHelloWorld };

6. 创建图标

为插件创建一些图标。可以使用任何图形编辑工具（如 Photoshop 或在线工具）创建图标（或者直接在网上找图片），并将它们命名为 icon16.png、icon48.png 和 icon128.png，并放置在同一文件夹中。确保图标的尺寸分别为 16x16、48x48 和 128x128 像素。