当前位置：首页 > news >正文

[手写系列]从0到1开发并上线Edge浏览器插件

news 来源：原创 2025/6/5 19:26:21

[手写系列]从0到1开发并上线Edge浏览器插件

一、实战开发

我们将从0到1创建一个实用的"页面分析助手"插件，它可以显示当前页面的字数统计、阅读时间和主要关键词。

官方插件文档链接：https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/landing/
项目全部代码链接(Github)：https://github.com/ziyifast/ziyifast-code_instruction/tree/main/js_demo/browser-extension/ziyi-page-analyzer

整体项目结构：

ziyi-page-analyzer/
├── manifest.json          # 插件配置文件
├── popup/
│   ├── popup.html         # 弹出窗口HTML,用于展示阅读时长所需时间等
│   ├── popup.css          # 弹出窗口样式
│   └── popup.js           # 弹出窗口逻辑，插件核心逻辑，读取html页面，根据字符数预估阅读时长
├── content.js             # 页面内容脚本
└── icons/├── icon16.png         # 16x16图标├── icon48.png         # 48x48图标└── icon128.png        # 128x128图标

在这里插入图片描述

1.1 环境准备

安装Microsoft Edge浏览器
安装代码编辑器（推荐VS Code）
在Edge中启用开发者模式：

打开Edge浏览器
访问 edge://extensions/
打开右上角的"开发人员模式"开关

1.2 manifest.json插件配置文件

主要实现对插件icon、描述、版本的配置等

{"manifest_version": 3,"name": "ziyi-页面分析助手","version": "1.0","description": "分析当前页面的内容，提供字数统计和阅读时间估算","icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"},"action": {"default_popup": "popup/popup.html","default_icon": {"16": "icons/icon16.png","48": "icons/icon48.png"}},"permissions": ["activeTab", "scripting"],"content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"],"run_at": "document_idle"}]}

1.3 popup插件弹窗逻辑

①popup.html插件弹窗内容

主要实现点击插件后的弹窗页面。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ziyi-页面分析助手</title><link rel="stylesheet" href="popup.css">
</head>
<body><div class="container"><h1>ziyi-页面分析助手</h1><div class="stats-container"><div class="stat-card"><h2>字数统计</h2><p id="word-count">0</p></div><div class="stat-card"><h2>阅读时间</h2><p id="reading-time">0分钟</p></div></div><div class="keywords-container"><h2>关键词</h2><div id="keywords-list"></div></div><button id="analyze-btn">分析当前页面</button></div><script src="popup.js"></script>
</body>
</html>

②popup.css插件弹窗样式

主要实现插件弹窗页面的样式

