一个可自定义的Chrome浏览器跑马灯插件，支持自定义文字内容、文字颜色和背景颜色。
- 🎨 完全自定义：在插件界面直接编辑文字、颜色，无需修改代码
- 🔄 无缝循环：文字连续不断地从右向左滚动，完全无缝
- 💾 自动保存：设置自动保存到浏览器，下次打开自动加载
- 👀 实时预览：修改设置后立即在预览区域看到效果
- 🎯 简单易用：一键启动/停止，操作简单直观
- 🔒 隐私保护：完全本地运行，不联网，不收集任何数据
-
下载源码
git clone https://github.com/Howe813/marquee-chrome-extension.git cd marquee-chrome-extension -
打开Chrome扩展管理页面
- 在地址栏输入：
chrome://extensions/ - 或通过菜单：更多工具 → 扩展程序
- 在地址栏输入：
-
启用开发者模式
- 在页面右上角打开"开发者模式"开关
-
加载插件
- 点击"加载已解压的扩展程序"
- 选择下载的项目文件夹
- 完成！
- 前往 Releases 页面
- 下载最新版本的
marquee-plugin-v3.zip - 解压到本地文件夹
- 按照方法一的步骤2-4加载插件
-
打开插件
- 点击浏览器工具栏中的插件图标
-
自定义设置
- 显示文字：输入想要显示的文字（最多50字符）
- 文字颜色：使用颜色选择器或输入十六进制颜色代码
- 背景颜色：设置渐变背景的起始和结束颜色
-
启动跑马灯
- 点击"启动跑马灯"按钮
- 当前网页顶部会显示跑马灯效果
-
停止跑马灯
- 点击"停止跑马灯"按钮
- 跑马灯消失，网页恢复正常
常用颜色的十六进制代码：
| 颜色 | 代码 |
|---|---|
| 白色 | #ffffff |
| 黑色 | #000000 |
| 红色 | #ff0000 |
| 绿色 | #00ff00 |
| 蓝色 | #0000ff |
| 黄色 | #ffff00 |
| 紫色 | #800080 |
| 橙色 | #ffa500 |
- 文字：别买垃圾
- 文字颜色：
#ffffff - 背景起始：
#ff0000 - 背景结束：
#cc0000
- 文字：理性消费
- 文字颜色：
#ffffff - 背景起始：
#00cc66 - 背景结束：
#009944
- 文字：Save Money
- 文字颜色：
#ffffff - 背景起始：
#ffd700 - 背景结束：
#ff8c00
- Manifest V3：使用Chrome扩展最新版本API
- 原生JavaScript：无依赖，纯JavaScript实现
- CSS动画：流畅的跑马灯滚动效果
- Chrome Storage API：保存用户设置
marquee-plugin/
├── manifest.json # 插件配置文件
├── popup.html # 弹窗界面
├── popup.css # 弹窗样式
├── popup.js # 弹窗逻辑和设置管理
├── content.js # 内容脚本（备用）
├── background.js # 后台服务
├── images/ # 图标文件夹
│ ├── icon-16.png
│ ├── icon-48.png
│ └── icon-128.png
├── .gitignore
└── README.md
- Clone项目到本地
- 在Chrome中加载未打包的扩展程序
- 修改代码后，在扩展管理页面点击刷新按钮
- 弹窗调试：右键点击插件图标 → 检查弹出内容
- 内容脚本调试：在网页上按F12打开开发者工具
- 后台脚本调试：在扩展管理页面点击"service worker"
- ✨ 新增：自定义文字内容功能
- ✨ 新增：自定义文字颜色功能
- ✨ 新增：自定义背景颜色功能（支持渐变）
- ✨ 新增：实时预览功能
- ✨ 新增：自动保存和加载设置
- 🎨 改进：全新的弹窗界面设计
- ✨ 新增：真正的无缝循环滚动效果
- 🐛 修复：文字滚动断开的问题
- ⚡ 优化：动画性能和流畅度
- 🎉 初始版本发布
- ✅ 基础跑马灯功能
Q: 设置会丢失吗？
A: 不会！设置会自动保存在浏览器中，除非你卸载插件或清除浏览器数据。
Q: 可以在不同电脑上同步设置吗？
A: 可以！如果你登录了Chrome账号，设置会自动同步到所有设备。
Q: 插件会影响网页性能吗？
A: 不会。插件使用CSS动画，性能开销极小，不会影响网页正常使用。
Q: 支持其他浏览器吗？
A: 目前仅支持Chrome和基于Chromium的浏览器（如Edge、Brave等）。
欢迎提交Issue和Pull Request！
如果这个项目对你有帮助，请给个⭐️Star支持一下！
理性消费，拒绝垃圾！ 💪✨