chrome插件：一个基于webpack + react的chrome 插件项目模板-Toy模板网

这篇具有很好参考价值的文章主要介绍了chrome插件：一个基于webpack + react的chrome 插件项目模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

chrome插件：一个基于webpack + react的chrome 插件项目模板,JavaScript/Node.js,chrome,webpack,react.js

项目结构

$ tree -L 1
.
├── README.md
├── node_modules             # npm依赖
├── package.json             # 详细依赖
├── pnpm-lock.yaml 
├── public                   # 里边包含dist，安装的时候安装这个目录即可
├── src                      # 源码文件
└── webpack.config.js        # webpack打包配置

主要的文件

manifest.json

{
  "name": "GoodDev",
  "manifest_version": 2,
  "version": "0.0.1",
  "description": "前端开发元素快速定位的chrome插件",

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "GoodDev",
    "default_popup": "dist/popup/popup.html"
  },

  "options_page": "dist/options/options.html",

  "permissions": ["tabs", "activeTab", "storage"],

  "background": {
    "scripts": [
	    "libs/webextension-polyfill.min.js", 
	    "dist/background/background.js"
    ]
  },

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_idle",
      "js": [
        "libs/jquery/jquery.min.js",
        "libs/webextension-polyfill.min.js",
        "dist/content/content.js"
      ]
    }
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

package.json

{
  "name": "good-dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack watch --mode production",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^5.8.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.15",
    "@babel/preset-react": "^7.22.15",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "webextension-polyfill": "^0.10.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

完整项目结构

$ tree -I node_modules/
.
├── README.md
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── icon.png
│   ├── index.html
│   ├── libs
│   │   ├── antd
│   │   │   ├── antd.min.js
│   │   │   └── reset.min.css
│   │   ├── dayjs
│   │   │   └── dayjs.min.js
│   │   ├── jquery
│   │   │   └── jquery.min.js
│   │   ├── react
│   │   │   ├── react-dom.production.min.js
│   │   │   └── react.production.min.js
│   │   └── webextension-polyfill.min.js
│   └── manifest.json
├── src
│   ├── background
│   │   └── background.js
│   ├── consts.js
│   ├── content
│   │   └── content.js
│   ├── options
│   │   ├── options.css
│   │   ├── options.html
│   │   └── options.js
│   ├── popup
│   │   ├── popup.css
│   │   ├── popup.html
│   │   └── popup.js
│   └── utils
│       ├── chrome-util.js
│       ├── copy-util.js
│       ├── dom-util.js
│       └── uuid-util.js
└── webpack.config.js

完整代码：https://github.com/mouday/good-dev/文章来源地址https://www.toymoban.com/news/detail-699184.html

到了这里，关于chrome插件：一个基于webpack + react的chrome 插件项目模板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！