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

创建一个谷歌插件项目dome上线流程+源码

news 来源：原创 2025/6/20 16:18:33

创建一个简单的 Chrome 扩展程序，其主要功能是 JSON 格式化。用户可以通过点击扩展图标打开一个弹出窗口，在弹出窗口中输入或粘贴 JSON 数据，然后点击格式化按钮来格式化 JSON 数据

谷歌插件（即 Chrome 扩展程序）主要设计用于 Google Chrome 浏览器，但许多基于 Chromium 内核的浏览器也支持这些插件。以下是一些可以使用 Chrome 插件的浏览器：

Google Chrome：官方浏览器，支持所有 Chrome 扩展程序。
Microsoft Edge：基于 Chromium 内核，支持 Chrome 扩展程序。
Brave：基于 Chromium 内核，支持 Chrome 扩展程序。
Opera：基于 Chromium 内核，支持 Chrome 扩展程序。
Vivaldi：基于 Chromium 内核，支持 Chrome 扩展程序。
360 浏览器：基于 Chromium 内核，部分支持 Chrome 扩展程序。
QQ 浏览器：基于 Chromium 内核，部分支持 Chrome 扩展程序。
搜狗浏览器：基于 Chromium 内核，部分支持 Chrome 扩展程序。

注意事项：

兼容性：虽然这些浏览器都基于 Chromium 内核，但某些特定功能或 API 可能会有差异，导致某些扩展程序在不同浏览器上表现不一致。

1. 创建项目结构

json-formatter-extension/
│
├── img/
│ ├── logo.png
│ └── download-icon.png
│
├── html/
│ └── popup.html
│
├── popup.js
│── manifest.json
└── styles.css

2. 更新 manifest.json

{"manifest_version": 3, // 指定 Chrome 扩展程序使用的清单文件版本。Manifest V3 引入了许多变化，包括使用 Service Worker 作为后台脚本，提高了性能和安全性。"name": "JSON Formatter", // 定义扩展程序的名称，这将在 Chrome 浏览器的扩展管理页面和其他地方显示。"version": "1.0", // 指定扩展程序的版本号。每次更新扩展程序时，都需要增加版本号以便 Chrome 知道这是一个新的版本。"description": "A simple Chrome extension to format JSON data.", // 提供扩展程序的简短描述，帮助用户了解扩展程序的功能。"author": "Your Name", // 指定扩展程序的作者，可以是个人或组织的名字。"icons": { // 定义扩展程序的图标。不同尺寸的图标用于不同的场合，例如扩展管理页面、工具栏等。"48": "img/logo.png", // 48x48 像素的图标。"128": "img/logo.png" // 128x128 像素的图标。},"action": { // 定义扩展程序图标的点击行为。"default_icon": "img/logo.png", // 指定扩展程序图标的路径。"default_popup": "html/popup.html" // 指定点击扩展图标时显示的弹出窗口的 HTML 文件路径。},"permissions": [ // 定义扩展程序所需的权限。"activeTab" // 允许访问当前活动标签页的信息。],"web_accessible_resources": [ // 定义可以被网页访问的资源。{"resources": ["styles.css"], // 指定可以被网页访问的资源文件。"matches": ["<all_urls>"] // 指定这些资源可以被哪些网页访问。"<all_urls>" 表示所有网页都可以访问这些资源。}]
}

3. 创建 popup.html

popup.html 是弹出窗口的 HTML 文件

<!-- html/popup.html -->
<!DOCTYPE html>
<html>
<head><title>JSON Formatter</title><link rel="stylesheet" type="text/css" href="../styles.css">
</head>
<body><h1>JSON Formatter</h1><textarea id="jsonInput" placeholder="Paste your JSON here..."></textarea><button id="formatButton">Format JSON</button><pre id="formattedJson"></pre><script src="../popup.js"></script>
</body>
</html>

4. 创建 popup.js

popup.js 是弹出窗口的 JavaScript 文件，用于处理 JSON 格式化逻辑。

// popup.jsdocument.getElementById('formatButton').addEventListener('click', () => {const jsonInput = document.getElementById('jsonInput').value;try {const formattedJson = JSON.stringify(JSON.parse(jsonInput), null, 2);document.getElementById('formattedJson').textContent = formattedJson;} catch (error) {document.getElementById('formattedJson').textContent = 'Invalid JSON: ' + error.message;}
});

5. 创建 styles.css

styles.css 用于美化弹出窗口。

/* styles.css */body {width: 400px;padding: 10px;font-family: Arial, sans-serif;
}h1 {font-size: 16px;margin-bottom: 10px;
}textarea {width: 100%;height: 100px;margin-bottom: 10px;padding: 5px;box-sizing: border-box;
}button {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;cursor: pointer;margin-bottom: 10px;
}button:hover {background-color: #45a049;
}pre {width: 100%;padding: 10px;background-color: #f4f4f4;border: 1px solid #ddd;white-space: pre-wrap;       /* Since CSS3 */white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */white-space: -pre-wrap;      /* Opera 4-6 */white-space: -o-pre-wrap;    /* Opera 7 */word-wrap: break-word;       /* Internet Explorer 5.5+ */box-sizing: border-box;
}

6. 准备图标

确保在 img/ 目录下有 logo.png 和 download-icon.png 图标文件。你可以使用任何图像编辑工具创建这些图标

7. 加载和测试插件

1.打开Chrome浏览器，输入 chrome://extensions/进入扩展程序页面。
2.打开右上角的“开发者模式”。
3.点击“加载已解压的扩展程序”，选择你的项目目录。
4.现在你应该能看到你的扩展程序出现在扩展列表中，点击图标可以查看弹出窗口

8. 调试和改进

使用Chrome开发者工具调试你的扩展程序：
打开Chrome浏览器，输入chrome://extensions/进入扩展程序页面。
找到你的扩展程序，点击“背景页”或“弹出窗口”下的“检查视图”来打开开发者工具。
在控制台中查看日志信息，调试代码。

9. 发布插件

访问 Chrome Web Store Developer Dashboard。
注册开发者账号并支付一次性费用。
按照指引打包你的扩展程序并提交审核。

打包扩展程序

在项目目录中创建一个 zip 文件，包含所有文件和文件夹。
在 chrome://extensions/ 页面，点击“打包扩展程序”。
选择你的项目目录和私钥文件（如果没有私钥文件，可以创建一个新的）。
下载生成的 .crx 文件和 .pem 私钥文件。

提交审核

登录 Chrome Web Store Developer Dashboard。
点击“添加新项目”。
填写扩展程序的信息，上传图标和截图。、
上传 .crx 文件。
提交审核，等待批准。

demo源码地址(已修改功能目录):

https://gitee.com/gaiya001/chrome.git