Multiplex data processing method and device for browser, electronic equipment and storage medium

Abstract

This application discloses a method, apparatus, electronic device, and storage medium for reusing data processing in a browser. The method includes listening to a target event in the browser; accessing and obtaining data authorization from the browser's clipboard based on the target event; obtaining the data authorization from the clipboard, and then obtaining target content data corresponding to the target event; converting the target content data and displaying it on the browser's current display page. This application solves the technical problem of poor performance of auxiliary tools. It also achieves persistent copied data, and the data can be synchronized with the cloud.

Description

Technical Field

[0001] This application relates to the field of auxiliary tools, and more specifically, to a method, apparatus, electronic device, and storage medium for reusing data processing in a browser. Background Technology

[0002] When browsing web pages in a browser or doing development work, the paste function is often needed. Without the help of other tools, the data copied by the user can only be saved the latest one, and the previously copied data cannot be found and must be copied again.

[0003] In related technologies, there are clipboard management tools, such as the clipboard in Office Word or the clipboard tool in WPS. However, these tools are all bundled with other software and cannot be used independently. They also consume a lot of memory when used and cannot support cross-platform compatibility.

[0004] There is currently no effective solution to the problem of poor performance of auxiliary tools in related technologies. Summary of the Invention

[0005] The main objective of this application is to provide a method, apparatus, electronic device, and storage medium for reusing data in a browser, in order to solve the problem of poor performance of auxiliary tools.

[0006] To achieve the above objectives, according to one aspect of this application, a method for reusing data processing in a browser is provided.

[0007] The data reuse processing method for a browser according to this application includes:

[0008] Listen for target events in the browser;

[0009] Based on the target event, access and obtain data authorization from the browser's clipboard;

[0010] After obtaining data authorization for the clipboard, the target content data corresponding to the target event is obtained;

[0011] The target content data is converted and then displayed on the browser's current display page.

[0012] In some embodiments, the target content data corresponding to the target event includes plain text data and rich text data, where both the plain text data and rich text data are binary file objects. Obtaining the target content data corresponding to the target event includes:

[0013] Use `const textBlob = await clipboardItem.getType('text / plain')` to retrieve plain text data (`textBlob`).

[0014] Use `const htmlBlob = await clipboardItem.getType('text / html')` to retrieve the rich text data `htmlBlob`.

[0015] In some embodiments, for the rich text data htmlBlob, URL.createObjectURL(blob) is used to obtain an address for displaying the Blob object, and then... <iframe>Labels are displayed.

[0016] In some embodiments, plain text is obtained from the text data textBlob(), and then... Labels are displayed.

[0017] In some embodiments, the step of converting the target content data and displaying it on the browser's current display page includes:

[0018] After the target content data is converted, the target content data is added to the clipboard manager after maintaining a clipboard manager and obtaining the copied target content data. The data in the clipboard manager includes at least one of the following parameter types: creation time, text data, and rich text data.

[0019] The clipboard is displayed on the current display page of the browser via the clipboard manager.

[0020] In some embodiments, the operations of the clipboard manager include at least one of the following: searching, viewing, deleting, modifying, and setting clipboard records to the system clipboard.

[0021] In some embodiments, the method further includes: synchronizing the data in the clipboard after the user logs in to the cloud.

[0022] In order to achieve the above objectives, according to another aspect of this application, a data reuse processing apparatus for a browser is provided.

[0023] The multiplexing data processing apparatus for a browser according to this application includes:

[0024] A listening module is used to listen for target events in the browser;

[0025] An authorized access module is used to access and obtain data authorization from the browser's clipboard based on the target event;

[0026] The acquisition module is used to acquire the target content data corresponding to the target event after obtaining the data authorization of the clipboard;

[0027] The conversion module is used to convert the target content data and display it on the current display page of the browser.

[0028] In order to achieve the above objectives, according to another aspect of this application, embodiments of this application also provide an electronic device, including: a processor; and a memory arranged to store computer-executable instructions, which, when executed, cause the processor to perform any of the methods described above.

[0029] In order to achieve the above objectives, according to another aspect of this application, embodiments of this application also provide a computer-readable storage medium that stores one or more programs, which, when executed by an electronic device including a plurality of applications, cause the electronic device to perform any of the methods described above.

[0030] In this embodiment of the application, the method of listening to target events in the browser is adopted. By accessing and obtaining data authorization in the clipboard of the browser according to the target event, the purpose of obtaining the target content data corresponding to the target event is achieved after obtaining the data authorization of the clipboard. This achieves the technical effect of displaying the target content data on the current display page of the browser after conversion, thereby solving the technical problem of poor use effect of auxiliary tools. Attached Figure Description

