keywords: Chrome 插件, 项目文件, manifest.json, 项目结构, 版本控制

description: 本章讲解如何从零开始创建 Chrome 插件项目,包括创建项目文件夹、了解项目结构和编写 manifest.json 文件。确保项目结构清晰,代码管理便捷。


在本章中,我们将从零开始创建我们的 Chrome 插件项目。你将学会如何创建项目文件夹,了解项目的结构,并编写必要的 manifest.json 文件来配置插件。

创建项目文件夹

首先,我们需要为我们的插件创建一个项目文件夹。在你的计算机上选择一个合适的位置,然后按照以下步骤创建文件夹:

  1. 在你的计算机上打开文件资源管理器(Windows)或 Finder(Mac)。
  2. 在你希望存放项目的路径下,右键选择“新建文件夹”。
  3. 将文件夹命名为“TranslatorDictionaryExtension”。
  1. # 使用命令行创建项目文件夹
  2. mkdir TranslatorDictionaryExtension
  3. cd TranslatorDictionaryExtension

项目结构介绍

一个典型的 Chrome 插件项目通常包括以下几个文件和文件夹:

  • manifest.json:插件的配置文件。
  • popup.html:插件的弹出页面。
  • popup.js:处理弹出页面逻辑的脚本文件。
  • content.js:内容脚本,用于与网页进行交互。
  • background.js:后台脚本,用于处理复杂逻辑和长期任务。
  • styles/:存放样式文件的文件夹。
  • images/:存放插件图标和其他图片资源的文件夹。

确保项目结构清晰、文件命名规范,有助于后续开发和维护。

  1. TranslatorDictionaryExtension/
  2. ├── manifest.json
  3. ├── popup.html
  4. ├── popup.js
  5. ├── content.js
  6. ├── background.js
  7. ├── styles/
  8. └── popup.css
  9. └── images/
  10. ├── icon16.png
  11. ├── icon48.png
  12. └── icon128.png

编写 manifest.json 文件

manifest.json 文件是 Chrome 插件的核心配置文件,它描述了插件的基本信息和权限。我们将创建并编写这个文件,确保插件能被 Chrome 浏览器识别和加载。

在“TranslatorDictionaryExtension”文件夹内,新建一个名为 manifest.json 的文件,并添加以下内容:

  1. {
  2. "manifest_version": 3,
  3. "name": "Translator and Dictionary Extension",
  4. "version": "1.0",
  5. "description": "A Chrome extension that translates selected text and provides dictionary definitions.",
  6. "permissions": [
  7. "activeTab",
  8. "storage",
  9. "contextMenus",
  10. "https://translate.googleapis.com/",
  11. "https://www.dictionaryapi.com/"
  12. ],
  13. "background": {
  14. "service_worker": "background.js"
  15. },
  16. "action": {
  17. "default_popup": "popup.html",
  18. "default_icon": {
  19. "16": "images/icon16.png",
  20. "48": "images/icon48.png",
  21. "128": "images/icon128.png"
  22. }
  23. },
  24. "icons": {
  25. "16": "images/icon16.png",
  26. "48": "images/icon48.png",
  27. "128": "images/icon128.png"
  28. },
  29. "content_scripts": [
  30. {
  31. "matches": ["<all_urls>"],
  32. "js": ["content.js"]
  33. }
  34. ]
  35. }

解释 manifest.json 文件内容

  • manifest_version: 说明当前使用的 manifest 规范版本。我们使用的是最新的版本 3。
  • name: 插件的名称,会显示在 Chrome 扩展管理页面和 Chrome Web Store 中。
  • version: 插件的版本号。
  • description: 插件的简要描述。
  • permissions: 插件需要的权限,如访问活动标签页、存储、右键菜单和 API 请求权限。
  • background: 指定后台脚本文件,使用 service worker 来处理后台逻辑。
  • action: 配置插件的弹出页面和图标。
  • icons: 定义插件的图标。
  • content_scripts: 配置内容脚本,并指定在哪些页面上注入这些脚本。

提交代码到版本控制

为了保证项目的版本控制和备份,我们建议使用 Git 来管理项目。以下是初始化 Git 仓库并提交初始代码的步骤:

  1. # 初始化 Git 仓库
  2. git init
  3. # 添加所有文件到 Git 仓库
  4. git add .
  5. # 提交初始代码
  6. git commit -m "Initial commit with project structure and manifest.json"

通过以上步骤,我们已经完成了项目的初始设置,为后续的开发打下了基础。