body {width: 300px;padding: 15px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f8f9fa;color: #212529;}.container {display: flex;flex-direction: column;gap: 15px;}h1 {font-size: 1.2rem;margin: 0 0 10px 0;color: #0d6efd;text-align: center;}.stats-container {display: flex;justify-content: space-between;gap: 10px;}.stat-card {flex: 1;background: white;border-radius: 8px;padding: 12px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);text-align: center;}.stat-card h2 {font-size: 0.9rem;margin: 0 0 5px 0;color: #6c757d;}.stat-card p {font-size: 1.5rem;font-weight: bold;margin: 0;color: #0d6efd;}.keywords-container {background: white;border-radius: 8px;padding: 12px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);}.keywords-container h2 {font-size: 0.9rem;margin: 0 0 10px 0;color: #6c757d;}#keywords-list {display: flex;flex-wrap: wrap;gap: 8px;}.keyword {background-color: #e7f1ff;color: #0d6efd;padding: 4px 8px;border-radius: 12px;font-size: 0.8rem;}#analyze-btn {background-color: #0d6efd;color: white;border: none;border-radius: 6px;padding: 10px;font-weight: bold;cursor: pointer;transition: background-color 0.2s;}#analyze-btn:hover {background-color: #0b5ed7;}

③popup.js弹窗后逻辑

实现插件点击后，触发弹窗，执行的动作。比如统计当前页面字符数等

这里是我们实现本文章插件的核心逻辑。用户点击插件，触发弹窗后，会执行js脚本，统计当前页面所有元素字符，然后预估读完的时间。

document.addEventListener('DOMContentLoaded', () => {const analyzeBtn = document.getElementById('analyze-btn');const wordCountEl = document.getElementById('word-count');const readingTimeEl = document.getElementById('reading-time');const keywordsListEl = document.getElementById('keywords-list');// 从当前标签页获取分析数据async function getPageData() {const [tab] = await chrome.tabs.query({active: true, currentWindow: true});// 使用chrome.scripting.executeScript执行内容脚本const results = await chrome.scripting.executeScript({target: {tabId: tab.id},func: analyzePageContent});return results[0].result;}// 分析页面内容的函数（将在内容脚本中执行）function analyzePageContent() {// 获取页面主要内容const bodyText = document.body.innerText || "";// 计算字数const words = bodyText.trim().split(/\s+/).filter(word => word.length > 0);const wordCount = words.length;// 估算阅读时间（按200字/分钟）const readingTimeMinutes = Math.ceil(wordCount / 200);// 提取关键词（简化版）const wordFrequency = {};words.forEach(word => {const cleanWord = word.toLowerCase().replace(/[^\w]/g, '');if (cleanWord.length > 3) {wordFrequency[cleanWord] = (wordFrequency[cleanWord] || 0) + 1;}});// 获取前5个高频词const keywords = Object.entries(wordFrequency).sort((a, b) => b[1] - a[1]).slice(0, 5).map(entry => entry[0]);return { wordCount, readingTimeMinutes, keywords };}// 更新UI显示分析结果function updateUI(data) {wordCountEl.textContent = data.wordCount.toLocaleString();readingTimeEl.textContent = `${data.readingTimeMinutes}分钟`;keywordsListEl.innerHTML = '';data.keywords.forEach(keyword => {const keywordEl = document.createElement('div');keywordEl.classList.add('keyword');keywordEl.textContent = keyword;keywordsListEl.appendChild(keywordEl);});}// 点击分析按钮analyzeBtn.addEventListener('click', async () => {try {const pageData = await getPageData();updateUI(pageData);} catch (error) {console.error('分析失败:', error);alert('无法分析当前页面，请确保页面已完全加载');}});// 页面加载时自动分析当前页面getPageData().then(updateUI).catch(console.error);});

1.4 content.js 页面加载逻辑

页面加载完成时，执行的逻辑

// 这个脚本会在页面加载时自动执行
console.log("ziyi-页面分析助手内容脚本已加载");// 这里可以添加在页面上下文中直接执行的代码
// 例如：监听页面变化并通知后台脚本

1.5 icons 插件图标

这里推荐一个在线平台，生成icon：https://uutool.cn/chrome-icon/

上传图片之后，即可生成不同大小的icon，同时可免费下载，然后将其放到icons目录下。

1.6 安装

在Edge浏览器中访问 edge://extensions/
打开"开发人员模式"开关
点击"加载解压缩的扩展"
选择你的插件目录（包含manifest.json的目录）
插件图标将出现在浏览器工具栏

1.7 使用

访问任何网页（如新闻文章）
点击工具栏中的插件图标
插件将显示当前页面的：总字数、预估阅读时间、关键词分析

效果：
在这里插入图片描述

二、打包上线

主要流程：

完成开发后，访问Microsoft Edge 外接程序开发人员中心
创建新提交
上传ZIP格式的插件包
填写详细信息并提交审核

2.1 打包插件

将插件目录打包为zip压缩包。
在这里插入图片描述

2.2 申请开发者身份

在Edge浏览器上线插件需要Micro开发者身份。

申请账号，开通开发者：https://partner.microsoft.com/zh-cn/dashboard/microsoftedge/overview
在Program模块选择Microsoft Edge项目，点击Get started
填写申请基本信息

注意：申请信息的城市和身份需要填写缩写。比如城市为四川成都，省份就填写SC，城市就填写CD。
问题：报错Error code 2931
解决：https://learn.microsoft.com/zh-cn/answers/questions/1923071/edge-code-2931-correlation-id-7348301b-da4f-4898-b

在这里插入图片描述