1. Introduction

Hello, I’m Angol!

Whether it’s Chrome or Firefox, much of the power of the browser depends on the vast number of plugins that allow us to be productive

Can we write a plugin that automates some of our daily tasks, freeing up our hands?

The answer is yes

This article uses the Chrome plugin as an example to talk about another way to automate the Web

2. Chrome plug-ins

Chrome extensions run on Chromium-based browsers

Include: Chrome, Microsoft Edge, and 360

A Chrome extension consists of three types of files, including:

  • Configuration file manifest.json

  • Js script file

  • Resource files such as images and CSS

The manifest.json configuration file is used to configure the extension name, version number, author, icon, pop-up interface, permission, and script path

The js script file contains popup.js, background, and content_scripts

Among them

  • Popup.js is used with popup.html to display the page and the logical control of the page when the plug-in icon is clicked

  • Background is used to define a background page, which is equivalent to a resident page and has the same life cycle as the browser

  • Content_scripts is used to inject JS scripts that do not conflict with scripts on the page

3. Practice

Suppose we now need to complete a plug-in that automatically completes logins when the first login or when the login fails

3-1 Create a project

Let’s create a folder, the project structure directory is as follows

3-2 Project configuration

In the manifest.json configuration file, we first set up the basic plug-in information

# mainifest.json {"manifest_version": 2, // manifest_version" name": "auto_login", // plug-in name" version": "0.0.1", / / / / plug-in version below are optional "description" : "automatic login", "author" : / / describe information "trade", / / author / / plugin icon "ICONS" : {" 84 ": "./image/icon.png" } ...Copy the code

Then, set the browser plug-in icon and background page

Note that the background page can set an HTML page, can also set the JS script list, and can only choose one of them

"Browser_action ": {"default_icon": "./image/icon.png", "default_title": // select "background": {"scripts": "./ /popup.html" // select "background": {"scripts": "./ /popup.html" // select "background": {"scripts": ["./js/background.js"], "persistent": true }, ...Copy the code

Next, use the keyword “content_scripts” to configure the matching rules and inject the JS script

Set "content_scripts": [{// "<all_urls>" = "matches": "], [" < all_urls > / / execution JS "JS" : [".. / JS/content. JS "], "run_at", "document_end" / / configuration run time point}, {" matches ": ["https://****/"], "js": ["./js/content_vx.js"], "run_at": "document_end" } ], ...Copy the code

It is set here that all pages execute the content.js script, and when the second page is matched, the content_vx.js script executes

It should be noted that run_AT is set to document_end, which means that the target script will not be executed until the page has loaded

Finally, permissions are defined using the keyword “permissions” as required by the business

PS: This example does not involve permissions, you can omit the Settings

# manifest.json ... // Permissions on permissions: ["contextMenus", // right-click menu "storage", // local store "webRequest", // Block request "<all_urls>", // block request "<all_urls>", // Matching URL "tabs", // tag "notifications" // notifications]}Copy the code

3-3 Write the injection script

In the content_vx.js file, automate the operation by manipulating the DOM elements as required

For example, here get the user name and password input box, simulate input, and then simulate clicking the login button, complete the login operation

Note that if run_at is set to document_start, lazy loading is required here

Function input(inputElement, content) {let evt = document.createEvent('HTMLEvents'); evt.initEvent('input', true, true); inputElement.value = content; InputElement. DispatchEvent (evt)} / / analog input and submit the form / / username const username_element = document.getElementById("ContentHtml_txtUserName"); Const password_element = document.getelementById ("txtPassword"); // Button const btn_element = document.getElementById("ContentHtml_btnLogin"); // After input, click confirm input(username_element, "**"); input(password_element, "**"); / / login btn_element. Click ();Copy the code

3-4 Test use

After defining the plugin icon and popup page, you can enter the Chrome Plugin management interface

Open Developer mode and click Load Unzipped Extension on the left to load the project folder you created above

After the extension is enabled, every time you open the target website or log out, the login operation is automatically completed

4. The last

This example simply injects a script using content_scripts to automate a tedious login operation by manipulating the DOM elements

In fact, the complex Chrome plug-in will involve background configuration, floating frame layout JS scripts, inject-scripts and data transfer between them, which you can expand yourself

I have uploaded all the source code to the background, following the public number “AirPython” after the reply keyword “CRX” to obtain the complete source code

If you think the article is good, please like, share, leave a message, because this will be my strongest power to continue to output more high-quality articles!