[开源] CopyRef - 一键复制标签页地址（Markdown）浏览器扩展，使用 WXT、TailwindCSS、Shadcn-Vue 实现。

[simonmao]

CopyRef 是一款开源的浏览器扩展工具，旨在帮助你快速复制当前标签页的 URL ，并以 Markdown 格式生成引用链接，方便在笔记、文档和博客中使用。

背景

在做笔记的时候，经常会引用一些页面的地址，之前也在网上用过类似的一些扩展，没有我想要的效果，如下这些原因：

1. 功能较多
2. UI 简陋
3. 侵入内容
4. 不开源
5. 不支持富文本/编辑器，比如复制的是纯文本的 MD 格式，不会自动转换成 Link

同时为了学习 WXT 等一些框架，所以我花了一点时间来实现这个工具，如果你正在学习 WXT 、Tailwind CSS 、Shadcn-Vue ，那这个项目可能会给你带来少许帮助，因为 Commit 我按步骤来一步一步提交。

安装地址

Chrome Web Store

GitHub

理论还支持 Firefox 和 Edge ，可以自行编译。

功能特点

• 快速复制：一键获取当前标签页 URL 。
• Markdown 格式支持：自动生成 [标题](URL) 格式的链接，方便在笔记、文档和博客中使用。
• 轻量高效：扩展小巧，加载快速，无侵入页面内容。
• 开源安全：插件代码完全开源，可自行下载安装。

项目组件

• WXT - 浏览器扩展框架
• Tailwind CSS - 高效的样式工具
• Shadcn for Vue - UI 组件库

[kytrun]

javascript: (async () => { await navigator.clipboard.writeText(`[${document.title}](${document.location.href})`)})();

[simonmao]

@kytrun 这种方案考虑过，对于我来说存在几个问题：

1. 还需要完善，因为复制到富文本变纯文本（例如苹果备忘录）；
```
javascript: (async () => { let t = document.title, u = location.href, h = `<a href="${u}">${t}</a>`, m = `[${t}](${u})`; try { await navigator.clipboard.write([new ClipboardItem({ "text/html": new Blob([h], { type: "text/html" }), "text/plain": new Blob([m], { type: "text/plain" }) })]) } catch (e) { await navigator.clipboard.writeText(m) } })();
```
2. 不支持快捷键
3. 如果书签栏隐藏，无法执行

[eryajf]

需求是根据选中的内容，自动生成 md 格式的链接，不知这个是否支持。

[simonmao]

@eryajf 好建议！已实现，同步提交审核。

[eryajf]

@simonmao #4 看到最新版本已经支持了，非常棒，我看现在的使用逻辑是，页面选中，然后点击一下图标，会复制到粘贴板，希望能支持通过快捷键复制到粘贴板就完美了。比如先选中，然后按下快捷键，就完成复制。

[simonmao]

@eryajf 默认支持快捷键复制的，你试试 control + shift + c ，或者你打开扩展的快捷键进行自定义设置。

[xunqin]

op 看看这个

https://chromewebstore.google.com/detail/tab-grab/jcblcjolcojmfopefcighfmkkefbaofg

[simonmao]

@xunqin 谢谢分享。我粗略看了下，功能太多了，不够高效，我这个解决单一问题。