开源项目 `browser-extension` 使用教程

开源项目 browser-extension 使用教程

browser-extensionBrowser extension for Linkwarden项目地址:https://gitcode.com/gh_mirrors/browsere/browser-extension

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

browser-extension/
├── src/
│   ├── background/
│   ├── content/
│   ├── options/
│   ├── popup/
│   ├── styles/
│   ├── manifest.json
│   └── ...
├── dist/
├── docs/
├── .gitignore
├── package.json
├── README.md
└── ...

• src/: 源代码目录，包含扩展的主要功能代码。
  • background/: 后台脚本文件。
  • content/: 内容脚本文件。
  • options/: 选项页面文件。
  • popup/: 弹出页面文件。
  • styles/: 样式文件。
  • manifest.json: 扩展的清单文件。
• dist/: 构建后的输出目录。
• docs/: 文档目录。
• .gitignore: Git忽略文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 manifest.json，它定义了扩展的基本信息和启动配置。

{
  "manifest_version": 2,
  "name": "Browser Extension",
  "version": "1.0",
  "description": "A browser extension example.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["src/background/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "src/popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_ui": {
    "page": "src/options/options.html",
    "open_in_tab": true
  }
}

• background.scripts: 后台脚本文件路径。
• browser_action.default_popup: 弹出页面的HTML文件路径。
• options_ui.page: 选项页面的HTML文件路径。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，它包含了项目的依赖、脚本和其他配置信息。

{
  "name": "browser-extension",
  "version": "1.0.0",
  "description": "A browser extension example.",
  "main": "src/background/background.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-dev-server": "^3.11.2"
  }
}

• scripts: 定义了构建和启动服务的脚本。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

以上是 browser-extension 项目的基本使用教程，希望对你有所帮助。

browser-extensionBrowser extension for Linkwarden项目地址:https://gitcode.com/gh_mirrors/browsere/browser-extension