Greasy Fork

Greasy Fork is available in English.

Doro表情包面板 一键爆炸

可自定义添加/删除表情,支持多套表情包切换,支持收藏功能,点击表情包直接插入到光标位置,带磨砂质感浮动面板与开关 + 插入提示

当前为 2025-10-12 提交的版本，查看 最新版本。

作者
阿莉雅
评分
0 0 0
版本
20.1
创建于
2025-10-08
更新于
2025-10-12
大小
65.5 KB
许可证
MIT
适用于

🌸 花火御用表情包面板 - 一键爆炸

一个为论坛社区打造的表情包快速发送工具，带有精美的磨砂玻璃UI设计

版本 平台 许可

✨ 功能特点

🎯 核心功能

  • 一键发送表情包 - 点击表情直接插入并自动发送到输入框
  • 随机表情池 - 从1000+个表情包中随机显示20个，每次都不一样
  • 换一批功能 - 点击按钮即可更换为另外20个随机表情
  • 自定义表情 - 支持添加自己喜欢的表情包URL
  • 表情管理 - 可以删除不需要的自定义表情

🎨 界面设计

  • 磨砂玻璃效果 - 现代化的毛玻璃UI设计（Glassmorphism）
  • 悬浮按钮 - 右下角可爱的浮动触发按钮
  • 优雅动画 - 流畅的过渡动画和悬停效果
  • 自适应布局 - 面板大小自适应，最大高度50vh

🖼️ 图片处理

  • 智能压缩 - 使用wsrv.nl服务自动调整图片尺寸为60x60
  • 保持动画 - GIF格式完美支持，保持动画效果
  • CDN加速 - 使用jsDelivr CDN加速图片加载

🚀 安装使用

1️⃣ 安装浏览器扩展

首先需要安装用户脚本管理器（二选一）：

2️⃣ 安装脚本

  1. 打开 Tampermonkey 管理面板
  2. 点击 添加新脚本
  3. 复制 emoji.js 的全部内容
  4. 粘贴到编辑器中
  5. 点击 文件 → 保存 或按 Ctrl+S

3️⃣ 访问支持的网站

脚本会在以下网站自动激活：

📖 使用说明

基础操作

  1. 打开面板

    • 点击右下角的悬浮按钮（美团图标）
    • 面板会从右下角弹出

  2. 发送表情

    • 点击任意表情包
    • 表情会自动插入到输入框并发送
    • 显示"✨ 表情包已发送！"提示

  3. 换一批表情

    • 点击面板底部的 🔄 换一批 按钮
    • 从表情池中随机选择20个新的表情
    • 显示"🔄 已刷新！(共XXX个表情池)"

高级功能

添加自定义表情

  1. 复制图片链接（支持 .gif/.png/.jpg/.webp/.avif）
  2. 粘贴到面板底部的输入框
  3. 点击 ✓ 添加 按钮
  4. 自定义表情会出现在列表最后

删除自定义表情

  1. 点击 🗑️ 删除 按钮进入删除模式
  2. 自定义表情会显示红色虚线边框
  3. 点击要删除的表情
  4. 确认删除
  5. 点击 ✓ 完成 退出删除模式

⚙️ 配置选项

脚本顶部提供了一些可自定义的配置：

// GitHub仓库配置
const REPO_BASE_URL = "https://cdn.jsdelivr.net/gh/1143520/doro@main/loop/";

// 图片处理配置
const USE_IMAGE_PROXY = true;  // 是否使用图片代理服务
const TARGET_SIZE = "60";      // 目标尺寸（像素）

修改图片尺寸

找到 TARGET_SIZE 配置：

const TARGET_SIZE = "60";  // 改为 "80" 可以显示更大的表情

关闭图片代理

如果不需要调整图片尺寸：

const USE_IMAGE_PROXY = false;  // 改为 false 使用原始图片

🔧 技术细节

技术栈

  • 纯原生JavaScript - 无任何依赖，轻量级
  • CSS3 - 现代化样式和动画
  • LocalStorage - 本地存储自定义表情
  • GitHub API - 动态获取表情包列表

图片处理流程

  1. 获取表情列表

    GitHub API → 获取所有GIF文件名 → 存储到 allGifFiles[]

  2. 随机选择

    allGifFiles[] → 随机打乱 → 选择前20个 → defaultEmojiList[]

  3. 显示预览

    jsDelivr CDN → 直接显示原图 → 面板预览

  4. 发送表情

    原图URL → wsrv.nl处理 → 调整尺寸 → 插入Markdown → 自动发送

关键API

GitHub API

https://api.github.com/repos/1143520/doro/contents/loop

jsDelivr CDN

https://cdn.jsdelivr.net/gh/1143520/doro@main/loop/{filename}

wsrv.nl 图片处理

https://wsrv.nl/?url={原图URL}&w=60&h=60&fit=contain&n=-1

🎨 UI预览

┌─────────────────────────────┐
│ 🌸 花火表情包面板        ✖ │
├─────────────────────────────┤
│ [表情1] [表情2] [表情3]     │
│ [表情4] [表情5] [表情6]     │
│ [表情7] [表情8] [表情9]     │
│        ... (滚动查看)        │
├─────────────────────────────┤
│ [粘贴图片链接...]           │
│ [✓ 添加] [🗑️ 删除] [🔄 换一批]│
└─────────────────────────────┘

📝 快捷键

操作 说明
点击悬浮按钮 打开/关闭面板
点击表情 发送表情
点击 ✖ 关闭面板
点击 🔄 刷新表情列表

🐛 调试模式

打开浏览器控制台（F12）可以看到详细的日志信息：

🔄 开始从GitHub获取表情包列表...
✅ 成功加载 1000 个表情包
🔄 点击刷新按钮
📊 当前状态: allGifFiles.length = 1000, isLoading = false
🔄 刷新前: 20 个表情
📦 表情池总数: 1000 个
✅ 刷新后: 20 个表情
🎲 随机表情: ['xxx.gif', 'yyy.gif', 'zzz.gif']

❓ 常见问题

Q: 为什么表情包加载失败？

A: 检查网络连接，确保可以访问 GitHub API。如果API失败，脚本会自动使用20个备用表情。

Q: 如何更换表情包来源？

A: 修改 REPO_BASE_URL 和 REPO_API_URL 指向你自己的GitHub仓库。

Q: GIF动画变成静态图了？

A: 确保 USE_IMAGE_PROXY = true 并且URL参数中包含 n=-1。

Q: 能否支持更多网站？

A: 在脚本头部添加 @match 规则：

// @match        *://你的网站.com/*

Q: 自定义表情存储在哪里？

A: 使用 LocalStorage 存储在浏览器本地，键名为 hanabi_custom_emojis。

🔄 更新日志

v0.1 (2025-10-08)

  • ✨ 初始版本发布
  • 🎨 磨砂玻璃UI设计
  • 🔄 随机表情池功能
  • ➕ 自定义表情管理
  • 🖼️ 图片智能压缩
  • 📦 jsDelivr CDN加速

📄 许可证

MIT License - 自由使用和修改

👨‍💻 作者

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🌟 致谢

用 ❤️ 和 ☕ 制作