当青训营遇上码上掘金
主题介绍
思路
既然说整个酷炫的
直接上框架
https://github.com/antfu/vitesse-webext
这个模板是基于Vue的webext(浏览器插件手脚架)
webext是一个可以帮助构建、运行和测试Web扩展的命令行工具。
https://wiki.mozilla.org/WebExtensions
webext的目标是以一种标准的、可移植、跨平台的方式支持浏览器扩展。最初,它将为开发火狐扩展提供一个简化的体验。
我们的目标是实现一个浏览器扩展类型的名片
技术栈
- ⚡️ Vite 快速构建
- 🥝 Vue 3 -组合式api 3.2+setup语法
- 💬
webext-bridge
的local storage 和 VueUse 的使用结合 - 🌈 UnoCSS - 原子化CSS引擎
- 🦾 TypeScript 语法支持
- 📦 Components auto importing 自动引入
- 🌍 WebExtension - 标准浏览器扩展手脚架 可以一键生成chromium、Firefox适配的扩展
- 😴 mv3 - manifest v3
坑
本身这个项目没什么坑的、只是
😡
浏览器在2023年抛弃manifest v2
所以使用manifest v2打包后的浏览器扩展浏览器不认
会显示
😱
还有一点就是本身不太会CSS
调CSS花了很长时间
但是unocss还是很方便的
代码实现
<script setup>
import { useImage } from '@vueuse/core'
const avatarUrl = 'https://s1.ax1x.com/2023/01/23/pSYuIYD.png'
const waka = 'https://wakatime.com/badge/user/84476697-3421-4720-bcdc-efb5c0fbc1b8.svg?style=flat-square'
const kita = 'https://www.z4a.net/images/2023/01/28/kita.gif'
const { isLoading } = useImage({ src: avatarUrl })
const { isLoading_waka } = useImage({ src: waka })
const { isLoading_kita } = useImage({ src: kita })
const to_left = () => {
document.getElementsByClassName('img')[0].classList.remove('to_right')
document.getElementsByClassName('right_text')[0].classList.remove('to_right_text')
document.getElementsByClassName('right_block')[0].classList.remove('to_right_block')
document.getElementsByClassName('left_block')[0].classList.remove('to_left_block')
document.getElementsByClassName('left_img')[0].classList.remove('to_left_img')
}
const to_right = () => {
document.getElementsByClassName('img')[0].classList.add('to_right')
document.getElementsByClassName('right_text')[0].classList.add('to_right_text')
document.getElementsByClassName('right_block')[0].classList.add('to_right_block')
document.getElementsByClassName('left_block')[0].classList.add('to_left_block')
document.getElementsByClassName('left_img')[0].classList.add('to_left_img')
}
</script>
<template>
<main class="w-[384px] h-[256px] text-center text-light-700 bg-[#f69db2] font-sans">
<div class="h-100% w-100% flex flex-row justify-between p-5 items-center gap-5">
<div class="absolute left-0 top-0 translate-x-[-100%]">
<div class="flex flex-col justify-end left_block duration-700 ">
<div class="bg-[#60c5e7] p-5" />
<div class="bg-[#f3d263] p-5" />
</div>
</div>
<div class="absolute left-0 top-0 translate-x-[-100%]">
<span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-11.5 py-16 text-center font-black">Loading</span>
<img v-else :src="kita" class="left_img duration-400">
</div>
<span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-11.5 py-16 text-center font-black">Loading</span>
<img v-else :src="avatarUrl" class="w-35 h-35 img duration-700">
<div class="flex flex-col gap-5 h-119%">
<div class="flex flex-row justify-end translate-x-4.9 right_block duration-700 ">
<div class="bg-[#60c5e7] p-5" />
<div class="bg-[#f3d263] p-5" />
</div>
<div class="flex flex-col gap-5 pt-8 right_text duration-700 ">
<div class="text-center font-bold text-lg text-[#df4b57]">
👋 Hi, I’m @camera-2018
</div>
<span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-15 text-center font-black">Loading</span>
<a v-else href="https://wakatime.com/@84476697-3421-4720-bcdc-efb5c0fbc1b8"><img :src="waka" alt="Total time coded since May 9 2022"></a>
</div>
</div>
</div>
<footer class="bg-[#f69db2] ">
<button class="i-carbon-caret-left hover:bg-[#1DCED1] bg-light-50" @click="to_left" />
<button class="i-carbon-caret-right hover:bg-[#1DCED1] bg-light-50" @click="to_right" />
</footer>
</main>
</template>
<style>
.to_right{
@apply translate-x-142% transition
}
.to_right_text {
@apply translate-x-190% transition
}
.to_right_block {
@apply translate-y-[-120%] transition
}
.to_left_block {
@apply translate-x-100% transition
}
.to_left_img {
@apply translate-x-90% transition
}
</style>
主要的代码就这么多
大概思路是
通过unocss的预设添加使用@apply的样式
再通过js添加样式到元素上
使用过渡效果 添加过渡时间
图片加载部分使用vueuse的useImage 没加载出来之前是有个loading的界面
使用了一个wakatime的svg展示最近敲代码时间点击可看
效果
灵感
https://mzh.moegirl.org.cn/%E5%90%8E%E8%97%A4%E4%B8%80%E9%87%8C
复刻了孤独摇滚 后藤一里 的配色 右上角或左上角的方块为波奇酱的发饰
源代码
代码开源于
https://github.com/camera-2018/business-card-mv3
可以在Releases中下载编译好的扩展 解压然后点击浏览器的扩展程序选项卡 chrome://extensions/
记得要开右上角的开发者模式哦
然后加载已解压的扩展程序就可以了
popup部分代码
popup部分代码放在码上掘金上
https://code.juejin.cn/api/raw/7193666089241772090?id=7193666089241821242
由于依赖比较多,而码上掘金拉不到cdnjsdelivr的数据
所以在码上掘金上是无法正常显示的😥 想试试的话请去https://github.com/camera-2018/business-card-mv3源码
参考
https://code.juejin.cn/pen/7193666089241772090
https://juejin.cn/post/7187753682421678137
https://mzh.moegirl.org.cn/%E5%90%8E%E8%97%A4%E4%B8%80%E9%87%8C