[0031] The accompanying drawings, which form part of this application, are used to provide a further understanding of the application and to make other features, objects, and advantages of the application more apparent. The illustrative embodiments of the application and their descriptions are used to explain the application and do not constitute an undue limitation of the application.In the accompanying drawings:

[0032] Figure 1 is a schematic flowchart of a method for processing multiplexed data for a browser according to an embodiment of the present application;

[0033] Figure 2 is a schematic flowchart of a method for processing multiplexed data for a browser according to an embodiment of the present application;

[0034] <a href='javascript:;' class="see-img-anchor" img-id="HDA000389671380In addition, the terms "comprise", "include" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that comprises a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these process, method, product or device.

[0038] In this application, the orientation or positional relationship indicated by the terms "upper", "lower", "left", "right", "front", "rear", "top", "bottom", "inner", "outer", "middle", "vertical", "horizontal", "lateral", "longitudinal", etc. is based on the orientation or positional relationship shown in the drawings. These terms are mainly used to better describe this application and its embodiments, and are not used to limit that the indicated device, element or component must have a specific orientation, or be constructed and operated in a specific orientation.

[0039] Moreover, in addition to being used to represent an orientation or positional relationship, some of the above terms may also be used to represent other meanings. For example, the term "upper" may also be used to represent a certain attachment relationship or connection relationship in some cases. For those of ordinary skill in the art, the specific meanings of these terms in this application can be understood according to specific circumstances.

[0040] In addition, the terms "mount", "set", "provided with", "connected", "coupled", "socketed" should be understood in a broad sense. For example, it may be a fixed connection, a detachable connection, or an integral structure; it may be a mechanical connection or an electrical connection; it may be directly connected, or indirectly connected through an intermediate medium, or there may be internal communication between two devices, elements or components. For those of ordinary skill in the art, the specific meanings of the above terms in this application can be understood according to specific circumstances.

[0041] It should be noted that, without conflict, the embodiments in this application and the features in the embodiments can be combined with each other. The following will refer to the drawings and describe this application in detail in conjunction with the embodiments.

[0042] As shown in Figure 1, the method includes the following steps S110 to step S140:

[0043] Step S110, monitor a target event in the browser.

[0044] Use JavaScript to monitor the user's copy action in the browser.

[0045] For example, a browser extension, such as a browser plugin or a browser extension JavaScript script (hereinafter collectively referred to as an extension), is written. This extension listens for the user's copy operation in the browser. When the user presses Ctrl+C or uses the left mouse button to copy, a predefined handler is triggered. For example, the core code for listening to the copy event can be...

[0046] document.addEventListener("copy", executeCopy)

[0047] Step S120: Access and obtain data authorization from the browser clipboard according to the target event.

[0048] The function `executeCopy` is a predefined processing function that runs when a user copies some content from a page in the browser. Within this function, the clipboard object `navigator.clipboard` is accessed. Using this object triggers an authorization mechanism, prompting the user to grant authorization via a pop-up window in the current browser window.

[0049] Step S130: After obtaining the data authorization of the clipboard, obtain the target content data corresponding to the target event.

[0050] The program can only access the clipboard data if the user clicks "Allow". This is a browser security mechanism and cannot be bypassed.

[0051] After obtaining user authorization, the read() method of the navigator.clipboard object will be called to read data. One optional implementation is as follows:

[0052]

[0053] After calling the read() method, a clipboardItems data will be obtained.

[0054] Step S140: After the target content data is converted, it is displayed on the current display page of the browser.

[0055] The plain text data and rich text data of the copied content can be obtained from the clipboardItems data.

[0056] It should be noted that plain text data includes, but is not limited to, plain text data that does not contain images, links, or text styles. Rich text data includes, but is not limited to, data with certain text formatting and containing images or links.

[0057] In addition, a clipboard manager can be maintained in the extension. After the copied data is obtained, it is added to the clipboard manager and three main data are recorded: creation time, text data and rich text data.

[0058] As can be seen from the above description, this application achieves the following technical effects:

[0059] By listening to target events in the browser, and by accessing and obtaining data authorization in the browser's clipboard according to the target event, the goal of obtaining the target content data corresponding to the target event is achieved after obtaining the data authorization of the clipboard. This achieves the technical effect of displaying the target content data on the current display page of the browser after conversion, thereby solving the technical problem of poor performance of auxiliary tools.

[0060] In a preferred embodiment, the target content data corresponding to the target event includes plain text data and rich text data, both of which are binary file objects. The step of obtaining the target content data corresponding to the target event includes:

