CN116136760B - Method, device, equipment and storage medium for replacing native selector of browser - Google Patents
Method, device, equipment and storage medium for replacing native selector of browser Download PDFInfo
- Publication number
- CN116136760B CN116136760B CN202310408127.6A CN202310408127A CN116136760B CN 116136760 B CN116136760 B CN 116136760B CN 202310408127 A CN202310408127 A CN 202310408127A CN 116136760 B CN116136760 B CN 116136760B
- Authority
- CN
- China
- Prior art keywords
- selector
- file
- native
- browser
- core code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The application discloses a method, a device, equipment and a storage medium for replacing a native selector of a browser, and belongs to the technical field of computer software development. The method comprises the steps of creating a blank expanding program project, obtaining a path of a core code file in a newly created project configuration file and a core code file, configuring the path of the core code file into the project configuration file, storing a selector input plug-in under a root directory of the expanding program project, introducing the core code file into the selector input plug-in, determining all selectors in the core code file, and replacing a native selector by using the selector input plug-in. According to the method and the device, through newly creating an extended program item and introducing a selector input plug-in, a custom HTML element can be used for replacing a native Select selector of a browser, a fuzzy search and screening function is supported, a source code cannot be modified in a replacement process, the problem of source code invasiveness is avoided, and the method and the device have higher operability and applicability.
Description
Technical Field
The application belongs to the technical field of computer software development, and particularly relates to a method, a device, equipment and a storage medium for replacing a native selector of a browser.
Background
Jenkins is a common continuous integration tool that provides many functions, such as automatic build, test, deployment, etc., during software development. In the user interface of Jenkins, it is often necessary to use a pull-down selector (Select) in order to Select the appropriate value from the predefined options. However, in large items, the options in the drop-down selector Select are often very numerous, but the native Select selector does not provide the search and filter functions, which presents great difficulty to the user's selection.
Currently, the need to enhance the functionality not supported by such legacy systems is invasive to legacy system code, and for systems capable of modifying source code, the industry basically chooses to modify source code, but for many third party systems or large systems such as Jenkins, it is a difficult task to modify source code and deploy.
Disclosure of Invention
The embodiment of the application aims to provide a method, a device, computer equipment and a storage medium for replacing a native selector of a browser, so as to solve the technical problem that the original system code is invasive because source code modification is needed for replacing the native selector of the existing browser.
In order to solve the above technical problems, the embodiments of the present application provide a method for replacing a native selector of a browser, which adopts the following technical scheme:
a native selector replacement method of a browser, comprising:
receiving a replacement instruction of a native selector, creating a blank extended program project, and newly creating a project configuration file and a core code file in the extended program project;
acquiring a path of the core code file, and configuring the path of the core code file into the project configuration file;
downloading a selector input plug-in, and storing the selector input plug-in the expansion program project;
introducing the core code file into the selector input plugin;
reading the core code file by using a page element selection method built in a browser, and determining all selector elements in the core code file to generate a selector element array;
and circularly traversing the selector element array, and replacing a native selector corresponding to each selector element in the selector element array by using the selector input plug-in.
Further, the project configuration file is a manifest. Json file, and the core code file is a contentsripts. Js file.
Further, the selector input plugin is a choics. Js plugin, and the introducing the core code file into the selector input plugin specifically includes:
the contentsripts. Js file is imported into the choics. Js plugin using a relative path import method.
Further, the method for introducing the content scripts.js file into the choics.js plugin by using a relative path includes:
acquiring a path of the choics plug-in under a root directory of the expanding program item;
adding a path of the choics. Js plugin under the root directory of the extended program item at the beginning of the contentscript s. Js file;
and introducing the contentScript. Js file into the choics. Js plug-in according to the path of the choics. Js plug-in under the root directory of the expansion program item.
Further, after the obtaining the path of the core code file and configuring the path of the core code file into the project configuration file, the method further includes:
determining whether field information of the contentsripts js file is declared in the manifest.
And if the field information of the contentScript js file is not declared by the manifest file, outputting a core file declaration missing signal.
Further, the page element selecting method is a document/query/select all method, and the method for selecting page elements built in a browser reads the core code file, determines all selector elements in the core code file, and generates a selector element array, which specifically includes:
writing codes of the current page in the contentScript. Js file;
reading codes of the current page in the contentScript js file by using a document/querySelectAll method built in a browser;
all selector elements on the current page are matched by passing the CSS selector.
Further, the loop traverses the selector element array, and replaces a native selector corresponding to each selector element in the selector element array with the selector input plug-in, which specifically includes:
determining the position of each selector element through the document. QuerySelecterAll method, and determining a native selector corresponding to each selector element based on the position of each selector element;
replacing the native selector corresponding to each selector element by using the choics plug-in;
After the cycling through the selector element array and replacing the native selector corresponding to each selector element in the selector element array by using the selector input plug-in, the method further comprises:
entering an expansion page of a browser, and installing the expansion program item in the expansion page;
and refreshing a browser page, reading codes in the contentScript. Js file, and injecting the read codes in the contentScript. Js file into the browser page.
In order to solve the above technical problems, the embodiments of the present application further provide a device for replacing a native selector of a browser, which adopts the following technical scheme:
a native selector replacement apparatus for a browser, comprising:
the file creation module is used for receiving the replacement instruction of the original selector, creating a blank expansion program project, and newly creating a project configuration file and a core code file in the expansion program project;
the path configuration module is used for acquiring the path of the core code file and configuring the path of the core code file into the project configuration file;
the plug-in downloading module is used for downloading the selector input plug-in and storing the selector input plug-in the expansion program project;
A file introduction module for introducing the core code file into the selector input plugin;
the element determining module is used for reading the core code file by using a page element selecting method built in the browser, determining all selector elements in the core code file and generating a selector element array;
and the selector replacement module is used for circularly traversing the selector element array, and replacing the native selector corresponding to each selector element in the selector element array by using the selector input plug-in.
In order to solve the above technical problems, the embodiments of the present application further provide a computer device, which adopts the following technical schemes:
a computer device comprising a memory having stored therein computer readable instructions which when executed by a processor implement the steps of the native selector replacement method of a browser as claimed in any one of the preceding claims.
In order to solve the above technical problems, embodiments of the present application further provide a computer readable storage medium, which adopts the following technical solutions:
a computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the native selector replacement method of a browser as claimed in any one of the preceding claims.
Compared with the prior art, the embodiment of the application has the following main beneficial effects:
the application discloses a method, a device, equipment and a storage medium for replacing a native selector of a browser, and belongs to the technical field of computer software development. According to the method, a blank expanding program project is newly built, a path of a core code file is obtained in a newly built project configuration file and a core code file, the path of the core code file is configured in the project configuration file, a selector input plug-in is stored under a root directory of the expanding program project, the core code file is introduced into the selector input plug-in, all selector elements in the core code file are determined, a selector element array is generated, and a native selector is replaced by the selector input plug-in. According to the method and the device, the expanding program project is newly built, the selector input plug-in is introduced into the expanding program project, the custom HTML element can be used for replacing the native Select selector of the browser, the fuzzy search and screening function can be supported, the source code of the existing system cannot be modified in the selector replacing process, the problem of source code invasiveness is avoided, and the method and the device are high in operability and applicability.
Drawings
For a clearer description of the solution in the present application, a brief description will be given below of the drawings that are needed in the description of the embodiments of the present application, it being obvious that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without inventive effort for a person of ordinary skill in the art.
FIG. 1 illustrates an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 illustrates a flow chart of one embodiment of a native selector replacement method of a browser according to the present application;
FIG. 3 illustrates a flow chart according to one embodiment of step S204 in FIG. 2;
FIG. 4 shows a flow chart according to one embodiment of step S205 in FIG. 2;
FIG. 5 illustrates a structural schematic diagram of one embodiment of a native selector replacement apparatus of a browser in accordance with the present application;
fig. 6 shows a schematic structural diagram of one embodiment of a computer device according to the present application.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description and claims of the present application and in the description of the figures above are intended to cover non-exclusive inclusions. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the present application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
In order to better understand the technical solutions of the present application, the following description will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings.
As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as a web browser application, a shopping class application, a search class application, an instant messaging tool, a mailbox client, social platform software, etc., may be installed on the terminal devices 101, 102, 103.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablet computers, electronic book readers, MP3 players (Moving Picture Experts Group Audio Layer III, dynamic video expert compression standard audio plane 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic video expert compression standard audio plane 4) players, laptop and desktop computers, and the like.
The server 105 may be a server that provides various services, such as a background server that provides support for pages displayed on the terminal devices 101, 102, 103, and may be a stand-alone server, or may be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (Content Delivery Network, CDN), and basic cloud computing services such as big data and artificial intelligence platforms.
It should be noted that, the method for replacing the native selector of the browser provided in the embodiments of the present application is generally executed by the server, and accordingly, the device for replacing the native selector of the browser is generally disposed in the server.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
In large items, the options in the drop-down selector Select are often very numerous, but the native Select selector does not provide search and filter functionality, which presents great difficulty to the user's selection. Currently, the need to enhance the functionality not supported by such legacy systems is invasive to legacy system code, and for systems capable of modifying source code, the industry basically chooses to modify source code, but for many third party systems or large systems such as Jenkins, it is a difficult task to modify source code and deploy.
Aiming at the technical problems, the application provides a native selector replacement method, device, equipment and storage medium of a browser, which aims at replacing a native Select selector of the browser by using a custom HTML element by newly creating an extended program project and introducing a selector input plug-in the extended program project, can support fuzzy search and screening functions, and can avoid modifying source codes of the existing system in the selector replacement process, thereby avoiding the problem of source code invasiveness and having higher operability and applicability.
In a specific embodiment of the application, the scheme modifies the Jenkins page by injecting JavaScript codes by means of the content script function of the Chrome extension program API, so that the replacement of the Select selector is completed, the very needed fuzzy search and screening function is realized, and codes of an original system are not invaded.
It should be noted that, the solution of the present application is also applicable to browsers supporting a Chrome kernel, such as Edge browser, 360 browser, dog search browser, firefox browser, and the like, other than Chrome.
Referring to FIG. 2, a flow chart of one embodiment of a native selector replacement method of a browser according to the present application is shown. The native selector replacement method of the browser comprises the following steps:
s201, receiving a replacement instruction of the original selector, creating a blank extended program project, and creating a project configuration file and a core code file in the extended program project.
The project configuration file is a manifest. Json file, and the core code file is a contentScript. Js file.
The manifest.json file is a configuration file, and is used for specifying information such as the name, manifest version number, icon, authority and the like of the extension program, and by configuring the authority of some plugins in the manifest.json, the plugins can be allowed to modify the webpage opened by the browser. The user can configure through the visual interface view, and can also directly modify in the source code view.
Content Scripts are JavaScript files running in the context of a Web page, content Scripts are core code files for modifying the Content of the Web page, and code logic is written in the files, so that the self-defined adjustment of the Web page can be realized, the Content Scripts are used for being injected into the Web page, and a Select original selector is dynamically replaced. Content Scripts can manipulate (read and modify) the Content of the Web page currently being accessed by the browser through the standard DOM. Content Scripts are typically used for the following scenarios: finding invalid links in the Web page and repairing and increasing fonts to highlight and find and process microformats in the DOM.
In this embodiment, after receiving the native selector replacement instruction, the server newly builds a blank extended program item on the browser Extension program Chrome Extension, and newly builds a manifest.
The Chrome Extension is a browser Extension program, and functions can be added on a Google Chrome browser to improve user experience. These extensions may add new toolbar buttons, custom browser menus, modify web page content or website styles, filter or intercept advertisements, integrate third party services, and so forth. Chrome Extension can be developed using techniques such as HTML, CSS, javaScript, and a developer can call browser functions and data using Chrome Extension API, thereby implementing various functions. The user can search and install the Chrome Extension through the Chrome Web Store, or can download the installation directly from the developer website.
In this embodiment, the electronic device (e.g., the server shown in fig. 1) on which the native selector replacement method of the browser operates may receive the native selector replacement instruction through a wired connection or a wireless connection. It should be noted that the wireless connection may include, but is not limited to, 3G/4G connections, wiFi connections, bluetooth connections, wiMAX connections, zigbee connections, UWB (ultra wideband) connections, and other now known or later developed wireless connection means.
S202, acquiring a path of the core code file, and configuring the path of the core code file into a project configuration file.
In this embodiment, after completing the creation of the manifest.json file and the contentscore.js file, the server obtains the path of the contentscore.js file in the extended program item, configures the path of the contentscore.js file into the manifest.json file, configures the path of the file into the manifest.json file, and when the user opens the web page, the extended program automatically injects and executes the code in the contentscore.js file.
Further, after obtaining the path of the core code file and configuring the path of the core code file into the project configuration file, the method further comprises:
Determining whether field information of a contentscripts.js file is declared in the manifest.json file;
if the field information of the contentsripts js file is not declared by the manifest file, a core file declares a miss signal is output.
In this embodiment, after the server configures the path of the content descriptions.js file to the manifest file, the server automatically detects the manifest of the manifest.json file to determine whether the field information of the content descriptions.js file is declared in the manifest.json file, for example, the field information of the content descriptions.js file, for example, the "content_descriptions field", and if the "content_descriptions field" exists in the manifest of the manifest.json file, the server continues to execute step "S203", and if the "content_descriptions field" does not exist in the manifest of the manifest.json file, the server outputs a core file manifest miss signal to prompt the developer to check the project configuration file.
In the above embodiment, whether the contentscripts.js file is successfully configured into the manifest.js file is determined by checking the declaration of the manifest.js file, because only after the configuration is successful, when the subsequent user opens the web page, the extension program automatically injects and executes the code in the contentscripts.js file.
S203, downloading the selector input plug-in, and storing the selector input plug-in the expansion program project.
The selector input plugin is a choice. Js plugin, which is a JavaScript-based library, provides a plurality of different styles and configuration options, can customize the attributes of the menu such as styles, widths, heights, colors and the like, and supports functions such as fuzzy search and screening. The choies. Js plug-in is similar to Select2 and Select size, but without jQuery dependency. Choies. Js features include lightweight, no jQuery dependencies, configurable ordering, flexible contouring, fast search/filtering, clean APIs, right-to-left support, custom templates, and so forth. The choice selector in the original is replaced by choies, so that a drop-down menu which is more attractive, easy to use and highly customizable is realized, and the user experience and the operation efficiency are improved.
In this embodiment, after the server configures the path of the contentsripts. Js file into the manifest. Json file, the server automatically searches and downloads the choics. Js plug-in, and stores the choics. Js plug-in under the root directory of the extended program item.
S204, introducing the core code file into the selector input plugin.
In this embodiment, after downloading and depositing the choics. Js plug-in under the root directory of the extended program item, the server imports the contentsripts. Js file into the selector input plug-in to subsequently determine the native selector in the contentsripts. Js file and complete the replacement of the native selector.
Further, the core code file is introduced into the selector input plug-in, and specifically includes:
the contentsripts.js file is imported into the choics.js plugin using the method of relative path import.
In this embodiment, the server imports the contentsripts.js file into the choics.js plugin through the path of the choics.js plugin under the root directory of the extended program item.
Further, referring to fig. 3, the content scripts/js file is imported into the choics/js plugin by using a relative path import method, which specifically includes:
s301, acquiring a path of a choics plug-in under a root directory of an extended program item;
s302, adding paths of the choies. Js plugins under the root directory of the extended program item at the beginning of the contentScript. Js file;
s303, introducing the contentScript. Js file into the choics. Js plug-in according to the path of the choics. Js plug-in under the root directory of the extended program item.
In this embodiment, the server adds a path of the choics/choics plug-in under the root directory of the extended program item at the beginning of the contentscript/js file by obtaining a path of the choics/js plug-in under the root directory of the extended program item, such as '/js/choics/js', and then introduces the contentscript/js file into the choics/js plug-in according to the path of the choics/js/choics under the root directory of the extended program item.
S205, reading the core code file by using a built-in page element selection method of the browser, determining all selector elements in the core code file, and generating a selector element array.
In this embodiment, the development code of the current Web page is written into the contentscripts.js file, and after the browser reads the contentscripts.js file, the browser uses the built-in page element selection method to match all the Select elements on the current Web page, and the example code is as follows: const selectElements = document. QuerySelectall ('. My-Select'), then construct an array of selector elements using all Select elements.
Further, the page element selection method is a document. Referring to fig. 4, a method for selecting page elements built in a browser is used to read a core code file, and determine all selector elements in the core code file, so as to generate a selector element array, which specifically includes:
S401, writing codes of the current page in the contentScript. Js file;
s402, reading codes of current pages in content scripts.js files by using a document/query/selection all method built in a browser;
s403, all selector elements on the current page are matched through passing the CSS selector.
The document/query selector all method is a use method of a selected element list of a browser, is a built-in method of the browser, belongs to the category of DOM APIs, and is mainly used for element selection of Web pages.
In this embodiment, the development code of the current Web page is written in the contentsripts.js file, the code of the current page in the contentsripts.js file is read by using a document/querySelecterall method built in the browser, and all the Select elements on the current Web page are matched by transmitting the CSS selector through the browser.
S206, traversing the selector element array circularly, and replacing the original selector corresponding to each selector element number in the selector element array by using the selector input plug-in.
In this embodiment, the server replaces the native selector corresponding to each Select element in the array of selector elements with the selector input plug-in by cycling through each Select element in the array of selector elements.
Further, the selector element array is circularly traversed, and the native selector corresponding to each selector element number in the selector element array is replaced by the selector input plug-in, which specifically comprises:
determining the position of each selector element through a document. QuerySelecterall method, and determining a native selector corresponding to each selector element based on the position of each selector element;
replacing the native selector corresponding to each selector element by using a choics. Js plugin;
in this embodiment, the server determines the position of each Select element by a document. Query. Selector all method, determines the native selector corresponding to each Select element based on the position of each Select element, and replaces the native selector corresponding to each Select element with a choice. Js plugin.
In the embodiment, the method and the device for selecting the source code of the browser can support the fuzzy search and screening functions by identifying the positions of the Select elements and determining the native selector corresponding to the Select elements through the positions of the Select elements, replacing the native selector corresponding to each Select element by using a choice.
After circularly traversing the selector element array and replacing the native selector corresponding to each selector element in the selector element array by using the selector input plug-in, the method further comprises:
entering an expansion page of a browser, and installing an expansion program item in the expansion page;
refreshing the browser page, reading codes in the contentScript. Js file, and injecting the codes in the read contentScript. Js file into the browser page.
In the embodiment, after the replacement of the native selector is completed by using the choics. Js plug-in, when the user opens the browser again, the server automatically enters an expansion page of the browser, such as a page of the Chrome:// extensions/, where the page is used by the Chrome browser to manage the browser expansion program, and the expansion program can be installed on the page. Installing the expansion program item after the selector replacement is completed in the expansion page, refreshing the current page of the browser, reading the contentScript.js file in the expansion program item when the browser page is reloaded, and injecting codes in the read contentScript.js file into the browser page.
In the above embodiment, after the implemented extension program is installed, a page, for example, a Jenkins page is refreshed, and when the web page is loaded, the extension program will inject the code in the contentsripts. Js into the page, for example, the Jenkins page, and after the loading of the page is completed, it can be found that all the native Select selectors are replaced with new selectors, and the functions of input, screening and fuzzy search are supported.
In the above embodiment, the present application discloses a method for replacing a native selector of a browser, which belongs to the technical field of computer software development. According to the method, a blank expanding program project is newly built, a path of a core code file is obtained in a newly built project configuration file and a core code file, the path of the core code file is configured in the project configuration file, a selector input plug-in is stored under a root directory of the expanding program project, the core code file is introduced into the selector input plug-in, all selector elements in the core code file are determined, a selector element array is generated, and a native selector is replaced by the selector input plug-in. According to the method and the device, the expanding program project is newly built, the selector input plug-in is introduced into the expanding program project, the custom HTML element can be used for replacing the native Select selector of the browser, the fuzzy search and screening function can be supported, the source code of the existing system cannot be modified in the selector replacing process, the problem of source code invasiveness is avoided, and the method and the device are high in operability and applicability.
Those skilled in the art will appreciate that implementing all or part of the processes of the methods of the embodiments described above may be accomplished by way of computer readable instructions, stored on a computer readable storage medium, which when executed may comprise processes of embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a random access Memory (Random Access Memory, RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.
With further reference to fig. 5, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a native selector replacement apparatus of a browser, where the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus is particularly applicable to various electronic devices.
As shown in fig. 5, the native selector replacing apparatus 500 of the browser according to the present embodiment includes:
The file creation module 501 is configured to receive a native selector replacement instruction, create a blank extended program item, and newly create an item configuration file and a core code file in the extended program item;
the path configuration module 502 is configured to obtain a path of the core code file, and configure the path of the core code file into a project configuration file;
a plug-in downloading module 503, configured to download the selector input plug-in, and store the selector input plug-in the extended program item;
a file import module 504 for importing a core code file into the selector input plugin;
the element determining module 505 is configured to read the core code file by using a page element selection method built in the browser, determine all selector elements in the core code file, and generate a selector element array;
the selector replacement module 506 is configured to cycle through the selector element array, and replace a native selector corresponding to each selector element in the selector element array with the selector input plug-in.
Further, the project configuration file is a manifest. Json file, and the core code file is a contentsripts. Js file.
Further, the selector input plugin is a choics. Js plugin, and the file introduction module 504 specifically includes:
And the file introduction unit is used for introducing the content scripts.js file into the choics.js plugin by using a relative path introduction method.
Further, the file introduction unit specifically includes:
the path acquisition subunit is used for acquiring paths of the choics/js plugins under the root directory of the extended program item;
a path adding subunit, configured to add, at the beginning of the contentsripts. Js file, a path of the choics. Js plugin under the root directory of the extended program item;
and the file introducing subunit is used for introducing the contentScript. Js file into the choics. Js plug-in according to the path of the choics. Js plug-in under the root directory of the extended program item.
Further, the native selector replacement apparatus 500 of the browser further includes:
the declaration identification module is used for determining whether field information of the contentScript js file is declared in the manifest. Json file;
and the declaration warning module is used for outputting a core file declaration missing signal if the manifest file does not declare the field information of the contentScript.
Further, the page element selection method is a document. Query ySelecterAll method, and the element determining module 505 specifically includes:
a code writing unit for writing the code of the current page in the contentsripts.js file;
The code reading unit is used for reading codes of the current page in the content scripts/js file by using a document/query/selection all method built in the browser;
an element determination unit for matching all selector elements on the current page by passing the CSS selector.
Further, the selector replacement module 506 specifically includes:
a selector searching unit, configured to determine a position of each selector element by a document. Query yselector all method, and determine a native selector corresponding to each selector element based on the position of each selector element;
and the selector replacing unit is used for replacing the native selector corresponding to each selector element by utilizing the choics.
The native selector replacement apparatus 500 of the browser further includes:
the program installation module is used for entering an expansion page of the browser and installing an expansion program project in the expansion page;
and the page refreshing module is used for refreshing the browser page, reading codes in the content scripts.js file and injecting the read codes in the content scripts.js file into the browser page.
In the above embodiment, the application discloses a device for replacing a native selector of a browser, which belongs to the technical field of computer software development. According to the method, a blank expanding program project is newly built, a path of a core code file is obtained in a newly built project configuration file and a core code file, the path of the core code file is configured in the project configuration file, a selector input plug-in is stored under a root directory of the expanding program project, the core code file is introduced into the selector input plug-in, all selector elements in the core code file are determined, a selector element array is generated, and a native selector is replaced by the selector input plug-in. According to the method and the device, the expanding program project is newly built, the selector input plug-in is introduced into the expanding program project, the custom HTML element can be used for replacing the native Select selector of the browser, the fuzzy search and screening function can be supported, the source code of the existing system cannot be modified in the selector replacing process, the problem of source code invasiveness is avoided, and the method and the device are high in operability and applicability.
In order to solve the technical problems, the embodiment of the application also provides computer equipment. Referring specifically to fig. 6, fig. 6 is a basic structural block diagram of a computer device according to the present embodiment.
The computer device 6 comprises a memory 61, a processor 62, a network interface 63 communicatively connected to each other via a system bus. It is noted that only computer device 6 having components 61-63 is shown in the figures, but it should be understood that not all of the illustrated components are required to be implemented and that more or fewer components may be implemented instead. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.
The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.
The memory 61 includes at least one type of readable storage media including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the storage 61 may be an internal storage unit of the computer device 6, such as a hard disk or a memory of the computer device 6. In other embodiments, the memory 61 may also be an external storage device of the computer device 6, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 6. Of course, the memory 61 may also comprise both an internal memory unit of the computer device 6 and an external memory device. In this embodiment, the memory 61 is typically used to store an operating system installed on the computer device 6 and various types of application software, such as computer readable instructions for a native selector replacement method of a browser. Further, the memory 61 may be used to temporarily store various types of data that have been output or are to be output.
The processor 62 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 62 is typically used to control the overall operation of the computer device 6. In this embodiment, the processor 62 is configured to execute computer readable instructions stored in the memory 61 or process data, such as computer readable instructions for executing a native selector replacement method of the browser.
The network interface 63 may comprise a wireless network interface or a wired network interface, which network interface 63 is typically used for establishing a communication connection between the computer device 6 and other electronic devices.
The application discloses computer equipment, which belongs to the technical field of computer software development. According to the method, a blank expanding program project is newly built, a path of a core code file is obtained in a newly built project configuration file and a core code file, the path of the core code file is configured in the project configuration file, a selector input plug-in is stored under a root directory of the expanding program project, the core code file is introduced into the selector input plug-in, all selector elements in the core code file are determined, a selector element array is generated, and a native selector is replaced by the selector input plug-in. According to the method and the device, the expanding program project is newly built, the selector input plug-in is introduced into the expanding program project, the custom HTML element can be used for replacing the native Select selector of the browser, the fuzzy search and screening function can be supported, the source code of the existing system cannot be modified in the selector replacing process, the problem of source code invasiveness is avoided, and the method and the device are high in operability and applicability.
The present application provides yet another embodiment, namely, a computer-readable storage medium, which may be either a non-volatile storage medium or a volatile storage medium. The computer-readable storage medium stores computer-readable instructions executable by at least one processor to cause the at least one processor to perform the steps of a native selector replacement method for a browser as described above.
The application discloses a storage medium, which belongs to the technical field of computer software development. According to the method, a blank expanding program project is newly built, a path of a core code file is obtained in a newly built project configuration file and a core code file, the path of the core code file is configured in the project configuration file, a selector input plug-in is stored under a root directory of the expanding program project, the core code file is introduced into the selector input plug-in, all selector elements in the core code file are determined, a selector element array is generated, and a native selector is replaced by the selector input plug-in. According to the method and the device, the expanding program project is newly built, the selector input plug-in is introduced into the expanding program project, the custom HTML element can be used for replacing the native Select selector of the browser, the fuzzy search and screening function can be supported, the source code of the existing system cannot be modified in the selector replacing process, the problem of source code invasiveness is avoided, and the method and the device are high in operability and applicability.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk), comprising several instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method described in the embodiments of the present application.
The subject application is operational with numerous general purpose or special purpose computer system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
It is apparent that the embodiments described above are only some embodiments of the present application, but not all embodiments, the preferred embodiments of the present application are given in the drawings, but not limiting the patent scope of the present application. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a more thorough understanding of the present disclosure. Although the present application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing, or equivalents may be substituted for elements thereof. All equivalent structures made by the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the protection scope of the application.
Claims (7)
1. A method for replacing a native selector of a browser, comprising:
receiving a replacement instruction of a native selector, creating a blank extended program project, and newly creating a project configuration file and a core code file in the extended program project;
acquiring a path of the core code file, and configuring the path of the core code file into the project configuration file;
Downloading a selector input plug-in, and storing the selector input plug-in the expansion program project;
introducing the core code file into the selector input plugin;
reading the core code file by using a page element selection method built in a browser, and determining all selector elements in the core code file to generate a selector element array;
circularly traversing the selector element array, and replacing a native selector corresponding to each selector element in the selector element array by using the selector input plug-in;
the project configuration file is a manifest. Json file, the core code file is a contentsripts. Js file, the selector input plug-in is a choics. Js plug-in, and the introducing the core code file into the selector input plug-in specifically includes:
introducing the contentsripts.js file into the choics.js plugin by using a relative path introduction method;
the method for introducing the content scripts.js file into the choics.js plugin by using a relative path introduction method specifically comprises the following steps:
acquiring a path of the choics plug-in under a root directory of the expanding program item;
Adding a path of the choics. Js plugin under the root directory of the extended program item at the beginning of the contentscript s. Js file;
introducing the contentsripts.js file into the choics.js plug-in according to the path of the choics.js plug-in under the root directory of the expanding program item;
the page element selection method is a document/query/selection all method, the loop traverses the selector element array, and replaces a native selector corresponding to each selector element in the selector element array by using the selector input plug-in, and the method specifically includes:
determining the position of each selector element through the document. QuerySelecterAll method, and determining a native selector corresponding to each selector element based on the position of each selector element;
and replacing the native selector corresponding to each selector element by using the choies.
2. The native selector replacement method of a browser of claim 1, wherein after said retrieving the path of the core code file and configuring the path of the core code file into the project configuration file, further comprising:
Determining whether field information of the contentsripts js file is declared in the manifest.
And if the field information of the contentScript js file is not declared by the manifest file, outputting a core file declaration missing signal.
3. The method for replacing a native selector of a browser according to claim 1, wherein the method for selecting page elements built in the browser is used for reading the core code file, determining all selector elements in the core code file, and generating a selector element array, and specifically comprises:
writing codes of the current page in the contentScript. Js file;
reading codes of the current page in the contentScript js file by using a document/querySelectAll method built in a browser;
all selector elements on the current page are matched by passing the CSS selector.
4. The method for replacing a native selector of a browser of claim 3, wherein after said cycling through said array of selector elements, replacing a native selector corresponding to each selector element in said array of selector elements with said selector input plug-in further comprises:
Entering an expansion page of a browser, and installing the expansion program item in the expansion page;
and refreshing a browser page, reading codes in the contentScript. Js file, and injecting the read codes in the contentScript. Js file into the browser page.
5. A native selector replacement apparatus for a browser, comprising:
the file creation module is used for receiving the replacement instruction of the original selector, creating a blank expansion program project, and newly creating a project configuration file and a core code file in the expansion program project;
the path configuration module is used for acquiring the path of the core code file and configuring the path of the core code file into the project configuration file;
the plug-in downloading module is used for downloading the selector input plug-in and storing the selector input plug-in the expansion program project;
a file introduction module for introducing the core code file into the selector input plugin;
the element determining module is used for reading the core code file by using a page element selecting method built in the browser, determining all selector elements in the core code file and generating a selector element array;
The selector replacing module is used for circularly traversing the selector element array, and replacing a native selector corresponding to each selector element in the selector element array by utilizing the selector input plug-in;
the project configuration file is a manifest. Json file, the core code file is a contentsripts. Js file, the selector input plug-in is a choics. Js plug-in, and the file introduction module specifically includes:
a file introducing unit for introducing the contentsripts.js file into the choics.js plugin by using a relative path introducing method;
the file introduction unit specifically includes:
a path acquisition subunit, configured to acquire a path of the choics. Js plugin under a root directory of the extended program item;
a path adding subunit, configured to add, at the beginning of the contentscript s.js file, a path of the choics.js plugin under the root directory of the extended program item;
a file introducing subunit, configured to introduce the contentsripts.js file into the choics.js plugin according to a path of the choics.js plugin under a root directory of the extended program item;
the page element selection method is a document.
The selector searching unit is used for determining the position of each selector element through the document. Query selector all method and determining the native selector corresponding to each selector element based on the position of each selector element;
and the selector replacing unit is used for replacing the native selector corresponding to each selector element by utilizing the choics.
6. A computer device comprising a memory having stored therein computer readable instructions which when executed by the processor implement the steps of the native selector replacement method of a browser of any of claims 1 to 4.
7. A computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the native selector replacement method of a browser of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310408127.6A CN116136760B (en) | 2023-04-17 | 2023-04-17 | Method, device, equipment and storage medium for replacing native selector of browser |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310408127.6A CN116136760B (en) | 2023-04-17 | 2023-04-17 | Method, device, equipment and storage medium for replacing native selector of browser |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116136760A CN116136760A (en) | 2023-05-19 |
| CN116136760B true CN116136760B (en) | 2023-07-04 |
Family
ID=86334646
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310408127.6A Active CN116136760B (en) | 2023-04-17 | 2023-04-17 | Method, device, equipment and storage medium for replacing native selector of browser |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116136760B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109725965A (en) * | 2018-12-13 | 2019-05-07 | 平安普惠企业管理有限公司 | Cascading style listing maintenance, device, computer equipment and storage medium |
| CN112667218A (en) * | 2020-12-22 | 2021-04-16 | 北京锐安科技有限公司 | Processing method, device, equipment and storage medium |
| CN115016770A (en) * | 2022-06-30 | 2022-09-06 | 深圳前海微众银行股份有限公司 | Data processing method, device, equipment and storage medium |
| CN115525358A (en) * | 2022-09-06 | 2022-12-27 | 广东金赋科技股份有限公司 | Multi-screen communication and page operation control method based on Chromium |
| CN115543481A (en) * | 2022-10-13 | 2022-12-30 | 浪潮软件集团有限公司 | Chrome plug-in design method and device supporting multi-account switching |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120010995A1 (en) * | 2008-10-23 | 2012-01-12 | Savnor Technologies | Web content capturing, packaging, distribution |
-
2023
- 2023-04-17 CN CN202310408127.6A patent/CN116136760B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109725965A (en) * | 2018-12-13 | 2019-05-07 | 平安普惠企业管理有限公司 | Cascading style listing maintenance, device, computer equipment and storage medium |
| CN112667218A (en) * | 2020-12-22 | 2021-04-16 | 北京锐安科技有限公司 | Processing method, device, equipment and storage medium |
| CN115016770A (en) * | 2022-06-30 | 2022-09-06 | 深圳前海微众银行股份有限公司 | Data processing method, device, equipment and storage medium |
| CN115525358A (en) * | 2022-09-06 | 2022-12-27 | 广东金赋科技股份有限公司 | Multi-screen communication and page operation control method based on Chromium |
| CN115543481A (en) * | 2022-10-13 | 2022-12-30 | 浪潮软件集团有限公司 | Chrome plug-in design method and device supporting multi-account switching |
Non-Patent Citations (2)
| Title |
|---|
| A Google Chromium Browser Extension for Detecting XSS Attack in HTML5 Based Websites;Arun Prasath Sivanesan等;《2018 IEEE International Conference on Electro/Information Technology (EIT)》;1-3 * |
| 基于Chrome浏览器扩展的图书采访插件开发;田思等;《电脑知识与技术》;93-95 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116136760A (en) | 2023-05-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8386955B1 (en) | User-optimized content for web browsing windows | |
| WO2021008030A1 (en) | Web form configuration method and device, and computer readable storage medium | |
| WO2019072201A1 (en) | Webpage content extraction method and terminal device | |
| CN107679113B (en) | Light application acquisition method and device and electronic device | |
| CN109522500B (en) | Webpage display method, device, terminal and storage medium | |
| CN107153536A (en) | A kind of application processing method and device | |
| CN114996619A (en) | Page display method and device, computer equipment and storage medium | |
| CN105683957A (en) | Style sheet speculative preloading | |
| CN104317852A (en) | Method and device for showing functional items in browser | |
| CN112631591B (en) | Method, apparatus, device and computer readable storage medium for table element linkage | |
| CN111800492A (en) | Method and device for marking characters in web page, computer equipment and storage medium | |
| CN110764680B (en) | Method and device for generating simulated keyboard, electronic equipment and computer readable medium | |
| CN105183890A (en) | Webpage loading method based on browser and browser device | |
| CN108319474B (en) | Page information generation method, device and equipment | |
| CN112087370A (en) | Method, system, electronic device and computer-readable storage medium for issuing GitHub Issues | |
| CN109086342B (en) | Method, medium and terminal for mass production and operation and maintenance of website templates | |
| CN108920645A (en) | Method, apparatus, smart machine and the storage medium that the smart machine page is shown | |
| CN116136760B (en) | Method, device, equipment and storage medium for replacing native selector of browser | |
| CN108037914B (en) | Method and device for developing android native system by combining js | |
| CN112835568A (en) | Project construction method and device | |
| CN112905931B (en) | Page information display method and device, electronic equipment and storage medium | |
| CN103530163A (en) | Method for loading browser tool items and browser | |
| CN114625372A (en) | Automatic component compiling method and device, computer equipment and storage medium | |
| CN113868565A (en) | Skin style file editing method and device | |
| CN112748946A (en) | Application program installation file generation method and device, computing equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |