2024-12-25 08:00:00
最近在使用 wxt 框架开发浏览器扩展，记录一些问题。
使用 Shadow Root，可以不让 content-scripts 侵入式影响网站本身，然后引入并渲染 App.vue 组件。
import './style.css';
import { createApp } from 'vue';
import App from './App.vue';
export default defineContentScript({
matches: ['https://google.com/*'],
cssInjectionMode: 'ui',
async main(ctx) {
const ui = await createShadowRootUi(ctx, {
name: 'example-ui',
position: 'inline',
anchor: 'body',
onMount: (container) => {
const app = createApp(App);
app.mount(container);
return app;
},
onRemove: (app) => {
app?.unmount();
},
});
ui.mount();
},
});
import { defineConfig } from 'wxt';
import pkg from './package.json';
// See https://wxt.dev/api/config.html
export default defineConfig({
extensionApi: 'chrome',
modules: ['@wxt-dev/module-vue'],
manifest: {
name: 'xxx',
version: pkg.version,
description: ...,
permissions: ['storage', 'scripting'] // 存储、插入脚本
},
hooks: {
'build:manifestGenerated': (wxt, manifest) => {
if (wxt.config.command === 'serve') {
manifest.content_scripts ??= [];
manifest.content_scripts.push({
matches: ['https://google.com/*'],
js: ['content-scripts/content.js'],
css: ['content-scripts/content.css']
});
}
}
}
});
2024-12-24 08:00:00
时间过的很快，又到了一年结束的时候。今年还算过的充实，不管是生活还是工作中，也是符合我的预期了。
上半年公司开发了新项目，连续加班几个月身心疲惫，好在后期补充新人，我也转战别的业务不再疯狂加班，不然真的有些熬不住…
那段时间过后感觉身体都有些不舒服，因此也发掘了一些新的爱好约上三五好友。
比如说露营，开始还不太了解，跟着朋友参加了几次露营活动，觉得很有意思，后面也自己买了一堆设备，帐篷、桌椅、小推车、烤炉等，不过近期天气转凉没有机会出去玩，打算等开春温度上去了再重新带着女朋友去露营。
然后又玩起了无人机，虽然我技术比较菜，但也玩的挺开心，出去爬山或者哪里的时候都会带着，看看不一样的角度挺有意思，感兴趣的可以去翻阅我之前发的一些文章有航拍记录。
然后就是日常开着车在杭州周边溜达了，也写了不少文章都有发布的摄影照片。
并且在开源之路继续前行，下半年来到 LinuxDo 社区开发了一款插件，不到半年时间也是收获了 500 多的 star，得到不少用户好评，截止到现在已有 530+ .
做开源也是一件很有成就感的事情，看到 Issues 被一一解决，合并热心网友的 Pr，也望自己再接再厉。
希望明年心态还能一如往常，保持平淡的饮食习惯，注重身体健康，多爬山多运动。
2024-12-05 08:00:00
本期是 12 月份最后一期，最近有些事情处理，请假一个月暂时调整，2025 年 1 月 1 日重启。
帮助用户快速查看页面中缩略图对应“大图”的浏览器插件，对于所支持的网站，用户鼠标悬停在缩略图时即可看到相应的高分辨率图片。目前支持的网站包括京东、天猫、淘宝、知乎、微博等 270 余个网站/域名并在不断扩展中。
PDF 科技论文翻译及双语比较，保留公式、图表、目录和注释，支持多种语言，多样化的翻译服务，提供命令行工具、交互式用户界面和 Docker。
竹白百科网页是一个专注于优质内容的平台，展示了各类作品和创作者的最新动态，提供了一个发现和分享优秀博客、设计素材、技术文章等内容的空间。
通过描述可以得到想要的 AI 工具，比如“我需要一个编写 PPT 的 AI 工具” ，然后它就会搜索出可以满足你需求的工具，非常好用。
https://postergenerator.online/
不用再费劲思考设置什么样的 ico 图，直接使用一行链接设置表情 ico。
Discover Random Websites 网站提供了一个平台，允许用户通过单击按钮来发现互联网上的有趣网站，并且可以提交自己喜欢的网站供社区探索。
2024-11-28 08:00:00
一个浏览器新标签页插件。
支持 PDF、PNG、JPG，拖拽排序，批量排版，100% 数据安全，免登录免费使用！作者是linux.do论坛的一位朋友。
https://github.com/tuteng/Best-websites-a-programmer-should-visit-zh
在学习 CS 的时候有一些你必须知道的有用的站点，来提升你的技术储备和学习新知识。
https://www.submarinecablemap.com/
海底电缆地图是来自 TeleGeography 的免费且定期更新的资源。
通过 Twitter 个人公开数据，分析个人的 MBTI 性格，还是挺好玩的，项目已开源可自部署。
https://github.com/ButTaiwan/iansui
基于 Fontworks 的 Klee One 衍生的开源繁体中文字型。
2024-11-21 08:00:00
一款 Chrome 扩展，支持在屏幕的任意位置进行精彩的录制和信息标注，您可以同时录入清晰的麦克风音频或系统内部音频，并且还可享受便捷的点击高亮效果。此外，录制的视频能够轻松导出为 MP4、gif、webm 等多种流行文件格式，并且还提供简单易用的视频编辑功能，让您的创作更加完美！
https://github.com/janarosmonaliev/github-globe
Github 主页上的地球仪是用 ThreeJS 实现的，具有漂亮的阴影。
一个基于 Chrome 浏览器的扩展，可以用来临时记笔记。
https://toexcel.zhiyakeji.com/
图片转 excel 使用了先进的 OCR 识别技术，能够精准的识别图片中的表格和文字，并将其还原并转成可编辑的 excel 文件。
免费在线记事本，可即时共享，无需安装，点开即可使用。
只需输入目标网址，点击检测，即可快速获知该网址是否支持 iframe 嵌套。
https://github.com/HCLonely/awesome-bilibili-extra
Bilibili 脚本合集，收集一些让我们在使用 B 站时更加方便的浏览器扩展/脚本/程序。
https://github.com/realvjy/coolshapes-demo
该代码库包含一个简单的演示项目，用于检查来自 coolshapes-react 包的所有形状。
2024-11-14 08:00:00
https://github.com/Ray-D-Song/web-archive
Web Archive 是基于 Cloudflare 的免费网页归档和共享服务，将网页保存为单个 html 文件并上传到服务器，服务器接收浏览器插件上传的 html 文件，并存储到数据库和存储桶中，最终在 Web 客户端显示这些文件。
https://www.techbrood.com/tool?p=css-clip-path
可以在线通过拖拽画幅节点，利用 Clip-path 属性剪切各种形状的图形，非常好用的工具。
https://github.com/imtaotao/danmu
danmu 是一个在 GitHub 上开源的弹幕项目，提供了碰撞检测和高度自定义的弹幕屏幕样式，旨在为用户提供一个轻量级、高度可定制且易于集成的弹幕解决方案。
https://github.com/JasonGrass/auto-extension-manager
auto-extension-manager 是一个开源的浏览器扩展管理器，支持自定义规则自动启用或禁用扩展，提供多种匹配条件和动作，以及批量导出 / 导入扩展功能，同时支持多语言和丰富的配置选项。
优雅的查看照片的专业信息 EXIF，本地运行不上传云端，还是比较安全的。
经典街机糖豆人游戏在线版本。
https://github.com/blinko-space/blinko
Blinko 是一个创新的开源项目，专为那些想要快速捕捉和组织转瞬即逝的想法的个人而设计。Blinko 允许用户在想到想法的那一刻就无缝地记下想法，确保不丢失任何创造力的火花。
