悬停提示框生成器 - 纯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 是更便捷的选择。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
将普通HTML标记转换为符合JSX语法的代码,自动处理class→className、行内样式对象化等。
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
勾选需要展示的选项(接受/拒绝/设置),生成纯净HTML/JS代码,自行套用样式。
上传PDF,选择需要保留的页码(如1,3-5),生成仅含这些页面的新文档。
选择背景图片(或使用占位色),配置标题、副标题和按钮,生成Hero区域代码。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
配置内容和位置,生成使用最新HTML popover属性的轻量弹窗代码,无需JavaScript。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
模拟显示各个HTML元素在典型浏览器中的默认CSS属性表,辅助CSS Reset决策。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
将普通HTML片段一键转为React可用的JSX,处理class→className、style等。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
在线YAML与JSON格式互相转换,适用于配置文件与数据交换,前端解析安全快速。
粘贴网页上的 HTML 表格代码,自动提取数据并转换为 JSON 或 CSV 格式下载。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
随机可视化Skip List的层级结构和快速查找过程,对比链表效率。
实时预览并生成符合隐私法规的Cookie同意横幅HTML/CSS/JS代码,一键嵌入网站。
输入 gRPC 服务地址和方法,构造 JSON 请求体,观察转为二进制帧并接收响应解码。
粘贴PHP print_r或var_export输出,智能解析为有效的JSON。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
显示文本中的非换行空格、全角空格等隐藏字符映射。
粘贴JSON对象,一键转换为简洁的YAML格式,方便编写配置文件。
通过勾选元素关系(子孙、兄弟)、属性、伪类等条件,自动生成精确的CSS选择器字符串。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。