之前找了不少如何開發(fā)谷歌插件的文章，結(jié)果發(fā)現(xiàn)都是些很基礎(chǔ)的內(nèi)容，并沒有寫到如何快速編譯打包插件。我就在想為什么不能通過webpack來打包插件呢？如果通過webpack編譯的話，就能使開發(fā)過程變得更舒服，使文件結(jié)構(gòu)趨向模塊化，并且打包的時(shí)候直接編譯壓縮代碼。后來發(fā)現(xiàn)了 vue-cli-plugin-chrome-ext 插件，通過這個(gè)插件能很方便地用 vue-cli3 來開發(fā)谷歌插件，并能直接引用各種UI框架跟npm插件。
我們一直強(qiáng)調(diào)網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站對(duì)于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)的建站公司不一定是大公司,成都創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。
tip：如果你沒接觸過谷歌插件開發(fā)的話建議先看看基礎(chǔ)文檔：
搭建環(huán)境
運(yùn)行項(xiàng)目
npm run build-watch 運(yùn)行開發(fā)環(huán)境，對(duì)修改文件進(jìn)行實(shí)時(shí)編譯并自動(dòng)在根目錄下生成 dist 文件夾，然后在瀏覽器上加載 dist 文件夾完成插件安裝。(注意：修改 background 文件跟 manifest.json 文件并不能實(shí)時(shí)刷新代碼，需要重新加載插件才行)
npm run build 運(yùn)行生產(chǎn)環(huán)境編譯打包，將所有文件進(jìn)行整合打包。
引入element UI
目前的插件加載到瀏覽器后彈出頁面是這種界面：
平時(shí)我們肯定要引入好看的UI框架的，在這里我們可以引入 element-ui，首先安裝：
npm install element-ui
考慮到插件打包后的文件大小，最后通過按需加載的方式來引入組件，按照 element-ui 官方的按需加載方法，要先安裝 babel-plugin-component 插件:
npm install babel-plugin-component -D
然后，將 babel.config.js 修改為：
重慶分公司
重慶分公司
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}接下來修改 popup 相關(guān)文件引入所需組件， src/popup/index.js 內(nèi)容:
import Vue from "vue";
import AppComponent from "./App/App.vue";
Vue.component("app-component", AppComponent);
import {
Card
} from 'element-ui';
Vue.use(Card);
new Vue({
el: "#app",
render: createElement => {
return createElement(AppComponent);
}
});src/popup/App/App.vue 內(nèi)容：
操作按鈕 {{'列表內(nèi)容 ' + o }}
渲染效果：
當(dāng)然，不僅僅是插件內(nèi)部的頁面，還可以將 element-ui 組件插入到 content 頁面。
content.js 使用 element-ui 組件
content.js 主要作用于瀏覽網(wǎng)頁，對(duì)打開的網(wǎng)頁進(jìn)行插入、修改 DOM ，對(duì)其進(jìn)行操作交互。別覺得 element-ui 只能配合 vue 使用，其實(shí)就是一個(gè)前端框架，只要我們引入了就能使用， webpack 會(huì)自動(dòng)幫我們抽離出來編譯打包。
首先我們創(chuàng)建 src/content/index 文件，內(nèi)容：
import {
Message,
MessageBox
} from 'element-ui';
// 發(fā)現(xiàn)element的字體文件無法通過打包加載，所以另外通過cdn來加載樣式
let element_css = document.createElement('link');
element_css.
element_css.rel = "stylesheet"
document.head.append(element_css)
MessageBox.alert('這是一段內(nèi)容', '標(biāo)題名稱', {
confirmButtonText: '確定',
callback: action => {
Message({
type: 'info',
message: `action: ${ action }`
});
}
})vue.config.js 增加 content.js 文件的打包配置，因?yàn)?content.js （ background.js 同樣可以只生成js文件）只有js文件，不用像app模式那樣打包生成相應(yīng)的 html 文件，完整內(nèi)容如下：
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
// Generate pages object
const pagesObj = {};
const chromeName = ["popup", "options"];
chromeName.forEach(name => {
pagesObj[name] = {
entry: `src/${name}/index.js`,
template: "public/index.html",
filename: `${name}.html`
};
});
const plugins =
process.env.NODE_ENV === "production" ? [{
from: path.resolve("src/manifest.production.json"),
to: `${path.resolve("dist")}/manifest.json`
}] : [{
from: path.resolve("src/manifest.development.json"),
to: `${path.resolve("dist")}/manifest.json`
}];
module.exports = {
pages: pagesObj,
// // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: false,
configureWebpack: {
entry: {
'content': './src/content/index.js'
},
output: {
filename: 'js/[name].js'
},
plugins: [CopyWebpackPlugin(plugins)]
},
css: {
extract: {
filename: 'css/[name].css'
// chunkFilename: 'css/[name].css'
}
}
};最后在 manifest.development.json 加載 content.js 文件：
{
"manifest_version": 2,
"name": "vue-extension",
"description": "a chrome extension with vue-cli3",
"version": "0.0.1",
"options_page": "options.html",
"browser_action": {
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [{
"matches": [
"*://*.baidu.com/*"
],
"js": [
"js/content.js"
],
"run_at": "document_end"
}]
}然后瀏覽器重新加載插件后打開 https://www.baidu.com/ 網(wǎng)址后可看到：
添加打包文件大小預(yù)覽配置
既然用了 vue-cli3 了，怎能不繼續(xù)折騰呢，我們平時(shí)用 webpack 開發(fā)肯定離不開打包組件預(yù)覽功能，才能分析哪些組件占用文件大，該有的功能一個(gè)都不能少:sunglasses:。這么實(shí)用的功能，實(shí)現(xiàn)起來也無非就是添加幾行代碼的事：
// vue.config.js
module.export = {
/* ... */
chainWebpack: config => {
// 查看打包組件大小情況
if (process.env.npm_config_report) {
// 在運(yùn)行命令中添加 --report參數(shù)運(yùn)行， 如：npm run build --report
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}就辣么簡單，然后運(yùn)行 npm run build --report 看看效果：
搞定收工！
結(jié)語
事實(shí)證明，vue-cli3很強(qiáng)大，vue相關(guān)的插件并不是不能應(yīng)用于開發(fā)瀏覽器插件，element-ui也不僅限于vue的運(yùn)用。只有你想不到，沒有做不到的事😁。
tip：如果你懶得從頭開始搭建模板的話也可以從GitHub拉取vue-extension-template。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
