谷歌插件:无需登录一键复制 CSDN 代码

需求

前段时间有小伙伴提了个烦恼,说是 CSDN 博客在未登录状态下无法复制代码,必须登陆才能复制,不像博客园、掘金能直接复制,很不方便。一般来说网站禁止复制都是用 css 控制禁止交互的样式或者 js 拦截复制事件,直接打开谷歌控制台就可以修改掉,但是不能每次都打开控制台来做,于是就有了做一个谷歌插件的想法。

小编的插件已经发布到谷歌商店了,插件实现了无需登录一键复制 CSDN 代码,目前仅支持浏览 https://blog.csdn.net/ 时复制代码。

无需登录一键复制 CSDN 代码

这里先介绍下如何使用。

安装

Chrome 商店

  1. 进入 Chrome 网上应用商店
  2. 搜索:一键复制csdn代码

Chrome 网上应用商店 一键复制csdn代码

提醒:认准提供方是 https://lwebapp.com

源码安装

  1. clone 源码
    git clone https://github.com/openHacking/copy-csdn.git
  2. 谷歌浏览器,从右上角菜单->更多工具->扩展程序可以进入插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问
  3. 勾选开发者模式,即可以文件夹的形式直接加载插件

使用

安装之后无需额外设置,打开 CSDN 博客就可以体验效果了

  1. 打开任意一个 CSDN 博客即可开始复制代码 CSDN 博客地址
  2. 未登录 CSDN 状态下,支持选中代码
  3. 未登录 CSDN 状态下,代码右上角按钮一键复制

原理

这里简要介绍下实现原理。

首先不能框选代码的问题比较好解决,因为我发现是 CSS 控制的,我们把代码precode标签的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 入手。

  1. 找到所有的复制按钮
  2. 将按钮上的点击事件移除掉,克隆按钮再替回去
  3. 重新添加点击事件

下面贴一段核心代码

// 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 阅读字符串转换在线屏幕录制

参考

评论