[0061] The plain text data textBlob is obtained by using const textBlob = await clipboardItem.getType('text / plain');

[0062] Use const htmlBlob = await clipboardItem.getType('text / html') to obtain rich text data htmlBlob.

[0063] In a specific implementation, const textBlob = await clipboardItem.getType('text / plain')

[0064] const htmlBlob=await clipboardItem.getType('text / html)

[0065] textBlob is plain text data, and htmlBlob is rich text data.The data retrieved here is a binary (Blob) file object. It cannot be directly displayed on the page.

[0066] To be displayed on the user's page, it must be processed. In order to display the data from the two clipboards (plain text data and rich text data) on the page, a layer of processing is required.

[0067] For rich text data htmlBlob, URL.createObjectURL(blob) is used to generate an address for displaying the Blob object. This method can generate a temporary local short link from the binary data that can be accessed. This short link needs to be displayed using a container. For example, if a Blob object has a MIME type of image / png, then the short link generated from it can only use the HTML. The tag is used to display it. To display a Blob data type of type text / html, you need to use...<iframe> The tag sets the generated short link to<iframe> The data in the Blob can be displayed correctly by adjusting the src attribute of the tag.

[0068] In addition, for the processing of plain text data textBlob, the following method can be used to correctly display the text on the page.

[0069] blob.text().then(text=>{

[0070] document.querySelector("p").innerText=text

[0071] })

[0072] Preferably, for the rich text data htmlBlob, URL.createObjectURL(blob) is used to obtain an address for displaying the Blob object, and then...<iframe> Labels are displayed.

[0073] Preferably, plain text is obtained from the text data textBlob(), and then... Labels are displayed.

[0074] In a preferred embodiment, the step of converting the target content data and displaying it on the current display page of the browser includes: after converting the target content data, maintaining a clipboard manager and obtaining the copied target content data, adding the target content data to the clipboard manager, wherein the data in the clipboard manager includes at least one of the following parameter types: creation time, text data, rich text data; and displaying it on the current display page of the browser through the clipboard manager.

[0075] In addition, users can set the records in the clipboard back to the system clipboard, and the next time they paste, they will use the set data, thus achieving the purpose of copying once and reusing it.

[0076] For example, the core code for setting a copied record to the clipboard is:

[0077]

[0078]

[0079] As a preferred embodiment, the operation of the clipboard manager includes at least one of the following: searching, viewing, deleting, modifying, and setting the clipboard record to the system clipboard.

[0080] In specific implementation, users can search, view, delete, modify, or set records to the clipboard in the clipboard manager.

[0081] When a user clicks the input box in the browser with the mouse, clicking a clipboard record will fill the input box with the plain text data of that record. Alternatively, the user can click the rich text icon of the clipboard record to select rich text data to fill the input.

[0082] As a preferred embodiment, the method further includes: synchronizing the data in the clipboard after the user logs in to the cloud.

[0083] In specific implementation, users can log in to the clipboard. After logging in, the data can be synchronized to the cloud. If they do not log in, the recorded data is stored locally in the browser.

[0084] It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. And although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than here.

[0085] As shown in Figure 2, it is a schematic flowchart of a method for processing multiplexed data for a browser according to an embodiment of the present application, which specifically includes the following steps:

[0086] S1. Write a browser extension program, such as a browser plug-in or an extended JavaScript script of the browser (hereinafter collectively referred to as an extension program). This extension program will listen for the user's copy operation in the browser. When the user presses Ctrl+C or uses the left mouse button to copy, it will trigger the defined processing program.

[0087] S2. The function executeCopy is the defined processing function. When the user copies some content on the page in the browser, this function will run.

[0088] S3. In this function, the pasteboard object navigator.clipboard object will be accessed. When using this object, an authorization mechanism will be triggered, and a pop-up window will appear in the current browser window to let the user authorize.

[0089] S4. After calling the read() method, a clipboardItems data will be obtained.

[0090] The plain text data and rich text data of the copied content can be obtained from the clipboardItems data.

[0091] S5. textBlob is the plain text data, and htmlBlob is the rich text data. The data obtained here is a binary (Blob) file object. It cannot be directly displayed on the page. To display it on the user page, it must be processed. In order to be able to display the two types of pasteboard data (plain text data or rich text data) on the page, a layer of processing needs to be passed and appended to the pasteboard manager.

[0092] As shown in Figure 3, it is a schematic diagram of the data parsing principle in the method for processing reused data for a browser according to an embodiment of the present application.

[0093] For rich text data htmlBlob, here URL.createObjectURL(blob) is used to generate an address for displaying the Blob object. Through this method, a temporary local short connection for access can be generated from binary data, and a container is required to display this short connection.

[0094] Exemplarily, for a Blob object with a MIME type of image / png, the short connection generated from it can only be displayed using the tag in HTML. To display a Blob data type of text / html, the <iframe> tag is required. By setting the generated short connection to the src attribute of the <iframe> tag, the data in the Blob can be correctly displayed.

[0095] For the processing of the pure text data textBlob, the following method can be used to correctly display the text on the page:

[0096] blob.text().then(text => {

[0097] document.querySelector("p").innerText = text

[0098] })

[0099] According to an embodiment of the present application, there is also provided a data reuse processing device for a browser for implementing the above method. As shown in Figure 4, the device includes:

[0100] A monitoring module 410 for monitoring a target event in the browser;

[0101] An authorization access module 420 for accessing and obtaining data authorization in the clipboard of the browser according to the target event;

[0102] An acquisition module 430 for obtaining target content data corresponding to the target event after obtaining the data authorization of the clipboard;

[0103] A conversion module 440 for displaying the target content data on the current display page of the browser after conversion.

[0104] In the monitoring module 410 in the embodiment of the present application, JavaScript is used to monitor the user's copy action in the browser.

[0105] Exemplarily, a browser extension program is written, such as a browser plug-in or an extended JavaScript script of the browser (hereinafter collectively referred to as the extension program). This extension program will monitor the user's copy operation in the browser. When the user presses Ctrl+C or uses the left mouse button to copy, a defined processing program will be triggered.For example, the core code for listening to copy events can be:

[0106] document.addEventListener("copy", executeCopy)

[0107] In the authorized access module 420 of this application embodiment, the function executeCopy is a predefined processing function that runs when a user copies some content from a page in the browser. Within this function, the clipboard object navigator.clipboard is accessed. When this object is used, an authorization mechanism is triggered, and a pop-up window appears in the current browser window prompting the user for authorization.

[0108] In the acquisition module 430 of this application embodiment, the program can only access the clipboard data if the user clicks "allow". This is a browser security mechanism and cannot be bypassed.

[0109] After obtaining user authorization, the read() method of the navigator.clipboard object will be called to read data. One optional implementation is as follows:

[0110]

[0111]

[0112] After calling the read() method, a clipboardItems data will be obtained.

[0113] In the conversion module 440 of this application embodiment, the plain text data and rich text data of the copied content can be obtained from the clipboardItems data.

[0114] It should be noted that plain text data includes, but is not limited to, plain text data that does not contain images, links, or text styles. Rich text data includes, but is not limited to, data with certain text formatting and containing images or links.

[0115] In addition, a clipboard manager can be maintained in the extension. After the copied data is obtained, it is added to the clipboard manager and three main data are recorded: creation time, text data and rich text data.

[0116] Obviously, those skilled in the art should understand that the modules or steps of this application described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computing device, or fabricating them separately as individual integrated circuit modules, or fabricating multiple modules or steps as a single integrated circuit module. Thus, this application is not limited to any specific hardware and software combination.

[0117] Embodiments of this application also provide a storage medium storing a computer program, wherein the computer program is configured to execute the steps in any of the above method embodiments when running.

[0118] Optionally, in this embodiment, the storage medium may be configured to store a computer program for performing the following steps:

[0119] S1, Listen for target events in the browser;

[0120] S2, according to the target event, access and obtain data authorization from the browser's clipboard;

[0121] S3, after obtaining the data authorization of the clipboard, obtain the target content data corresponding to the target event;

[0122] S4, After the target content data is converted, it is displayed on the current display page of the browser.

[0123] Optionally, the storage medium is further configured to store a computer program for performing the following steps:

[0124] S1, use const textBlob = await clipboardItem.getType('text / plain') to obtain plain text data textBlob;

[0125] S2, use const htmlBlob = await clipboardItem.getType('text / html') to obtain rich text data htmlBlob.

[0126] Optionally, in this embodiment, the above-mentioned storage medium may include, but is not limited to, various media that can store computer programs, such as USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard disk, magnetic disk or optical disk.

[0127] Embodiments of this application also provide an electronic device, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the steps in any of the above method embodiments.

[0128] Optionally, the above-mentioned electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.

[0129] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:

[0130] S1, Listen for target events in the browser;

[0131] S2, according to the target event, access and obtain data authorization from the browser's clipboard;

[0132] S3, after obtaining the data authorization of the clipboard, obtain the target content data corresponding to the target event;

[0133] S4, After the target content data is converted, it is displayed on the current display page of the browser.

[0134] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementations, and will not be repeated here.

[0135] The above description is only a preferred embodiment of this application and is not intended to limit this application. For those skilled in the art, this application can have various modifications and variations. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.< / iframe>

Claims

1. A method for reusing data processing in a browser, characterized in that, The method includes: Listen for target events in the browser; Based on the target event, access and obtain data authorization from the browser's clipboard; Use JavaScript to listen for user copy actions in the browser. Write a browser extension, browser plugin or browser extension JavaScript script as an extension. This extension will listen for user copy operations in the browser. When the user presses Ctrl+C or uses the left mouse button to copy, the defined handler will be triggered. The core code for listening to copy events includes document.addEventListener("copy",executeCopy); where the function executeCopy is a predefined handler function. This function will access the clipboard object navigator.clipboard. When this object is used, the authorization mechanism will be triggered, and a pop-up window will appear in the current browser window asking the user to authorize. After obtaining data authorization for the clipboard, the target content data corresponding to the target event is obtained; The target content data is converted and then displayed on the browser's current display page; The step of converting the target content data and displaying it on the browser's current display page includes: After the target content data is converted, a clipboard manager is maintained and the copied target content data is obtained. The target content data is then added to the clipboard manager, wherein the data in the clipboard manager includes at least one of the following parameter types: creation time, text data, and rich text data. The clipboard is displayed on the browser's current page via the clipboard manager. The operations in the clipboard manager include at least one of the following: searching, viewing, deleting, modifying, and setting clipboard records to the system clipboard; When a user clicks on an input box in the browser, clicking on a clipboard record will fill the input box with the plain text data of that record. Alternatively, the user can click on the rich text icon of the clipboard record to select rich text data to fill the input.

2. The method according to claim 1, characterized in that, The target content data corresponding to the target event includes plain text data and rich text data, both of which are binary file objects. Obtaining the target content data corresponding to the target event includes: Use `const textBlob = await clipboardItem.getType('text / plain')` to retrieve plain text data (`textBlob`). Use `const htmlBlob = await clipboardItem.getType('text / html')` to retrieve the rich text data `htmlBlob`.

3. The method according to claim 2, characterized in that, For the rich text data htmlBlob, use URL.createObjectURL(blob) to obtain an address for displaying the Blob object, and use... <iframe>Labels are displayed.

4. The method according to claim 2, characterized in that, The text data is processed by textBlob() to obtain plain text, which is then displayed using tags.

5. The method according to claim 1, characterized in that, Also includes: Synchronize the data in the clipboard after the user logs in to the cloud.

6. A multiplexed data processing apparatus for a browser, characterized in that, The device includes: The listener module is used to listen for target events in the browser; The authorization access module is used to authorize access to and retrieval of data in the browser's clipboard based on the target event; Use JavaScript to listen for user copy actions in the browser. Write a browser extension, browser plugin or browser extension JavaScript script as an extension. This extension will listen for user copy operations in the browser. When the user presses Ctrl+C or uses the left mouse button to copy, the defined handler will be triggered. The core code for listening to copy events includes document.addEventListener("copy",executeCopy); where the function executeCopy is a predefined handler function that will access the clipboard object navigator.When the clipboard object is used, the authorization mechanism is triggered, and a pop-up window will appear in the current browser window asking the user to authorize it. The acquisition module is used to acquire the target content data corresponding to the target event after obtaining data authorization from the clipboard; The conversion module is used to convert the target content data and display it on the current display page of the browser; The step of converting the target content data and displaying it on the browser's current display page includes: After the target content data is converted, a clipboard manager is maintained and the copied target content data is obtained. The target content data is then added to the clipboard manager, wherein the data in the clipboard manager includes at least one of the following parameter types: creation time, text data, and rich text data. The clipboard is displayed on the browser's current page via the clipboard manager. The operations in the clipboard manager include at least one of the following: searching, viewing, deleting, modifying, and setting clipboard records to the system clipboard; When a user clicks on an input box in the browser, clicking on a clipboard record will fill the input box with the plain text data of that record. Alternatively, the user can click on the rich text icon of the clipboard record to select rich text data to fill the input. 7.An electronic device, comprising: processor; as well as A memory configured to store computer-executable instructions, which, when executed, cause the processor to perform the method of any one of claims 1 to 5.

8. A computer-readable storage medium storing one or more programs, which, when executed by an electronic device including a plurality of applications, cause the electronic device to perform the method of any one of claims 1 to 5. .< / iframe>

Images