谷歌插件:无需登录一键复制 CSDN 代码
需求
前段时间有小伙伴提了个烦恼,说是 CSDN 博客在未登录状态下无法复制代码,必须登陆才能复制,不像博客园、掘金能直接复制,很不方便。一般来说网站禁止复制都是用 css 控制禁止交互的样式或者 js 拦截复制事件,直接打开谷歌控制台就可以修改掉,但是不能每次都打开控制台来做,于是就有了做一个谷歌插件的想法。
小编的插件已经发布到谷歌商店了,插件实现了无需登录一键复制 CSDN 代码,目前仅支持浏览 https://blog.csdn.net/
时复制代码。
这里先介绍下如何使用。
安装
Chrome 商店
- 进入 Chrome 网上应用商店
- 搜索:
一键复制csdn代码
提醒:认准提供方是 https://lwebapp.com
源码安装
- clone 源码
git clone https://github.com/openHacking/copy-csdn.git
- 谷歌浏览器,从右上角菜单->更多工具->扩展程序可以进入插件管理页面,也可以直接在地址栏输入
chrome://extensions
访问 - 勾选开发者模式,即可以文件夹的形式直接加载插件
使用
安装之后无需额外设置,打开 CSDN 博客就可以体验效果了
- 打开任意一个 CSDN 博客即可开始复制代码 CSDN 博客地址
- 未登录 CSDN 状态下,支持选中代码
- 未登录 CSDN 状态下,代码右上角按钮一键复制
原理
这里简要介绍下实现原理。
首先不能框选代码的问题比较好解决,因为我发现是 CSS 控制的,我们把代码pre
和code
标签的user-select
样式修改掉。
/* custom.css */
#content_views pre,#content_views pre code{
-webkit-touch-callout: auto !important;
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
}
然后处理代码块右上角的复制按钮,在未登陆状态下点击这个复制按钮后会触发登陆弹窗,所以我们从控制 js 入手。
- 找到所有的复制按钮
- 将按钮上的点击事件移除掉,克隆按钮再替回去
- 重新添加点击事件
下面贴一段核心代码
// content-script.js
buttons.forEach((btn) => {
// 更改标题
btn.dataset.title = "复制";
// 移除点击事件
btn.setAttribute("onclick", "");
// 克隆按钮
elClone = btn.cloneNode(true);
// 替回按钮
btn.parentNode.replaceChild(elClone, btn);
// 重新添加点击事件
elClone.addEventListener("click", (e) => {
// 实现复制
const parentPreBlock = e.target.closest("pre");
const codeBlock = $$("code", parentPreBlock);
copy(codeBlock.innerText);
e.target.dataset.title = "复制成功";
setTimeout(() => {
e.target.dataset.title = "复制";
}, 1000);
e.stopPropagation();
e.preventDefault();
});
});
因为这款插件的源代码是开放的,完整代码大家可以直接看我的 Github 仓库:https://github.com/openHacking/copy-csdn。
总结
以上基本解决了 CSDN 未登陆时不能复制代码的问题,功能上已经可以满足要求。可能还有很多不足的地方,大家发现了问题或者有其他需求的话,欢迎向我反馈。如果你有好的插件,也可以分享出来给大家。
最后分享一个小编做的一个在线工具箱:https://lwebapp.com/zh/tools,有很多好用的在线工具如头像生成器、在线 Mobi 阅读、字符串转换、在线屏幕录制
评论