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

#extension

需求

前段时间有小伙伴提了个烦恼，说是 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 控制的，我们把代码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 入手。

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

参考

评论