Dark Background and Light Text 扩展项目教程
1. 项目的目录结构及介绍
dark-background-light-text-extension/
├── README.md
├── LICENSE
├── package.json
├── rollup.config.mjs
├── tsconfig.json
├── src/
│ ├── background.ts
│ ├── content.ts
│ ├── options.html
│ ├── options.ts
│ ├── popup.html
│ ├── popup.ts
│ ├── styles/
│ │ ├── content.css
│ │ ├── options.css
│ │ ├── popup.css
│ ├── manifest.json
README.md
: 项目说明文档。LICENSE
: 项目许可证文件。package.json
: 项目依赖和脚本配置文件。rollup.config.mjs
: Rollup 构建配置文件。tsconfig.json
: TypeScript 配置文件。src/
: 源代码目录。background.ts
: 后台脚本文件。content.ts
: 内容脚本文件。options.html
: 选项页面 HTML 文件。options.ts
: 选项页面脚本文件。popup.html
: 弹出窗口 HTML 文件。popup.ts
: 弹出窗口脚本文件。styles/
: 样式文件目录。content.css
: 内容脚本样式文件。options.css
: 选项页面样式文件。popup.css
: 弹出窗口样式文件。
manifest.json
: 扩展的清单文件。
2. 项目的启动文件介绍
项目的启动文件主要是 src/background.ts
和 src/content.ts
:
background.ts
: 后台脚本文件,负责扩展的主要逻辑和事件监听。content.ts
: 内容脚本文件,负责在网页中注入样式和脚本。
3. 项目的配置文件介绍
-
package.json
: 包含了项目的依赖、脚本和其他元数据。例如:{ "name": "dark-background-light-text-extension", "version": "1.0.0", "scripts": { "build": "rollup -c rollup.config.mjs" }, "dependencies": { "typescript": "^4.0.0" } }
-
rollup.config.mjs
: Rollup 构建配置文件,用于打包和优化代码。import typescript from '@rollup/plugin-typescript'; export default { input: 'src/background.ts', output: { file: 'dist/background.js', format: 'iife' }, plugins: [ typescript() ] };
-
tsconfig.json
: TypeScript 配置文件,用于编译 TypeScript 代码。{ "compilerOptions": { "target": "es6", "module": "esnext", "outDir": "./dist", "rootDir": "./src", "strict": true } }
-
src/manifest.json
: 扩展的清单文件,包含了扩展的元数据和权限声明。{ "manifest_version": 2, "name": "Dark Background and Light Text", "version": "1.0.0", "background": { "scripts": ["dist/background.js"] }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["dist/content.js"], "css": ["dist/content.css"] } ] }
以上是 Dark Background and Light Text 扩展项目的基本教程,涵盖了项目的目录结构、启动文件和配置文件的介绍。