实现鼠标复制内容同时发送至服务器的chrome扩展插件

有一需求

在页面上用鼠标复制可以将复制的文本传到服务器，然后服务器再进行处理后发送到需要的地方

带着需求写了个chrome的扩展

先放目录

地址栏输入: chrome://version/
打开页面后你会看到一些关于chrome的东西，咱们目前关注 "个人资料路径"

根据路径打开这个文件夹

在里面新建一个文件夹(自定义扩展的文件都放在里面了)
在新建的文件夹中创建一个 manifest.json (固定名称)

这两条也是固定的

"manifest_version": 2,
"version": "1.0",

content_scripts: 这里面是放大招的地方
matches: 你想让扩展可以在哪里使用，也可以设置为 "http://*/*","https://*/*"

{
  "matches": ["http://www.ifeng.com/*","https://github.com/*","http://www.csdn.net/*"],
  "js": ["script.js"]
}

插件做一半了，现在看需求的实现

document.selection: 代表当前激活的选中区
document.getSelection: get选中的内容，记得做字符串处理
document.onmouseup: 鼠标按键按住松开事件

将选中的内容处理以后使用ajax发送到服务器，当然也可以使用其他的方式

服务端处理

这里就只是将数据发到服务器，然后服务器再将数据返回回来，你也可以试一试其他的操作

处理跨域

处理请求并返回数据

// 处理请求    
app.get('/:text', (req, res, next) => {
  let reqText = req.query.text
  res.send(reqText)
}).listen(3001, console.log(3001))

现在需求插件就写完了，再来看看如何放到chrome上

1.浏览器右上角的仨竖点
2.找到 更多工具 --> 扩展程序 --> 把开发者模式的勾打上 --> 加载已解压的扩展程序(就是上面咱们创建的自定义扩展文件夹)
3.然后就去试试吧

项目源码