文章目录

预期目标
开发环境搭建实践
- create-react-app搭建标准react工程
- 工程开发目录配置
- 修改webpack生成上述build目录
- - 设置多入口
  - 固定build生成的文件名
  - 设置popup不引入另外两个模块的js
- 引入Antd
回顾总结

紧接上一篇文章对chrome插件的基本介绍，这里我们就来开始真正实践一下插件的开发吧，第一部分就从开发环境搭建入手吧，这一部分也是插件开发和Web-SPA应用开发区别较大的一部分

预期目标

预期目标是搭建React+TS+Antd的插件开发环境，支持build生成插件所需要的所有文件

最终理想的build目录应该接近下述形态：

├─ favicon.ico         <--这个没有也行，用不到
├─ index.html          <--popup入口页面
├─ insert.js           <--插入到目标页面执行的js（非必须，视业务需求而定，后面笔记会说到）
├─ manifest.json       <--插件的配置文件
├─ /static
|  ├─ /css
|  |  ├─ content.css   <--content页面样式（会与目标页面互相污染）
|  |  └─ main.css      <--popup页面样式（不会与目标页面互相污染）
|  ├─ /js
|  |  ├─ background.js <--background script
|  |  ├─ content.js    <--content script
|  |  └─ main.js       <--popup script
|  └─ /media           <--项目的图片资源存放目录

上述包含了插件所需要的popup，content和background组成部分

开发环境搭建实践

create-react-app搭建标准react工程

这里我采用react开发都很熟悉的脚手架create-react-app来进行，如果希望使用TS的小伙伴记得添加TS模板的参数哈

快速新建标准react+ts工程：

npx create-react-app my-app --template typescript
cd my-app
npm start

之后大家可以直接执行npm run ejcet来暴露webpack的配置，后续需对webpack进行修改

工程开发目录配置

这里我参考了这篇博客进行了开发目录的配置，大家按照自己的风格修改：https://zhuanlan.zhihu.com/p/137793202

    ├─ /config              <--配置目录（由eject生成）├─ /public              <--popup入口页面|  ├─ /images           <--图片目录|  |  ├─ icon.png       <--插件图标|  ├─ favicon.ico       <--这个没有也行，用不到|  ├─ index.html        <--popup入口页面|  ├─ insert.js         <--插入到目标页面执行的js（非必须，视业务需求而定）|  ├─ manifest.json     <--插件的配置文件├─ /scripts             <--项目构建运行脚本（由eject生成）├─ /src                 <--开发目录|  ├─ /api              <--API公用目录|  |  ├─ index.js|  ├─ /background       <--background script开发目录|  |  ├─ index.js|  ├─ /common           <--公用资源目录|  |  ├─ /js            <--公用js目录|  |  └─ /stylus        <--公用样式目录（本demo使用stylus）|  ├─ /content          <--content script开发目录|  |  ├─ /components    <--content 组件目录|  |  ├─ /images        <--content 图片目录|  |  ├─ content.styl   <--content 样式|  |  └─ index.js       <--content script主文件|  ├─ /popup            <--popup开发目录|  |  ├─ /pages         <--popup 页面目录|  |  ├─ /components    <--popup 组件目录|  |  ├─ index.js       <--popup 主文件|  ├─ index.js          <--项目主文件，也是popup入口文件├─ pakeage.json

修改webpack生成上述build目录

重点来了，插件开发并不像SPA应用一样一个入口就足够了，需要修改webpack的配置让其可以打包符合上述build目录要求的产物

设置多入口

为了让popup，background，content都拿打包对应的js文件文件，需要设置多入口，主要是修改entry字段

我们来对config/webpack.config.js作如下修改：

...
entry: {main: [isEnvDevelopment &&require.resolve('react-dev-utils/webpackHotDevClient'),paths.appIndexJs,].filter(Boolean),content: './src/content/index.js',background: './src/background/index.ts'}

核心代码位置大约在173-198行

将原来的entry换成了对象，每个对象的key对应一个入口

固定build生成的文件名

因为manifest.json中配置引用的js文件名是固定的，所以我们需要保证每次打包的文件名不变（默认会加上hash值），主要的工作如下：

