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

SHERlocked93 发布于2019-08-21 16:45 / 1551人阅读

摘要：有一需求在页面上用鼠标复制可以将复制的文本传到服务器，然后服务器再进行处理后发送到需要的地方带着需求写了个的扩展先放目录地址栏输入打开页面后你会看到一些关于的东西，咱们目前关注个人资料路径根据路径打开这个文件夹在里面新建一个文件夹自定义扩展

有一需求

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

带着需求写了个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.然后就去试试吧

项目源码

混合云云服务器阿里云复制一个服务器的内容服务器发送事件的内容 chrome webrtc插件 Chrome 插件 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88676.html

推荐几款程序员必备、常用的chrome扩展插件

摘要：作为一名资深码农，结合身边一群民工的真实体验，小编有那么一点权威给各位推荐几款程序员必备常用的扩展插件。插件是一款为谷歌浏览器定制的非常强大的一款管理插件。作为一名资深码农，结合身边一群IT民工的真实体验，小编有那么一点权威给各位推荐几款程序员必备、常用的chrome扩展插件。1.Click&Clean下载地址：http://www.cnplugins.com/offi...Clic...

gityuan 2019-06-27 15:07 评论0 收藏0
超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一个不一样的浏览器编辑器。一谷歌浏览器插件谷歌访问助手强烈推荐一键安装，无需其他配置，即可访问谷歌。谷歌浏览器是很耗内存的，该插件会自动挂起长时间未使用的网页，来释放系统资源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一个不一样的 GitHub、浏览器、...

Rango 2019-08-22 15:45 评论0 收藏0
了解Chrome扩展程序开发

摘要：了解扩展程序开发本文大量借鉴图灵电子书扩展及应用开发首发版首先，我尝试来用简单几句话描述一下扩展程序扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。提供了接口，允许扩展对用户的历史进行管理。了解Chrome扩展程序开发本文大量借鉴图灵电子书-Chrome扩展及应用开发（首发版）首先，我尝试来用简单几句话描述一下Chrome扩展程序： Chrome扩展主要用于对浏览器功能的增...

lemanli 2019-08-21 18:46 评论0 收藏0
Chrome扩展程序开发

摘要：这一步可以参考应用商店上传扩展程序一文最后终于搞定，线上可见学习资源建立扩展程序插件开发攻略如何成为一名应用开发者扩展的开发下一步插件功能丰富化插件可在网页上高亮展示标记的文本用重构需要使用框架吗注本文源码位于仓库，线上产品见和十一在家无聊时开发了这个项目。其出发点是想通过chrome插件，来保存网页上选中的文本。后来就顺手把前后端都做了(Koa2 + React)： chrome...

dinfer 2019-08-21 14:36 评论0 收藏0