前面，我们已经了解了各页面之间的通信. 权限等一系列的操作. 已经掌握了基本可以开发chrome扩展的技能. 剩下的就是需要用到某些api查看一下api文档就能开发了.对于当代前端来说. 我们仅仅用原生的js和html来写我们的代码. 这样就提现不出我们的价值了. 这里我们就根据之前的一些代码. 来处理我们的现代框架vue来开发我们的插件.
技术栈
这里我们所需要使用的技术栈如下
scss
webpack5
vue3
vue-router4
vant3这里我们使用的都是最新的版本. 就是要shuai
规划打包后的目录结构
首先，我们得想明白我们需要打包成什么样的目录. 我们根据之前的示例. 我们定义出如下的目录
background.js
manifest.json
assets
content.js
option.html
option.js
popup.html
popup.js
devtool.html
devtool.js
devtool/panel.html
devtool/panel.js
devtool/sidebar.html
devtool/sidebar.js这是我们打包过后最终的目录. 有了一个大概的结构过后，我们就开始来处理我们的代码.
初始目录
我们规划好目录过后, 就需要处理我们的项目路径了. 随意建立一个目录. 然后使用如下命令.
npm init如果没有node. 请自行安装. 我这里就不做过多的描述了. 执行过后. 就有一堆输入协议之类的东西. 所有操作完毕过后. 就有了我们的package.json. 最主要的就是初始化这个json文件. 我们好方便自己操作. 首先安装我们的基础. webpack.
npm install webpack --save-dev完成过后. 我们就需要对我们的项目目录得有所规划了.
规划项目目录
首先. 我们的最外层肯定都的是一些全局型的配置和目录. 例如babel.config.js. 例如package.json这些都在最外层. 我们的核心代码都放到src目录下面. 有一个专门用于打包文件代码存储的地方. 我们chrome的入口肯定也得有一个. 放到src下面. 有了以上基本的东西. 就能得到我们大概的文件目录是什么样子的了. 我的文件目录如下.
build // webpack打包配置
dist // 打包过后的文件
node_modules // npm模块
public // 基础文件
src // 核心代码
src/entry // chrome所有页面的入口
src/routers // 我们自己定义的路由.
src/views // chrome的所有页面
src/content.js // content script 入口
src/background.js // service worker入口
utils // 工具类webpack
首先我们的定义我们webpack打包时的入口. 由于我们有开发时候的环境和生成环境. 我们我们build文件夹下面就有以下3个文件
base.js // 基础配置文件等
dev.js // 开发模式下的配置
prod.js // 生产环境时的配置.首先. 我们要定义我们的base.js. 这里面有几个点. 首先. 我们的入口文件是有多个. 及src/entry下面则有多个. 所以我们得定义我们的入口.如下
/* global module, require, __dirname */
const path = require('path')
const utils = 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
/*global require, __dirname, module */
const path = require('path')
const fs = require('fs')
function findEntry() {
const entry_path = path.dirname(__dirname) + '/src/entry'
const modules = []
const entries = {}
const dirs = fs.readdirSync(entry_path)
dirs.forEach(function(item) {
const full_path = path.join(entry_path, item)
const stat = fs.statSync(full_path)
if (stat.isDirectory()) {
modules.push(full_path)
}
})
// 获取所有的文件夹下面所有的入口文件.
if (modules.length <= 0) {
return {}
}
modules.map(function(item) {
const entry = fs.statSync(item + '/main.js')
if (!entry.isFile()) {
return
}
const info = path.parse(item + '/main.js')
const dirname = info.dir.split('/').pop()
entries[dirname] = item + '/main.js'
})
return entries
}
module.exports = {
findEntry: findEntry,
}定义完过后. 我们的enrty入口大概就是这样的样子.
{
"popup": "src/entry/popup/main.js", // 绝对路径
}有了这个过后. 就相当于我们有了一个main.js的入口. 同时. 我们需要增加webpack的输出的配置. 此外. 我们还要告知webpack能处理哪些文件. 在base.js里面加入下面的代码.
resolve: {
// 可以处理js,json,vue文件
extensions: [
'.js', '.vue', '.json'
]
},另外. 我们还得对一些文件按照怎样的格式进行处理. 比方说.vue
引入vue
执行一下命令
npm install vue@next vue-router@next --save
npm install vue-loader@next在build/base.js告知怎么处理vue文件.
const { VueLoaderPlugin } = require('vue-loader')
// 导出时增加如下配置
module: {
rules: [
// 指定vue文件使用vue-loader来进行解析.
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]这样就能处理我们的vue.
引入babel
为撒我们需要babel. 是因为各个浏览器对js的兼容性都不是特别好. 所以我们需要对兼容性进行处理. 先执行命令
npm install @babel/preset-env babel-loader babel-plugin-import core-js -D然后在build/base.js中module.rules里面增加如下配置
{
test: /\.js$/,
loader: 'babel-loader'
}启用对babel的加载.
引入css/scss
在css中. 可以使用style-loader来直接打包css. 但是我们要使用scss. 所以. 我们就需要引入sass-loader. 同时还要处理兼容postcss. 所以. 执行如下命令
npm install -D css-loader node-sass sass-loader postcss-loader 然后同babel一样. 在build/base.js中的rules增加如下配置
{
test: /\.(css|scss|sass)$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}这样就增加了对css的处理.
引入vant
直接使用
npm i vant@3然后由于我们使用了babel. 直接使用按需加载方式. 在跟路径创建babel.config.js. 加入如下代码.
// babel.config.js
/* global module */
const presets = []
const plugins = [
[
'import',
{
'libraryName': 'vant',
'libraryDirectory': 'es',
'style': true
}
]
]
module.exports = {
plugins,
presets
}即可完成引用.
处理特殊入口
前面我们使用了utils.findEntry函数来处理入口. 但是对于我们特殊的. 比如sidebar和panel. 这种用于控制台的入口. 需要在devtools.js里面进行创建. 所以. 我们就将devtools.js给单独打包.跟content, 所以修改我们的findEntry函数.如下
function findEntry() {
const app_path = path.dirname(__dirname)
const entry_path = path.dirname(__dirname) + '/src/entry'
const modules = []
const entries = {}
const dirs = fs.readdirSync(entry_path)
dirs.forEach(function(item) {
const full_path = path.join(entry_path, item)
const stat = fs.statSync(full_path)
if (stat.isDirectory()) {
modules.push(full_path)
}
})
// 获取所有的文件夹下面所有的入口文件.
if (modules.length <= 0) {
return {}
}
modules.map(function(item) {
const entry = fs.statSync(item + '/main.js')
if (!entry.isFile()) {
return
}
const info = path.parse(item + '/main.js')
let dirname = 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'
}
return entries
}同时. 处理了content. background.devtools.这几个还得处理特殊的panel和sidebar. 就直接放到entries里面就可以. 但是仅仅这样是不行的. 我们还需要将html代码给打包处理.这我们使用了html-webpack-plugin. 直接安装
npm i html-webpack-plugin -D同时在build/base.js的module.exports对象的plugins里面加入如下代码.
//
[
new VueLoaderPlugin(),
].concat(utils.genHtmlPlugins())
// 在utils.genHtmlPlugins
// 这里要做一些特殊处理才能进行打包. 对对应的sidebar, panel来进行打包. 主要是要注入代码才可以.
function genHtmlPlugins() {
const entires = findEntry()
const plugins = []
const template = path.dirname(__dirname) + '/public/extension.html'
const modules = Object.keys(entires)
// 这里有问题. 需要重新改动一下就可以了.
for (var index in modules) {
const module_name = modules[index]
const name = module_name.split('/').pop()
if (['content', 'background'].indexOf(module_name) > -1) {
continue
}
// 打包对应的模块到指定的目录.其余就不打包了.
const filename = module_name + '.html'
plugins.push(new HtmlWebpackPlugin({
// publicPath: './devtools',
title: name,
template: template,
name: name,
filename: filename,
chunks: [module_name],
inject: 'body',
minify: {
removeComments: true // 自动删除注释
}
}))
}
return plugins
}这样我们就能打包好对应的代码了.
复制公共文件
我们打包好基本代码过后, 还需要将public里面的公共文件进行复制. 直接使用copy-webpack-plugin. 先执行命令
npm i copy-webpack-plugin -D按照如下方式使用
plugins: [
// .vue文件打包
new VueLoaderPlugin(),
// 直接将原始文件复制过去.
new CopyWebpackPlugin({
patterns: [
// 将src/manifest.json直接复制过去.
{ from: path.resolve(path.dirname(__dirname), 'src/manifest.json'), to: 'manifest.json' },
{ from: path.dirname(__dirname) + '/public', filter: async(file_path) => {
const app_path = path.dirname(__dirname)
if (file_path.indexOf('extension.html') > 0) {
return false
}
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/sidebar').isDirectory()) {
return false
}
}
return true
} }
]
})
].concat(utils.genHtmlPlugins())这样. 打包就好了.
额外
不过有一些不是特别完美. 打包后会生成.LISENCE.txt这种文件. 直接使用terser-webpack-plugin插件. 先安装
npm i terser-webpack-plugin -D然后按照如下使用
const TerserPlugin = require('terser-webpack-plugin')
// 在module.exports对象中增加
optimization: {
minimizer: [new TerserPlugin({
extractComments: false
})]
}另外. 打包好的东西如果直接将dist文件夹当成扩展来处理的话.会直接报错. 这是因为webpack如果是dev开发模式. 会以eval这种形式来加载js. 在chrome里面是不允许的. 所以我们需要做特殊处理. 这里是我的build/dev.js和build/prod.js
// dev.js
const { merge } = require('webpack-merge')
var base_config = require('./base')
// 重新处理一下.
module.exports = merge(base_config, {
mode: 'production',
// 指定入口.
watch: true
})
// prod.js
const { merge } = require('webpack-merge')
var base_config = require('./base')
// 重新处理一下.
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创建issue. 我会定期查看代码.