【简单实现一个chrome插件】破解不能复制以及复制过后有多余的内容

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

地址戳这里github地址，欢迎star

背景

在某些网页上，可能并不允许用户复制内容，需要进行登录操作；或者还有一些网页复制过后会加上版权信息，粘贴完了过后还得删掉，很费时。

作为一个资深的复制粘贴工程师怎么能忍，于是考虑做一个chrome小插件处理这两个问题。

思路

第一个问题思路

一般网站会使用use-select: none来禁止用户鼠标选择，所以我们只需要注入一个use-select: text，让所有内容都可以被选择。

第二个问题思路

一般网站是通过监听copy事件，然后在复制的文本后面加上版权信息的文字，再写入剪贴板中。这里我们可以在document上加一个copy事件，再往剪贴板中写入一次原始鼠标复制的值。

开干

说干就干，整体代码也不多，首先chrome插件的主体配置文件是manifest.json，完整代码如下：

{
  "name": "复制插件",  // 对应位置如下图
  "version": "1.0",   // 对应位置如下图
  "description": "可复制代码，并去掉版权信息",   // 对应位置如下图
  "manifest_version": 3,  // 当前版本，最新版是3，也可以用2，主要是api有一些变化
  "icons": {   // 不同尺寸的图标，展示在不同的位置上
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "content_scripts": [  // 注入的信息
    {
      "matches": ["<all_urls>"],  // <all_urls>指的是在所有的网页中都生效，也可以写入一些特定的网页
      "css": ["./custom.css"],  // 注入页面的css
      "js": ["./custom.js"],    // 注入页面的js
      "run_at": "document_end"  // 该脚本在什么时候注入，有document_start, document_end, document_idle
    }
  ]
}

然后分别就是解决问题的css和js文件代码：

css:

* {
  user-select: text !important;
}

js:

/** 监听copy事件 */
document.addEventListener(
  "copy",
  function (e) {
    e.stopPropagation(); // 取消事件传递，到这里就不再执行后面的copy事件
    e.preventDefault(); //取消默认事件，才能修改复制的值
    const copyTxt = window.getSelection(0).toString();  //复制的内容
    if (e.clipboardData) { // 根据兼容性，执行写入剪贴板的方法
      e.clipboardData.setData("text/plain", copyTxt);
    } else if (window.clipboardData) {
      return window.clipboardData.setData("text", copyTxt);
    }
  },
  true // 使用事件捕获机制，先执行外层的copy方法，再执行内层的copy方法
);

这些就是主要的逻辑了，完整代码见github，使用的时候下载下来，然后在chrome扩展程序中点击“加载已解压的扩展程序”就ok了。