2023年7月3日发(作者：)

vue-cli3开发Chrome插件实践之前找了不少如何开发⾕歌插件的⽂章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使⽂件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件，通过这个插件能很⽅便地⽤vue-cli3来开发⾕歌插件，并能直接引⽤各种UI框架跟npm插件。tip：如果你没接触过⾕歌插件开发的话建议先看看基础⽂档：搭建环境1. 创建⼀个vue-cli3项⽬： vue create vue-extension，对话流程选择默认就⾏。2. 进⼊项⽬cd vue-extension3. 安装vue-cli-plugin-chrome-ext插件：vue add chrome-ext,根据安装对话选项设置好。4. 删除vue-cli3⽆⽤⽂件跟⽂件夹：src/、src/components运⾏项⽬npm run build-watch 运⾏开发环境，对修改⽂件进⾏实时编译并⾃动在根⽬录下⽣成dist⽂件夹，然后在浏览器上加载dist⽂件夹完成插件安装。(注意：修改background⽂件跟⽂件并不能实时刷新代码，需要重新加载插件才⾏。 后⾯已经有实时刷新的解决⽅法)npm run build 运⾏⽣产环境编译打包，将所有⽂件进⾏整合打包。引⼊element UI⽬前的插件加载到浏览器后弹出页⾯是这种界⾯： 平时我们肯定要引⼊好看的UI框架的，在这⾥我们可以引⼊ element-ui，⾸先安装：12npm install element-ui复制代码考虑到插件打包后的⽂件⼤⼩，最后通过按需加载的⽅式来引⼊组件，按照element-ui官⽅的按需加载⽅法，要先安装babel-plugin-component插件:12npm install babel-plugin-component -D复制代码然后，将修改为：s = { presets: [ '@vue/app' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}复制代码接下来修改popup相关⽂件引⼊所需组件， src/popup/内容:1718import Vue from "vue";import AppComponent from "./App/";

ent("app-component", AppComponent);

import { Card} from 'element-ui';

(Card);

new Vue({ el: "#app", render: createElement => { return createElement(AppComponent); }});复制代码src/popup/App/ 内容：8293031323334

复制代码渲染效果：当然，不仅仅是插件内部的页⾯，还可以将element-ui组件插⼊到content页⾯。使⽤element-ui组件主要作⽤于浏览⽹页，对打开的⽹页进⾏插⼊、修改DOM，对其进⾏操作交互。别觉得element-ui只能配合vue使⽤，其实就是⼀个前端框架，只要我们引⼊了就能使⽤，webpack会⾃动帮我们抽离出来编译打包。根据评论的朋友提⽰，可以通过Chrome插件的API来引⼊字体⽂件，解决element-ui⽆法引⼊相对路径的字体⽂件问题。⾸先我们创建src/content/index⽂件，在⾥⾯我们通过API来引⼊插件的字体⽂件，内容：829import { Message, MessageBox} from 'element-ui';

// 通过Chrome插件的API加载字体⽂件(function insertElementIcons() { let elementIcons = Element('style') = 'text/css'; ntent = ` @font-face { font-family: "element-icons"; src: url('${ ("fonts/")}') format('woff'), url('${ ("fonts/ ")}') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ } ` Child(elementIcons);})();

('这是⼀段内容', '标题名称', { confirmButtonText: '确定', callback: action => { Message({ type: 'info', message: `action: ${ action }` }); }})复制代码增加⽂件的打包配置，因为（同样可以只⽣成js⽂件）只有js⽂件，不⽤像app模式那样打包⽣成相应的html⽂件。这⾥我们还要对字体打包配置处理下，因为默认打包后的⽂件名是带有hash值的，在这⾥我们要去除掉，完整内容如下：8const CopyWebpackPlugin = require("copy-webpack-plugin");const path = require("path");

// Generate pages objectconst pagesObj = {};

const chromeName = ["popup", "options"];

h(name => { pagesObj[name] = { entry: `src/${name}/`, template: "public/", filename: `${name}.html` };});

// ⽣成manifest⽂件const manifest = _ENV === "production" ? { from: e("src/"), to: `${e("dist")}/` } : { from: e("src/"), to: `${e("dist")}/` };

const plugins = [ CopyWebpackPlugin([2936373839464748495657585966676869 manifest ])]

s = { pages: pagesObj, // // ⽣产环境是否⽣成 sourceMap ⽂件 productionSourceMap: false,

configureWebpack: { entry: { 'content': './src/content/' }, output: { filename: 'js/[name].js' }, plugins: [CopyWebpackPlugin(plugins)] }, css: { extract: { filename: 'css/[name].css' // chunkFilename: 'css/[name].css' } }, chainWebpack: config => { // 处理字体⽂件名，去除hash值 const fontsRule = ('fonts')

// 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 () (/.(woff2?|eot|ttf|otf)(?.*)?$/i) .use('url') .loader('url-loader') .options({ limit: 1000, name: 'fonts/[name].[ext]' }) }};复制代码最后在加载⽂件，以及将字体⽂件添加到⽹页可加载资源字段web_accessible_resources⾥去：2{ "manifest_version": 2, "name": "vue-extension", "description": "a chrome extension with vue-cli3", "version": "0.0.1", "options_page": "", "browser_action": { "default_popup": "" }, "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "content_scripts": [{ "matches": [ "*://*./*" ], "js": [ "js/" ], "run_at": "document_end" }], "web_accessible_resources": ["fonts/*"]}复制代码实时刷新插件之前写的时候发现单纯地通过vue-cli3更新代码并不能使插件的、也跟着更新，因为代码已经加载到浏览器了，浏览器并不会监听这些⽂件的变化。也是通过评论的朋友推荐，通过可以完美实现实时刷新功能，⽽不⽤重新⼿动加载。代码还简单易⽤，在这⾥我们直接将代码复制到src/utils/⽂件：829363738394// 代码来源：/xpl/crx-hotreload/edit/master/t filesInDirectory = dir => new Promise(resolve => Reader().readEntries(entries => ((e => [0] !== '.').map(e => ctory ? filesInDirectory(e) : new Promise(resolve => (resolve)) )) .then(files => [].concat(...files)) .then(resolve) ))

const timestampForFilesInDirectory = dir => filesInDirectory(dir).then(files => (f => + difiedDate).join())

const reload = () => { ({ active: true, currentWindow: true }, tabs => { // NB: see /xpl/crx-hotreload/issues/5 if (tabs[0]) { (tabs[0].id) } () })}

const watchChanges = (dir, lastTimestamp) => { timestampForFilesInDirectory(dir).then(timestamp => { if (!lastTimestamp || (lastTimestamp === timestamp)) { setTimeout(() => watchChanges(dir, timestamp), 1000) // retry after 1s } else { reload() } })}

f(self => { if (lType === 'development') { kageDirectoryEntry(dir => watchChanges(dir)) }})复制代码然后在对热刷新代码进⾏处理，如果是开发环境的话就将其复制到assets⽂件夹⾥⾯：2// ...

// 在这段下⾯添加const plugins = [ CopyWebpackPlugin([ manifest ])]

// 开发环境将热加载⽂件复制到dist⽂件夹if (_ENV !== 'production') { ( CopyWebpackPlugin([{ from: e("src/utils/"), to: e("dist") }]) )}

...复制代码最后只要在开发环境⾥配置⼀下，将加载到background运⾏环境中即可：12"background": { "scripts": [""] }复制代码添加打包⽂件⼤⼩预览配置既然⽤了vue-cli3了，怎能不继续折腾呢，我们平时⽤webpack开发肯定离不开打包组件预览功能，才能分析哪些组件占⽤⽂件⼤，该有的功能⼀个都不能少?。这么实⽤的功能，实现起来也⽆⾮就是添加⼏⾏代码的事：//

= { /* ... */

chainWebpack: config => { // 查看打包组件⼤⼩情况 if (_config_report) { // 在运⾏命令中添加 --report参数运⾏， 如：npm run build --report config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } }}复制代码就辣么简单，然后运⾏npm run build --report看看效果：⾃动打包zip做过Chrome插件的都知道，提交到⾕歌插件市场的话需要打包为zip⽂件才⾏。如果每次我们都需要将编译⽂件打包成zip的话就太⿇烦了，这种每次都要经历的重复流程当然是交给程序来处理啦。 想打包zip的话⾸先要安装zip-webpack-plugin插件到开发环境：12npm install --save-dev zip-webpack-plugin复制代码然后添加打包代码到:17181920// ...

// 开发环境将热加载⽂件复制到静态⽂件夹(在这段下⾯添加)if (_ENV !== 'production') { /*...*/}

// ⽣产环境下打包dist为zipif (_ENV === 'production') { ( new ZipPlugin({ path: e("dist"), filename: '', }) )}

...复制代码搞定收⼯！结语事实证明，vue-cli3很强⼤，vue相关的插件并不是不能应⽤于开发浏览器插件，element-ui也不仅限于vue的运⽤。只有你想不到，没有做不到的事?。tip：如果你懒得从头开始搭建模板的话也可以从GitHub拉取。