去掉文件hash值，删除[contenthash:8]，共4处。（当然你也可以写一些工具尝试在打包阶段动态修改manifest.json文件，这样这个步骤就不需要了）
由于是多入口，需要将static/js/bundle.js修改为static/js/[name].bundle.js。
将runtimeChunk设置为false，否则build后还会多生成runtime-background.js、runtime-content.js、runtime-main.js。
注释掉splitChunks，取消分包，否则会生成类似1.chunk.js、2.chunk.js等文件。

继续修改上述webpack.config.js：

// 大约206行filename: isEnvProduction? 'static/js/[name].js': isEnvDevelopment && 'static/js/[name].bundle.js',// 大约214行
chunkFilename: isEnvProduction? 'static/js/[name].chunk.js': isEnvDevelopment && 'static/js/[name].chunk.js',// 大约302行
/ chrome插件开发，取消分包机制// splitChunks: {//   chunks: 'all',//   name: isEnvDevelopment,// },
...
runtimeChunk: false// 大约642行
new MiniCssExtractPlugin({filename: 'static/css/[name].css',chunkFilename: 'static/css/[name].chunk.css',}),

设置popup不引入另外两个模块的js

设置index.html只引入main.js，否则popup页面会把background/index.js和content/index.js也引入

// 566行
new HtmlWebpackPlugin(Object.assign({},{inject: true,// html只引入popup代码，chrome插件开发不能引入content和background的代码chunks: ['main'],template: paths.appHtml,},isEnvProduction? {minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},}: undefined)),

以上基本完成了webpack的改造工作了

引入Antd

这是一款react使用比较广泛的UI组件库，有需要的同学可以看下

其实这里antd的引入方式和传统开发一样，这里还是贴一下代码，首先安装一下antd的库：

npm install antd --save

接着我们还需要补充antd的按需加载能力，这一部分官网也有介绍，首先安装babel-plugin-import：

npm install babel-plugin-import --save-dev

接着修改package.json:

"babel": {"presets": ["react-app"],
+       "plugins": [
+           [
+               "import",
+               {
+                   "libraryName": "antd",
+                   "style": "css"
+               }
+           ]
+       ]}

回顾总结

react+ts+antd的chrome插件开发环境搭建能力
webpack多入口的配置实践
webpack产物名称和路径的配置

React开发chrome插件系列教程之插件开发环境搭建相关推荐

React开发chrome插件系列教程之chrome插件基本介绍
文章目录 chrome插件能干什么 chrome插件的版本 chrome插件的浏览器支持 chrome插件的功能组成 manifest.json popup content script backgr ...
python3.6 django教程_【Python3.6+Django2.0+Xadmin2.0系列教程一】环境搭建及项目创建
由于工作需要,接触了大半年时间的Django+xadmin框架,一直没空对这块对进行相关的梳理.最近在同事的怂恿下,就在这分享下笔者的学习及工作经验吧. 好了,话不多说,下面开始进入正题: 环境需求: ...
手把手教你搭建一个【文件共享平台】系列教程第二话——环境搭建
文章目录本话概要前端前端整体需求前端组件树前端环境搭建后端后端整体需求后端技术路线后端环境搭建下期预告本话概要这一篇博文主要从整体的角度,概述整个文件共享平台前.后端的需求.技 ...
使用 React.js 开发 Chrome 插件
(点击上方公众号,可快速关注) 来源:UncleChen unclechen.github.io/2017/06/16/使用ReactJS开发Chrome插件/ 一.背景相信看到这篇文章的人应该都用 ...
一文教会你如何用Vue开发Chrome插件
前言作为一个常年的B端前端开发者来说,千篇一律的业务开发有着些许的枯燥无味.在联调过程中,会经常发现后端在部署服务,然后又不知什么时候部署好,由于公司的部署系统查看系统部署状态入口较深,所以闲暇之余 ...
开发chrome 插件， background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
blazor wasm开发chrome插件
用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家先简单介绍下WebAssembly的原理: "WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式 ...
哥哥教你学嵌入式之智芯科技开发板 Z20K11x系列教程（一）
哥哥教你学嵌入式之智芯科技开发板 Z20K11x系列教程(一) 文章日志 1.写于2022/11/25(网上这块板子的教程几乎没有,呜呜呜,只得自己写了) 文章目录 1.认识开发板 2.串口相 ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
搜索引擎快捷导航：一个简单的chrome插件（教程）
搜索引擎快捷导航使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可 github地址:https://github.com/mouday/chrome-search-tool 编写一 ...

React开发chrome插件系列教程之插件开发环境搭建