悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
UD5工具箱
桌面端:直接拖拽蓝色按钮到浏览器书签栏
移动端:点击下方复制按钮,手动创建书签粘贴
Bookmarklet 是一种特殊的浏览器书签,它以 javascript: 协议开头,点击后可以在当前页面上执行 JavaScript 代码。它不需要安装任何扩展,轻量且跨平台,是网页自动化和增强浏览体验的利器。与普通书签不同,小书签不导航到新页面,而是在当前页面上下文中运行脚本。
桌面端:将蓝色按钮直接拖拽到浏览器的书签栏即可。点击书签栏中的小书签即可在当前页面执行代码。
移动端:复制生成的 bookmarklet URL,手动在浏览器中创建新书签,将复制的链接粘贴到 URL 字段中保存。
Bookmarklet 在点击时会在当前页面的上下文中执行 JavaScript,拥有与该页面相同的权限。建议:① 只运行自己编写或信任来源的小书签;② 不要在包含敏感信息的页面(如网银)运行不明来源的小书签;③ 使用 void 前缀可防止意外页面跳转。本工具生成的代码会默认用 IIFE 包裹,隔离变量作用域。
常见原因:① 代码中存在语法错误;② 某些网站设置了 CSP(内容安全策略),禁止内联脚本执行;③ 编码后的 URL 超出了浏览器长度限制(通常约 2000-4000 字符);④ 代码依赖了页面中不存在的 DOM 元素。建议先在本工具中开启「压缩代码」选项减小体积,并在控制台中测试代码逻辑。
有。不同浏览器的 URL 长度限制不同:Chrome 约 2MB(但书签同步限制更严格),Firefox 约 64KB,Safari 约 80KB,IE 约 2KB。实际使用中建议将编码后的 bookmarklet 控制在 2000 字符以内,以确保跨浏览器兼容和同步顺畅。开启「压缩代码」可以有效减小体积。
移动端浏览器通常不支持拖拽添加书签。替代方案:① 复制本工具生成的 bookmarklet URL;② 在浏览器中手动添加书签,将 URL 粘贴进去;③ 保存后,在需要使用的页面打开书签即可。Safari 和 Chrome 移动版均支持此方式。也可以使用第三方书签管理工具辅助。
IIFE(立即执行函数表达式)用 (function(){...})() 包裹代码,可以创建独立作用域,避免变量污染页面全局环境。void 前缀确保整个表达式的返回值是 undefined,防止代码的返回值意外触发浏览器导航(例如返回一个字符串时,某些浏览器会将其渲染为页面内容)。两者结合使用是最佳实践。
Bookmarklet 是轻量级的,无需安装、无需权限、跨浏览器通用、即点即用。浏览器扩展功能更强大(可访问浏览器 API、后台运行、跨域请求等),但需要安装、占用资源、需审核上架。对于简单的页面操作和自动化任务,Bookmarklet 是更便捷的选择。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
输入 JavaScript 函数声明,自动生成符合规范的 JSDoc 注释模板。
将普通HTML标记转换为符合JSX语法的代码,自动处理class→className、行内样式对象化等。
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
编写主线程和 Worker 内的逻辑模板,自动生成分离的 JS 文件代码,加速 Worker 开发。
通过 iframe 或 Web Components 将多个独立前端应用组合到同一个页面,展示微前端概念。
勾选需要展示的选项(接受/拒绝/设置),生成纯净HTML/JS代码,自行套用样式。
上传PDF,选择需要保留的页码(如1,3-5),生成仅含这些页面的新文档。
选择背景图片(或使用占位色),配置标题、副标题和按钮,生成Hero区域代码。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
配置内容和位置,生成使用最新HTML popover属性的轻量弹窗代码,无需JavaScript。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
模拟显示各个HTML元素在典型浏览器中的默认CSS属性表,辅助CSS Reset决策。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
粘贴 JSON 数据,自动生成对应的 TypeScript interface 或 type 定义,支持嵌套对象和数组。
将普通HTML片段一键转为React可用的JSX,处理class→className、style等。
载入简单控制网格,执行 Catmull-Clark 细分一次,观察光滑效果。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
编写函数并选择调用方式(普通、方法、call、apply、箭头等),输出 this 的值。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
动画展示 Kruskal 算法选择边和合并集合的过程,高亮生成树边。
提取 HTML 中所有内联 style,智能合并相同样式生成 class,并替换为类名以减小体积。
编写嵌套函数并单步执行,直观展示每个函数的作用域和闭包变量。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
编写 Lit 组件模板和属性,实时渲染并观察响应式更新,无需构建环境。
在线YAML与JSON格式互相转换,适用于配置文件与数据交换,前端解析安全快速。
粘贴网页上的 HTML 表格代码,自动提取数据并转换为 JSON 或 CSV 格式下载。