首页
学习
活动
专区
工具
TVP
发布

小技巧 | Chrome 插件如何完成剪切板的操作!

之前写过一篇文章,谈到在开发 Chrome 插件时常用的一些 Tips 干货 | 盘点 Chrome 插件开发中那些关键的点!...有时候,我们可能需要通过浏览器操作系统剪切板,以此来简化操作、提升工作效率 本篇文章通过一个实例聊聊 Chrome 插件开发与剪切板的那些事 1....在 background.js 中,监听 Chrome 插件的安装事件,使用下面的语法创建一个右键菜单 语法: chrome.contextMenus.create({type:'normal',title...2-2 发送消息 从 Background 中发送消息,将解析后的数据发送给 Content Script 中 //background.js ......剪切板 在 Content Script 中,我们可以直接对剪切板进行操作,将消息内容拷贝到系统剪切板,然后使用 alert 在浏览器中弹出一个提示信息 需要注意的是,写入剪切板偶尔会出现异常,我们需要捕获异常

1.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

clipboard.js:最轻便的复制页面内容到剪切板JS

传统的复制页面内容到剪切板主要方法是通过 Flash,但是在现代浏览器中,Flash 逐渐没落,慢慢被淘汰,搜索了一圈,发现 clipboard.js 是目前实现该功能最轻便的工具。...clipboard.js 的使用方法 clipboard.js 只有3kb大小,无需 Flash,兼容所有现代浏览器,但是经过测试不支持微信内置浏览器。...使用还算简单,简单几步就搞定,下面简单介绍下clipboard.js的使用方法: 1....首先下载或者使用CDN的资源: <script type='text/javascript' src="https://cdn.staticfile.org/clipboard.<em>js</em>/1.5.15/clipboard.min.<em>js</em>...的演示 我爱水煮鱼是最好的博客 复制 clipboard.<em>js</em> 的事件 有时候我们需要一些用户反馈,在初始化对象的时候可以定义 success 和 error 两个事件: var clipboard

2.4K60

Chrome断点JS寻找淘宝签名sign

写了这篇文章淘宝sign加密算法 之后,很多人问我Chrome断点调试怎么做,今天会尽量详细聊聊。如果你用使用过Pycharm的断点,会更好理解。...我们还是以淘宝为例,使用Chrome的移动请求头打开这个网站,https://s.m.taobao.com/h5?q=%E9%9E%8B%E6%9E%B6,然后打开开发者工具。 ?...最终确定关键代码在第二个,也就是https://g.alicdn.com/mtb/lib-mtop/2.3.16/mtop.js 格式化代码,并搜索sign,确定代码位置。 ?.../// } 可以看到sign等于j,j等于h(d.token + "&" + i + "&" + g + "&" + c.data),感觉是一些字符串通过“&”连接起来,下一步就可以对js...想学更多搜索Chrome调试技巧。 本文还有些地方没有说清楚,比如如何清空缓存,最佳方法是Application中的Storage,将下面的所有Value清空。 ? 匆忙之中完成,若有不足,请指出。

10K40

如何使用异步剪切板 AsyncClipboard API

如何使用异步剪切板 AsyncClipboard API ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 长时间我们一直在使用 document.execCommand 来与剪切板做交互,尤其是基本上都在使用...clipboard.js 这个库,其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素,然后将要复制的文本写入到 textarea 元素中,最后调用 textarea 的 select...即便是使用一个简单的剪切板都这么费劲需要一个第三方库,而且剪切板的这种方法是同步的。同步方法交互剪切板的阻塞、有限的访问权限、跨浏览器体验不一致、对多种数据类型的支持有限等问题解决起来也是麻烦。...这里有篇文章讲述到底该如何用 JS 操作剪切板:https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript...无论如何,异步剪切板 Async Clipboard API 这个 API 在 Chrome 66 版本以上得到了支持: 我们可以在新版本中使用这个异步版本的剪切板,那么具体该如何使用这个 API 呢

1.5K40

开发Chrome插件获取当前页面Cookie

hl=zh-cn 效果是单机插件按钮,弹出一个端面 分析HelloWorld示例 四个文件,分别是一个html,一个json,一个js,和一个png格式的图片 看来插件开发不需要很多的技术储备,会js就够了...1.获取页面的cookie 2.先打印cookie到端面(控制台要每次审查再进去看,没端面那么方便) 3.把打印内容复制进剪切板 4.确认能够复制以后,整理cookie的格式,使cookie文本可以直接复制进...} }); }); }); }); Pasted image 20231230220712 点击看执行效果 可以观察到,已经能把cookie带到端面了 3.把打印内容复制进剪切板...cookieList.appendChild(li); cookiesText += li.textContent + '; '; } // 将获取到的 cookie 复制到剪切板...'; ' : ''); } // 将获取到的 cookie 复制到剪切板 navigator.clipboard.writeText(cookiesText

20510

你不可不知的腾讯混元大模型前端开发实战技巧

点击「复制当前标签页标题」,则把单条Markdown格式的标题写入到剪切板。 2. 点击插件图标,出现下拉菜单。点击「复制所有标签页标题」,则把多条Markdown格式的标题写入到剪切板。...如何把Markdown的格式的数据,写入到剪切板?开发步骤既然要开发Chrome插件,我只需要把我的需求清晰准确的告诉混元大模型,然后等它解答就可以了。...点击「复制当前标签页标题」,则把单条Markdown格式的标题写入到剪切板。 2. 点击插件图标,出现下拉菜单。点击「复制所有标签页标题」,则把多条Markdown格式的标题写入到剪切板。...如何把Markdown的格式的数据,写入到剪切板?带着这些需求和疑问,我向腾讯混元大模型发起了第一次提问:我想开发一款Chrome插件,插件名称是「复制markdown标题」。...无论是第1步还是第2步,最终的写入剪切板的操作,都在content.js中完成。这里我让混元大模型给我写了一个写入剪切板的方法,亲测可用。

45220

从0开始入门Chrome Ext安全(番外篇) -- Zoomeye Tools

--> 解析其中内容并提取其中的内容并按照格式写入剪切板中 当然这是人类的思维,结合chrome插件的权限体系和通信方式,我们需要把每一部分拆解为相应的解决方案。...解析其中内容并提取其中的内容并按照格式写入剪切板中 在content script读取到页面内容之后,需要通过sendResponse反馈数据。...当popup收到数据之后,我们需要通过特殊的技巧把数据写入剪切板 function copytext(text){ var w = document.createElement('textarea.../jquery-3.4.1.js", "js/background.js"] }, "content_scripts": [ { "matches": ["*://*.zoomeye.org.../*"], "js": ["js/contentScript.js"], "run_at": "document_end" } ], "content_security_policy

35710
领券