经过 如何开发一个chrome插件 的学习，我们已经可以完整地开发一个chrome插件了。
但是我们知道，由于chrome插件无法require/import，所以在拆分文件以及引用npm包时有诸多的不方便，更无法便捷地使用一些UI组件库，那么应该做点儿什么呢
- 可以通过import/export直接引用或导出模块，更加便捷地分文件梳理项目结构，可以方便地引用如lodash之类的包
- 可以使用Vue开发弹窗页面（包括分页）
- 弹窗页可以方便地使用UI库，如vue-antd、tailwindcss等
Let's do it
一、创建基础项目
manifest.json
{
"name": "标题",
"description": "描述",
"version": "1.0.0",
"manifest_version": 3,
"permissions": [
"storage",
"activeTab"
],
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"https://www.baidu.com/*"
],
"js": [
"content.js"
]
}
]
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
content.js
console.log('to do something...')
二、使用webpack打包content.js
删除content.js文件，创建src/content/index.js文件
src/content/index.js
console.log('to do something...')
安装webpack
yarn add webpack -D
除了将content打包到之外，我们还需要将manifest.json文件直接搬运到打包的文件夹，所以我们还需要安装一个用于拌匀的插件
yarn add copy-webpack-plugin -D
创建webpack.config.js文件
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
content: './src/content/index.js' // 入口文件
},
output: {
filename: '[name].js', // 根据入口文件对应命名，这种写法方便有多个入口的时候自动命名
path: path.resolve(__dirname, 'dist') // 打包到的目标文件夹
},
plugins: [
new CopyPlugin({
patterns: [
{ from: 'manifest.json', to: '' }, // 搬运manifest.json到目标文件夹，这里将会直接搬运到出口的dist文件夹
],
}),
],
};
写build命令
package.json
"scripts": {
"build": "webpack"
},
现在我们可以在src/content/index.js中引入lodash尝试在文件中引用npm包
yarn add lodash
src/content/index.js
import _ from 'lodash';
console.log('1到99之内的随机数：', + _.random(1, 99));
完成，build完之后将dist文件夹拉进chrome扩展实际查看一下效果，看看效果
yarn build
如何安装chrome扩展详见 如何开发一个chrome插件
build的过程中webpack会提示安装 webpack-cli，这个时候回答yes安装就可以了
image.png
三、使用vue开发popup页面
在别处使用命令
npm create vue
创建一个vue项目，过程中会询问项目名，是否使用typescript，eslint，单元测试之类的，我们可以根据实际情况选择，这里建议可以都选否，这样得出一个比较简洁的vue结构。
将vue项目中的package.json的依赖部分复制过来，方便安装依赖
"dependencies": {
"lodash": "^4.17.21",
"vue": "^3.4.29"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"vite": "^5.3.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
}
我们将script里的build也复制过来，与原来的build结合写一下，由于vite打包的时候会将dist包删除再重新打包，但是webpack不会，所以我们先执行vue的打包，然后再打包content
"scripts": {
"build": "vite build && webpack"
},
将 vite.config.js 和 jsconfig.json 和 .gitignore 复制过来，前两个文件是vue用于打包的配置文件
再创建 src/popup 文件夹，将vue项目src文件夹下的文件全部复制到popup文件夹下
将vue项目index.html中的内容复制，全部替换到chrome插件项目中的popup.html
将其中的引入script修改为
<script type="module" src="/src/popup/main.js"></script>
同样的将 vite.config.js 中引入src的内容修改为src/popup。并添加build块变更入口文件名
vue默认的入口文件名是index.html，这里依照chrome插件的习惯将其修改为popup.html
resolve: {
alias: {
'@': fileURLToPath(new URL('./src/popup', import.meta.url))
}
},
build: {
rollupOptions: {
input: {
main: './popup.html'
},
}
}
jsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": [
"./src/popup/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
vite的打包方式已经会将popup.html文件打包进dist文件夹了，不需要webpack单独拌匀，所有我们将webpack.config.js文件中的那一行删掉
plugins: [
new CopyPlugin({
patterns: [
{ from: 'manifest.json', to: '' },
// { from: 'popup.html', to: '' }, 这一行删掉
],
}),
],
好，我们 yarn 一下安装好依赖，然后build好dist之后，将dist文件夹拉进chrome扩展实际查看一下效果
yarn build
image.png
达到预期效果
四、在popup中使用antd
在项目中安装antd
yarn add ant-design-vue
将antd添加到项目中，导入antd，然后通过use加载它
src/popup/main.js
import './assets/main.css'
import Antd from 'ant-design-vue'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(Antd).mount('#app')
完成，我们来到src/popup/App.vue，直接是使用一个组件看看效果。这里在页面中添加了一个按钮
这里为了后面查看方便，将logo和多余的部分删掉，并修改一下高宽，这样截图可以不用那么长
src/popup/App.vue
<template>
<header style="width: 300px;">
<div class="wrapper">
<HelloWorld msg="You did it!" />
<a-button>这是一个按钮</a-button>
</div>
</header>
</template>
yarn build & 刷新浏览器插件，效果：
image.png
五、在popup中tailwindcss
安装tailwindcss以及创建配置文件
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
修改 tailwind.config.js 文件配置，将 popup.html 和 src/popup 文件夹下的文件囊括进范围内
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./popup.html",
"./src/popup/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
将tailwind引用添加进入css入口文件
通过src/popup/main.js的第一行
import './assets/main.css'
可以看出，入口css是main.css这个文件，那么我们打开这个文件，在最后添加
@tailwind base;
@tailwind components;
@tailwind utilities;
配置完成，实验一下效果，添加了一个 bg-pink-200
src/popup/App.vue
<template>
<header style="width: 300px;">
<div class="wrapper bg-pink-200">
<HelloWorld msg="You did it!" />
<a-button type="primary">这是一个按钮</a-button>
</div>
</header>
</template>
build & refresh：
image.png
END
总结，一个可以使用npm包，vue，tailwindcss，antd的chrome插件基础模板就完成了。
网友评论