前面我们了解了页面之间的通信、权限等一系列操作。我们已经掌握了开发chrome扩展的基本技能。剩下的就是使用一些API，查看API文档进行开发。对于当代前端，我们只使用原生的js和html来编写我们的代码。这样，我们就无法发挥我们的价值。这里我们使用一些以前的代码来处理我们现代框架Vue来开发我们的插件。技术栈这里我们需要用到的技术栈如下：scsswebpack5vue3vue-router4vant3这里我们使用最新的版本。就是帅规划打包后的目录结构。首先，我们要弄清楚我们需要打包到什么样的目录中。基于前面的例子，我们定义如下目录background.jsmanifest.jsonassetscontent.jsoption.htmloption.jspopup.htmlpopup.jsdevtool.htmldevtool.jsdevtool/panel.htmldevtool/panel.jsdevtool/sidebar.htmldevtool/sidebar.js这是我们的打包后的最终目录。有了大致的结构之后，我们就开始处理我们的代码。规划完初始目录后，我们需要处理我们的项目路径。随意创建一个目录。然后使用以下命令。如果npminit没有node，请自行安装。我不会在这里描述太多。执行之后会出现一堆输入协议之类的东西。所有操作完成后，我们将有我们的package.json。最重要最重要的是初始化这个json文件。我们自己操作很方便。首先，安装我们的基础。webpack.npminstallwebpack--save-dev完成后，我们需要规划我们的项目目录。先规划工程目录。我们的最外层肯定是一些全局的配置和目录。例如，babel.config.js。比如package.json，这些都在最外层。我们的核心代码放在src目录下。有一个专门存放打包文件代码的地方。我们的chrome入口也必须有一个。放在src下。有了以上基本的东西，我们就可以得到我们大概的文件目录是什么样子的了。我的文件目录如下.build//webpackpackage配置dist//打包文件node_modules//npm模块public//基础文件src//核心代码src/entry//所有chrome页面的入口src/routers//我们自己定义的routes.src/views//所有页面ofchromesrc/content.js//contentscript入口src/background.js//serviceworker入口utils//工具类webpack首先定义我们webpack打包时的入口。由于我们有开发环境和构建环境。我们的构建文件夹下有以下3个文件。base.js//基础配置文件等dev.js//开发模式配置prod.js//生产环境配置。首先，我们需要定义我们的base.js。这里有几点。首先，我们有多个入口文件。而且src/entry下有多个。所以我们必须定义我们的条目。如下/*globalmodule,require,__dirname*/constpath=require('path')constutils=require('../utils/util')//导出默认配置信息。别管其他人。module.exports={entry:utils.findEntry(),output:{path:path.resolve(path.dirname(__dirname),'dist'),filename:'[name].js',publicPath:'./',clean:true,libraryTarget:'umd'}}//utils/util/*globalrequire,__dirname,module*/constpath=require('path')constfs=require('fs')functionfindEntry(){复制代码constentry_path=path.dirname(__dirname)+'/src/entry'constmodules=[]constentries={}constdirs=fs.readdirSync(entry_path)dirs.forEach(function(item){constfull_path=path.join(entry_path,item)conststat=fs.statSync(full_path)if(stat.isDirectory()){modules.push(full_path)}})//获取所有文件夹下的所有入口文件。if(modules.length<=0){return{}}modules.map(function(item){constentry=fs.statSync(item+'/main.js')if(!entry.isFile()){返回}constinfo=path.parse(item+'/main.js')constdirname=info.dir.split('/').pop()entries[dirname]=item+'/main.js'})returnentries}module.exports={findEntry:findEntry,}定义后。我们的条目可能是Thislookslikethis。{"popup":"src/entry/popup/main.js",//绝对路径}有了这个，就相当于有了一个main.js的入口。同时，我们需要添加webpack输出的配置。此外，我们还需要告诉webpack可以处理哪些文件。在base.js中添加以下代码。resolve:{//可以处理js、json、vue文件扩展名：['.js','.vue','.json']},此外，我们还要根据格式处理一些文件。比如将vue导入vue，执行命令npminstallvue@nextvue-router@next--savenpminstallvue-loader@next告诉build/base.js如何处理vue文件。const{VueLoaderPlugin}=require('vue-loader')//导出模块时添加如下配置：{rules:[//指定使用vue-loader解析vue文件。{test:/\.vue$/,loader:'vue-loader'}]},plugins:[newVueLoaderPlugin()]可以处理我们的vue.我们需要babel来引入babel。是因为js在所有浏览器的兼容性都不是很好。所以我们需要处理兼容性。首先执行命令npminstall@babel/preset-envbabel-loaderbabel-plugin-importcore-js-D然后在build/base.js中的module.rules添加如下配置{test:/\.js$/,loader:'babel-loader'}启用babel的加载。在css中引入css/scss。可以直接使用style-loader来打包css。但是我们需要用到scss。因此，我们需要引入sass-loader。同时，我们需要处理postcss兼容性。因此，执行如下命令npminstall-Dcss-loadernode-sasssass-loaderpostcss-loader然后就和babel一样了。在build/base.js中的规则中添加如下配置{test:/\.(css|scss|sass)$/,use:['style-loader','css-loader','postcss-loader','sass-loader']}这样就增加了css的处理。引入vant直接使用npmivant@3然后因为我们使用babel。直接使用按需加载。在根路径中创建babel。配置.js。添加以下代码。//babel.config.js/*globalmodule*/constpresets=[]constplugins=[['import',{'libraryName':'vant','libraryDirectory':'es','style':true}]]module.exports={plugins,presets}完成引用。在处理特殊条目之前，我们使用utils.findEntry函数来处理条目。但是对于我们特殊的，比如侧边栏和面板。这种控制台的入口需要在devtools.js中创建。因此，我们将devtools.js单独打包。有了内容，所以修改我们的findEntry函数。以下函数findEntry(){constapp_path=path.dirname(__dirname)constentry_path=path.dirname(__dirname)+'/src/entry'constmodules=[]constentries={}constdirs=fs.readdirSync(entry_path)dirs.forEach(function(item){constfull_path=path.join(entry_path,item)conststat=fs.statSync(full_path)if(stat.isDirectory()){modules.push(full_path)}})//获取所有文件夹下的所有入口文件。if(modules.length<=0){return{}}modules.map(function(item){constentry=fs.statSync(item+'/main.js')if(!entry.isFile()){return}constinfo=path.parse(item+'/main.js')letdirname=info.dir.split('/').pop()if(['panel','sidebar'].indexOf(dirname)>-1){dirname='devtools/'+dirname}entries[dirname]=item+'/main.js'})if(fs.statSync(app_path+'/src/content.js').isFile()){entries['content']=app_path+'/src/content.js'}if(fs.statSync(app_path+'/src/background.js').isFile()){entries['background']=app_path+'/src/background.js'}if(fs.statSync(app_path+'/src/devtools.js').isFile()){entries['devtools']=app_path+'/src/devtools.js'}returnentries}同时，内容。背景。devtools已被处理。这些必须处理特殊的面板和侧边栏。只需将它们放在条目中即可。但这还不够。我们还需要把html代码打包。这里我们使用html-webpack-plugin。直接安装npmihtml-webpack-plugin-D，在build/base.js的module.exports对象的plugins中添加如下代码。//[newVueLoaderPlugin(),].concat(utils.genHtmlPlugins())//在utils.genHtmlPlugins//中需要做一些特殊的处理来打包。对于相应的边酒吧，包装面板。主要是注入代码。functiongenHtmlPlugins(){constentires=findEntry()constplugins=[]consttemplate=path.dirname(__dirname)+'/public/extension.html'constmodules=Object.keys(entires)//这里有问题.它需要稍微改变一下。for(varindexinmodules){constmodule_name=modules[index]constname=module_name.split('/').pop()if(['content','background'].indexOf(module_name)>-1){continue}//将对应模块打包到指定目录。剩下的就不打包了。constfilename=module_name+'.html'插件。push(newHtmlWebpackPlugin({//publicPath:'./devtools',title:name,template:template,name:name,filename:filename,chunks:[module_name],inject:'body',minify:{removeComments:true//自动删除注释}}))}returnplugins}这样我们就可以打包相应的代码了。复制公共文件我们将基本代码打包后，需要在public中复制公共文件。直接使用copy-webpack-plugin。首先执行命令npmicopy-webpack-plugin-D使用插件如下：[//.vuefilepacksnewVueLoaderPlugin(),//直接复制原文件。newCopyWebpackPlugin({patterns:[//直接复制src/manifest.json。{from:path.resolve(path.dirname(__dirname),'src/manifest.json'),to:'manifest.json'},{来自：path.dirname(__dirname)+'/public',filter:async(file_path)=>{constapp_path=path.dirname(__dirname)if(file_path.indexOf('extension.html')>0){returnfalse}if(file_path.indexOf('devtools.html')>0){//如果没有src/entry/panel和src/entry/sidebar。只是不要复制。if(!fs.statSync(app_path+'/src/entry/panel').isDirectory()&&!fs.statSync(app_path+'/src/entry/panel').isDirectory()){returnfalse}}returntrue}}]})].concat(utils.genHtmlPlugins())这样，打包好了。额外但有些不是特别完美。打包后会生成类似.LISENCE.txt的文件。直接使用terser-webpack-plugin插件。先安装npmiterser-webpack-plugin-D然后使用const如下TerserPlugin=require('terser-webpack-plugin')//对module.exports对象添加优化：{minimizer:[newTerserPlugin({extractComments:false})]}另外如果打包好的东西直接添加到distfolder如果作为扩展，会直接报错。这是因为如果webpack是dev开发模式，它会以eval的形式加载js。在chrome中是不允许的。所以我们需要做特殊处理。这是我的构建/dev.js和构建/prod.js//dev.jsconst{merge}=require('webpack-merge')varbase_config=require('./base')//reprocess.module.exports=merge(base_config,{mode:'production',//指定入口。watch:true})//prod.jsconst{merge}=require('webpack-merge')varbase_config=require('./base')//re让我们处理它。module.exports=merge(base_config,{mode:'production'})在这里，production用于打包。这就是它的配置方式。但是没有提供基本的入口代码，eslint等。对于这些话，请查看源代码。终于，基础知识讲完了。对于每个人来说，你应该已经开始了。其余的由文档处理。比如你不知道api，就需要去找chrome的api。//源代码https://github.com/AdolphGithub/crx-template//api文档https://developer.chrome.com/docs/extensions/reference/如果你觉得用chrome的开发模板。有一个问题。请到github创建问题。我会定期检查代码。
