用于浏览器的复用数据处理方法以及装置、电子设备、存储介质
文献发布时间:2023-06-19 18:34:06
技术领域
本申请涉及辅助工具领域,具体而言,涉及一种用于浏览器的复用数据处理方法以及装置、电子设备、存储介质。
背景技术
在浏览器中浏览页面时,或进行开发工作时,经常需要用到粘贴辅助的功能,在不借助其他工具的情况下,用户复制的数据只能保存最新的一次,之前复制的数据都无法找到,必须重新复制。
相关技术中,粘贴板管理工具,比如Office Word的粘贴板,或者WPS的粘贴板工具,但这种工具都是与其他软件捆绑安装的,无法单独使用,且使用时非常消耗内存,无法支持跨平台。
针对相关技术中辅助工具使用效果不佳的问题,目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种用于浏览器的复用数据处理方法以及装置、电子设备、存储介质,以解决辅助工具使用效果不佳的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种用于浏览器的复用数据处理方法。
根据本申请的用于浏览器的复用数据处理方法包括:
监听浏览器中的目标事件;
根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权;
获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据;
将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
在一些实施例中,所述目标事件对应的目标内容数据包括纯文本数据、富文本数据,所述纯文本数据、富文本数据均是二进制文件对象,所述获取所述目标事件对应的目标内容数据,包括:
采用const textBlob=await clipboardItem.getType(‘text/plain’),获取纯文本数据textBlob;
采用const htmlBlob=await clipboardItem.getType(‘text/html),获取富文本数据htmlBlob。
在一些实施例中,对所述富文本数据htmlBlob,使用URL.createObjectURL(blob)获取一个用于显示Blob对象的地址,并使用
在一些实施例中,对所述文本数据textBlob()获取纯文本,并使用
标签显示。
在一些实施例中,所述将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上,包括:
将所述目标内容数据经转换之后,通过维护一个粘贴板管理器并获取复制的目标内容数据后,将所述目标内容数据添加在所述粘贴板管理器,其中所述粘贴板管理器中的数据至少包括如下之一的参数类型:创建时间,文本数据、富文本数据;
通过所述粘贴板管理器,显示到所述浏览器的当前显示页面上。
在一些实施例中,在所述粘贴板管理器的操作至少包括如下之一:搜索、查看、删除、修改、将粘贴板的记录设置到系统粘贴板中。
在一些实施例中,还包括:将用户登录后的在所述粘贴板中的数据同步到云端。
为了实现上述目的,根据本申请的另一方面,提供了一种于浏览器的复用数据处理装置。
根据本申请的用于浏览器的复用数据处理装置包括:
监听模块,用于监听浏览器中的目标事件;
授权访问模块,用于根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权;
获取模块,用于获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据;
转换模块,用于将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
为了实现上述目的,根据本申请的又一方面,本申请实施例还提供一种电子设备,包括:处理器;以及被安排成存储计算机可执行指令的存储器,所述可执行指令在被执行时使所述处理器执行前述之任一所述方法。
为了实现上述目的,根据本申请的再一方面,本申请实施例还提供一种计算机可读存储介质,所述计算机可读存储介质存储一个或多个程序,所述一个或多个程序当被包括多个应用程序的电子设备执行时,使得所述电子设备执行前述之任一所述方法。
在本申请实施例中,采用监听浏览器中的目标事件的方式,通过根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权,达到了获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据的目的,从而实现了将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上的技术效果,进而解决了辅助工具使用效果不佳的技术问题。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例的用于浏览器的复用数据处理方法的流程示意图;
图2是根据本申请实施例的用于浏览器的复用数据处理方法中流程示意图;
图3是根据本申请实施例的用于浏览器的复用数据处理方法中数据解析原理示意图;
图4是根据本申请实施例的用于浏览器的复用数据处理装置结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
在本申请中,术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本申请及其实施例,并非用于限定所指示的装置、元件或组成部分必须具有特定方位,或以特定方位进行构造和操作。
并且,上述部分术语除了可以用于表示方位或位置关系以外,还可能用于表示其他含义,例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言,可以根据具体情况理解这些术语在本申请中的具体含义。
此外,术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如,可以是固定连接,可拆卸连接,或整体式构造;可以是机械连接,或电连接;可以是直接相连,或者是通过中间媒介间接相连,又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言,可以根据具体情况理解上述术语在本申请中的具体含义。
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
如图1所示,该方法包括如下的步骤S110至步骤S140:
步骤S110,监听浏览器中的目标事件。
使用JavaScript监听用户在浏览器的复制动作。
示例性的,编写一个浏览器扩展程序,如浏览器插件或浏览器的扩展JavaScript脚本(以下统称扩展程序)。该扩展程序会监听用户在浏览器的复制操作,当用户按下Ctrl+C或者使用鼠标左键进行复制时,会触发定义好的处理程序。比如,监听复制事件的核心代码可以为
document.addEventListener("copy",executeCopy)
步骤S120,根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权。
函数executeCopy为定义好的处理函数,当用户在浏览器中复制了页面某些内容后,就会运行该函数。在该函数里,将会访问粘贴板对象navigator.clipboard对象。在使用该对象时,会触发授权机制,会在当前浏览器窗体弹窗让用户授权。
步骤S130,获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据。
只有用户点击了允许,程序才能访问到粘贴板的数据。这属于浏览器的安全机制,无法跳过。
在获取到用户授权后,将调用navigator.clipboard对象的read()方法,进行数据读取,一种可选的实施方式,如下:
在调用read()方法后,将获取一个clipboardItems数据。
步骤S140,将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
从clipboardItems数据中可以获取到复制内容的纯文本数据与富文本数据。
需要注意的是,纯文本数据包括但不限于,纯文本的数据,不包含图片,链接,文字的样式。富文本数据包括但不限于,带有一定文本格式的,带有图片或链接的数据。
此外,可以在扩展程序中维护一个粘贴板管理器,在获取复制的数据后,将其添加在粘贴板管理器,并主要记录三个数据,创建时间,文本数据与富文本数据。
从以上的描述中,可以看出,本申请实现了如下技术效果:
采用监听浏览器中的目标事件的方式,通过根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权,达到了获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据的目的,从而实现了将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上的技术效果,进而解决了辅助工具使用效果不佳的技术问题。
作为本实施例中的优选,所述目标事件对应的目标内容数据包括纯文本数据、富文本数据,所述纯文本数据、富文本数据均是二进制文件对象,所述获取所述目标事件对应的目标内容数据,包括:
采用const textBlob=await clipboardItem.getType(‘text/plain’),获取纯文本数据textBlob;
采用const htmlBlob=await clipboardItem.getType(‘text/html),获取富文本数据htmlBlob。
具体实施时,const textBlob=await clipboardItem.getType(‘text/plain’)
const htmlBlob=await clipboardItem.getType(‘text/html)
textBlob为纯文本数据,htmlBlob为富文本数据。这里获取的数据是二进制(Blob)文件对象。无法直接显示到页面上。
要想显示到用户页面,必须经过处理。为了能够将二种粘贴板的数据(纯文本数据,富文本数据)显示到页面上,需要经过一层处理。
对于富文本数据htmlBlob,这里使用URL.createObjectURL(blob)来生成一个用于显示Blob对象的地址,通过该方法能够将二进制数据生成一个可以用于访问的临时的本地短连接,该短连接需要使用一个容器来显示,例如,一个Blob的对象,他的MIME类型是image/png,那么由它生成的短连接只能使用HTML中的标签来显示。而要显示一个类型为text/html的Blob数据类型,需要使用
此外,对于纯文本数据textBlob的处理,使用以下方法即可正确显示文本到页面上。
blob.text().then(text=>{
document.querySelector(“p”).innerText=text
})
优选地,对所述富文本数据htmlBlob,使用URL.createObjectURL(blob)获取一个用于显示Blob对象的地址,并使用
优选地,对所述文本数据textBlob()获取纯文本,并使用
标签显示。
作为本实施例中的优选,所述将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上,包括:将所述目标内容数据经转换之后,通过维护一个粘贴板管理器并获取复制的目标内容数据后,将所述目标内容数据添加在所述粘贴板管理器,其中所述粘贴板管理器中的数据至少包括如下之一的参数类型:创建时间,文本数据、富文本数据;通过所述粘贴板管理器,显示到所述浏览器的当前显示页面上。
此外用户可以将粘贴板的记录,再次设置到系统粘贴板中,下次粘贴时就是设置后的数据,这样就达到了复制一次,重复使用的目的。
比如,将复制记录设置到粘贴板的核心代码为
作为本实施例中的优选,在所述粘贴板管理器的操作至少包括如下之一:搜索、查看、删除、修改、将粘贴板的记录设置到系统粘贴板中。
具体实施时,用户可以在粘贴板管理器中进行,搜索,查看,删除,修改,粘贴板的数据,或将记录设置到粘贴板中。
当用户的鼠标点击浏览器中的输入框时,点击某一条粘贴板记录,就可以将该记录的纯文本数据填充到该输入框中,用户也可以点击粘贴板记录的富文本图标选择富文本数据对输入进行填充。
作为本实施例中的优选,所述方法还包括:将用户登录后的在所述粘贴板中的数据同步到云端。
具体实施时,在粘贴板中,用户可以登录,登录后可以将数据同步到云端,如果不登录,所记录的数据都是存储在浏览器本地。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
如图2所示,是根据本申请实施例的用于浏览器的复用数据处理方法中流程示意图,其具体包括如下的步骤:
S1,编写一个浏览器扩展程序,如浏览器插件或浏览器的扩展JavaScript脚本(以下统称扩展程序)。该扩展程序会监听用户在浏览器的复制操作,当用户按下Ctrl+C或者使用鼠标左键进行复制时,会触发定义好的处理程序。
S2,函数executeCopy为定义好的处理函数,当用户在浏览器中复制了页面某些内容后,就会运行该函数。
S3,在该函数里,将会访问粘贴板对象navigator.clipboard对象。在使用该对象时,会触发授权机制,会在当前浏览器窗体弹窗让用户授权。
S4,在调用read()方法后,将获取一个clipboardItems数据。
从clipboardItems数据中可以获取到复制内容的纯文本数据与富文本数据。
S5,textBlob为纯文本数据,htmlBlob为富文本数据。这里获取的数据是二进制(Blob)文件对象。无法直接显示到页面上。要想显示到用户页面,必须经过处理。为了能够将二种粘贴板的数据(纯文本数据或者富文本数据)显示到页面上,需要经过一层处理追加到粘贴板管理器。
如图3所示,是根据本申请实施例的用于浏览器的复用数据处理方法中数据解析原理示意图。
对于富文本数据htmlBlob,这里使用URL.createObjectURL(blob)来生成一个用于显示Blob对象的地址,通过该方法能够将二进制数据生成一个可以用于访问的临时的本地短连接,该短连接需要使用一个容器来显示。
示例性的,对于一个Blob的对象,他的MIME类型是image/png,那么由它生成的短连接只能使用HTML中的标签来显示。,而要显示一个类型为text/html的Blob数据类型,需要使用
对于纯文本数据textBlob的处理,使用以下方法即可正确显示文本到页面上:
blob.text().then(text=>{
document.querySelector(“p”).innerText=text
})
根据本申请实施例,还提供了一种用于实施上述方法的用于浏览器的复用数据处理装置,如图4所示,该装置包括:
监听模块410,用于监听浏览器中的目标事件;
授权访问模块420,用于根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权;
获取模块430,用于获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据;
转换模块440,用于将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
本申请实施例中的所述监听模块410中使用JavaScript监听用户在浏览器的复制动作。
示例性的,编写一个浏览器扩展程序,如浏览器插件或浏览器的扩展JavaScript脚本(以下统称扩展程序)。该扩展程序会监听用户在浏览器的复制操作,当用户按下Ctrl+C或者使用鼠标左键进行复制时,会触发定义好的处理程序。比如,监听复制事件的核心代码可以为
document.addEventListener("copy",executeCopy)
本申请实施例中的所述授权访问模块420中函数executeCopy为定义好的处理函数,当用户在浏览器中复制了页面某些内容后,就会运行该函数。在该函数里,将会访问粘贴板对象navigator.clipboard对象。在使用该对象时,会触发授权机制,会在当前浏览器窗体弹窗让用户授权。
本申请实施例中的所述获取模块430中只有用户点击了允许,程序才能访问到粘贴板的数据。这属于浏览器的安全机制,无法跳过。
在获取到用户授权后,将调用navigator.clipboard对象的read()方法,进行数据读取,一种可选的实施方式,如下:
在调用read()方法后,将获取一个clipboardItems数据。
本申请实施例中的所述转换模块440中从clipboardItems数据中可以获取到复制内容的纯文本数据与富文本数据。
需要注意的是,纯文本数据包括但不限于,纯文本的数据,不包含图片,链接,文字的样式。富文本数据包括但不限于,带有一定文本格式的,带有图片或链接的数据。
此外,可以在扩展程序中维护一个粘贴板管理器,在获取复制的数据后,将其添加在粘贴板管理器,并主要记录三个数据,创建时间,文本数据与富文本数据。
显然,本领域的技术人员应该明白,上述的本申请的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本申请不限制于任何特定的硬件和软件结合。
本申请的实施例还提供了一种存储介质,该存储介质中存储有计算机程序,其中,该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,监听浏览器中的目标事件;
S2,根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权;
S3,获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据;
S4,将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
可选地,存储介质还被设置为存储用于执行以下步骤的计算机程序:
S1,采用const textBlob=await clipboardItem.getType(‘text/plain’),获取纯文本数据textBlob;
S2,采用const htmlBlob=await clipboardItem.getType(‘text/html),获取富文本数据htmlBlob。
可选地,在本实施例中,上述存储介质可以包括但不限于:U盘、只读存储器(Read-Only Memory,简称为ROM)、随机存取存储器(Random Access Memory,简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。
本申请的实施例还提供了一种电子装置,包括存储器和处理器,该存储器中存储有计算机程序,该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地,上述电子装置还可以包括传输设备以及输入输出设备,其中,该传输设备和上述处理器连接,该输入输出设备和上述处理器连接。
可选地,在本实施例中,上述处理器可以被设置为通过计算机程序执行以下步骤:
S1,监听浏览器中的目标事件;
S2,根据所述目标事件,访问并获取所述浏览器的粘贴板中的数据授权;
S3,获得所述粘贴板的数据授权之后,获取所述目标事件对应的目标内容数据;
S4,将所述目标内容数据经转换之后,显示到所述浏览器的当前显示页面上。
可选地,本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例,本实施例在此不再赘述。
以上所述仅为本申请的优选实施例而已,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
- 医疗数据处理方法及装置、浏览器端、介质和电子设备
- 音频数据处理方法、装置、电子设备和存储介质
- 数据处理方法及装置、电子设备及存储介质
- 基于表达式的大数据处理方法、装置、电子设备、存储介质
- 一种材质的数据处理方法、装置、电子设备及存储介质
- 用于唱歌应用的音频数据处理方法及装置、电子设备及存储介质
- 应用于换电系统的数据处理方法、装置、电子设备及存储介质