MoeKoe Music Extension MoeKoe Music 浏览器插件版,基于 MoeKoeMusic Web 构建,并在浏览器扩展内完成 API 路由兼容。 🌎 GitHub仓库 特性 点击浏览器插件图标后打开独立窗口运行 MoeKoeMusic。 无需用户配置 API 地址,也无需额外启动本地 API 服务。 保留 MoeKoeMusic 原有 Web 页面与交互,兼容浏览器扩展运行环境。 快速开始 环境要求 Node.js 20 或更高版本 Git Chrome / Edge 等 Chromium 内核浏览器 安装依赖 git submodule update --init --recursive npm install npm run install:app npm run install:app 会分别安装 MoeKoeMusic 与 MoeKoeMusic/api 的依赖。安装后建议检查子模块工作区,避免把上游 lockfile 的非预期变化提交进去。 构建扩展 npm run build 构建产物会输出到: dist/extension 安装到浏览器 打开 chrome://extensions 或 edge://extensions。 启用“开发者模式”。 点击“加载已解压的扩展程序”。 选择本项目下的 dist/extension 目录。 不要加载源码目录 extension,否则浏览器会提示清单或背景脚本加载失败。 ...
MoeKoe Music 插件市场设计
在做插件市场之前,先有的是 MoeKoe 的普通插件系统。 当时我想解决的问题不是某一个具体功能,而是一个更通用的问题:播放器里总会冒出很多小需求,有些人想改界面,有些人想加一个工具弹窗,有些人想接自己的服务。如果每个想法都往主程序里塞,主程序会越来越重,也越来越难维护。 所以我一开始给插件系统定的方向很明确:主程序只提供插件运行环境和管理入口,具体功能交给插件自己做。插件能独立安装、独立卸载,坏了也尽量不要影响播放器本体。 上一篇我写的是 MoeKoeMusic-Plugins 这个插件登记仓库。那边解决的是“插件市场的数据怎么产生”:用户用 Issue 提交,Action 校验,维护者审核,通过后写进 plugins.json。 但光有登记仓库还不够。真正对用户来说,插件市场不是 GitHub 上的一份 JSON,而是客户端里一个能看、能搜、能安装、能更新的入口。 所以这篇就换到 MoeKoe Music 主项目里,专门聊客户端的插件市场部分。 为什么选 Chrome Extension 这一套 MoeKoe 是 Electron 应用,Electron 本身就有加载扩展的能力。既然底层已经能跑 Chrome Extension,那就没必要再从零设计一套插件格式。 这样做有几个好处: 第一,插件作者不用学一套完全陌生的格式。manifest.json、popup.html、background.js 都是浏览器扩展里很常见的概念。 第二,插件天然有清单文件。主程序可以先读 manifest.json,判断插件名称、版本、描述、权限、弹窗入口、最低支持版本这些信息。 第三,Electron 可以直接加载插件目录,不需要我自己写一个脚本沙箱。 展示、搜索、分页和状态 插件市场不是只要能安装就行,还要能快速判断: 这个插件是干什么的 我有没有装过 我装的是不是旧版本 这个插件有没有更高版本要求 它有没有联网、文件访问、本地二进制这些风险点 分页,搜索,更新,状态 所以市场卡片里展示的不只是“安装”按钮。 确保插件目录存在 调用Electron下载安装、卸旧版、装新版 注册插件相关 IPC 加载 Chrome 扩展 加载 Native Host 索引和授权系统 已安装插件 插件管理页里的“已安装插件”不是只读 Electron 当前加载的扩展。它会把两类信息合并: session.defaultSession.getAllExtensions() 拿到已加载扩展 scanExtensions() 扫描磁盘插件目录,读取 manifest、图标、popup、Native Host 声明 前端拿到这些字段后,就能显示: 插件名称、描述、版本、作者 图标 是否是 MoeKoe 适配插件 当前客户端版本是否低于插件 minversion 是否有 popup 设置页 是否声明了本地二进制程序 Native Host 这是2.0版本新增的插件功能. 插件系统里最需要小心的是 Native Host,也就是插件附带本地可执行程序的能力。 普通前端插件再怎么折腾,大多还是在浏览器扩展模型里。但本地程序不一样。它一旦启动,就具备普通桌面程序的系统访问能力。 ...
# MoeKoeMusic-Plugins Design Philosophy
When I first started building the MoeKoe Music plugin ecosystem, there was no online plugin marketplace feature yet. Later, based on community suggestions, the plugin marketplace came into being [Add official/community plugin repositories to extend product functionality] If plugins can be developed by the community, how should the plugin marketplace be managed? The most straightforward approach would be to pull all plugin source code into a single monorepo. But the more I thought about it, the more awkward it felt. Each plugin has its own author, its own release cadence, its own build process. Stuffing them all into the official repo would not only drive up maintenance costs but also blur the lines of responsibility. ...
I'm making 18+ games with losing "equipment drop" 🔞
Continuing from: 《同一个动画,我用三种技术栈实现的区别?》 WebGL Rock-Paper-Scissors Mini Game (Anime Style) The rules are pretty standard: Rock > Scissors Scissors > Paper Paper > Rock But the fun part is: Losing means taking off clothes. Yep, it’s that straightforward. The Origin Was Actually “I Wanted to Study Sprite Sheets” At first, I had no intention of making a game at all. I just wanted to study: atlas sprite layer compositing animation clipping Stuff like that. Then I thought: “There’s gotta be a real use case, right?” ...
What are the differences when I implement the same animation with three tech stacks?
Recently I did a rather interesting little experiment. I implemented a small anime character animation effect using three different approaches: WebGL Canvas 2D Pure DOM + CSS The effect itself isn’t complicated: Eye blinking Eyebrow/lower eyelid联动 Sweat droplet gently swaying Ahoge (hair antenna) swinging But the really interesting part isn’t actually “making it work.” It’s: When implementing the same thing with three different tech stacks, how different are they really? ...
Kill the person who writes code by hand
Lately, while I’m coding, I have a strange feeling. Not that I can’t code or don’t want to. But— It feels like I’m becoming less and less necessary. Previously, for a feature from requirement to launch, the path was basically this: I understand the requirement → design the solution → write code → debug → fix bugs → launch What does it look like now? I describe the requirement → AI writes the code → AI fixes the bugs → I glance at it → launch ...
履行一场二十年的约定
This story sounds like something out of a TV drama, but it actually happened to me. I’m someone who’s very sentimental. Due to family reasons, I left that place at an early age. The concept of “growing up together (childhood friends)” has always been vague to me—and because of this, I’ve always envied those who could grow up side by side with deep affection. After growing up, I always felt like I was constantly drifting. Habitually leaving early, abandoning my friends behind. ...
🌸 April, cherry blossoms, and a lie that never stops
April is a month that begins with cherry blossoms. It also began with the anime titled April Is Your Lie. Some moments are defined by the works that surround them. Like now, whenever April arrives, it’s hard not to recall that line: “April is your lie.” One day, you suddenly look up and notice a tree you’ve never paid attention to before, already quietly blooming in pink. 📷 A Backdrop Straight Out of an Anime That day, I just saw two people ahead— ...
Nightingale Cottage Visit Record
Last weekend, I visited a small shop with a 2D-style vibe—Yakumo House. Actually, I’d seen this place before while scrolling online. It was described as an interesting little hideout tucked inside a park, and anyone who loves 2D culture or Touhou Project would probably feel right at home. Since I had some free time on the weekend, I decided to check it out. The first thing that hit me when I walked in was: This place is even more “high-concentration” than I imagined. ...
🎉 First mirrorless camera for young people
🎉 New Achievement Accomplished I recently upgraded my photography gear, swapping out my Canon 60D, which I’d been using for a while, for a Canon R50. One is a classic mid-range DSLR from 2010, the other an entry-level mirrorless camera from 2023. These two cameras span over a decade of technological evolution, and I wanted to experience what modern mirrorless cameras are really like. 1. My First DSLR: Canon 60D The Canon 60D was once the “dream camera” for many photography enthusiasts. ...