Svelte DevTools 开源项目教程

1. 项目的目录结构及介绍

Svelte DevTools 项目的目录结构如下：

svelte-devtools/
├── assets/
│   └── icon.png
├── dist/
│   ├── background.js
│   ├── content.js
│   └── panel.js
├── scripts/
│   ├── build.js
│   └── watch.js
├── src/
│   ├── background/
│   │   └── index.js
│   ├── content/
│   │   └── index.js
│   ├── panel/
│   │   ├── App.svelte
│   │   ├── index.js
│   │   └── components/
│   │       └── ...
│   └── manifest.json
├── .gitignore
├── package.json
├── README.md
└── rollup.config.js

目录结构介绍

• assets/: 存放项目所需的静态资源，如图标文件。
• dist/: 编译后的文件存放目录，包括 background.js, content.js, 和 panel.js。
• scripts/: 包含项目的构建脚本，如 build.js 和 watch.js。
• src/: 源代码目录，包含 background, content, 和 panel 三个主要部分。
  • background/: 后台脚本。
  • content/: 内容脚本。
  • panel/: 开发者工具面板的源代码，包括 Svelte 组件和入口文件。
• manifest.json: 扩展的清单文件，定义了扩展的配置和入口点。
• package.json: 项目的依赖和脚本配置文件。
• rollup.config.js: Rollup 构建配置文件。

2. 项目的启动文件介绍

Svelte DevTools 的启动文件主要位于 src/ 目录下：

• src/background/index.js: 后台脚本入口文件，负责处理扩展的后台逻辑。
• src/content/index.js: 内容脚本入口文件，负责与网页内容交互。
• src/panel/index.js: 开发者工具面板的入口文件，负责加载 Svelte 应用。

启动文件介绍

• background/index.js: 初始化后台服务，处理消息传递和状态管理。
• content/index.js: 注入到网页中，与 Svelte 应用进行通信。
• panel/index.js: 加载 Svelte 应用，展示开发者工具面板。

3. 项目的配置文件介绍

Svelte DevTools 的配置文件主要包括：

• manifest.json: 定义了扩展的基本信息、权限、入口点等。
• package.json: 定义了项目的依赖、脚本命令等。
• rollup.config.js: 定义了 Rollup 构建工具的配置。

配置文件介绍

• manifest.json:

  {
    "manifest_version": 2,
    "name": "Svelte DevTools",
    "version": "1.0.0",
    "description": "Svelte DevTools extension",
    "permissions": [
      "activeTab",
      "tabs",
      "http://*/*",
      "https://*/*"
    ],
    "background": {
      "scripts": ["dist/background.js"],
      "persistent": false
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["dist/content.js"]
      }
    ],
    "browser_action": {
      "default_icon": "assets/icon.png"
    },
    "devtools_page": "dist/panel.html"
  }
  

• package.json:

  {
    "name": "svelte-devtools",
    "version": "1.0.0",
    "description": "Svelte DevTools extension",
    "scripts": {
      "build": "node scripts/build.js",
      "watch": "node scripts/watch.js"
    },
    "dependencies": {
      "svelte": "^3.0.0"