Use Google Chrome to develop plugins to embed JS code in Web pages

Google Chrome is a powerful browser that offers a wide variety of plugins that greatly enhance the efficiency of use, such as Vimium, Honx, etc.

Google provides these plugins while allowing users to develop their own plugins.

The recent script capture program that writes JS needs to test how it works in a Web page, so you can test it with the chrome plugin.

1. The first step is to create a new folder and create a new Manifest.json file with the following

{  "manifest_version": 2,  "name": "JS implants",  "description": "Insert the written Js in the Web page",  "version": "1.0",  "Icons": {    "$": "Icon.png"  },  "Permissions": [    "Tabs", "http://*/*", "https://*/*"  ],  "content_scripts": [    {"JS": ["Maidian.js"], "matches": ["http://www.baidu.com/"]}  ]}

Field Explanation:

The Manifes_version declaration is the version we use.

Name and description represent the names and descriptions of our plug-ins, and version is the release number of the plugin itself, which is used to show the user information about the installed plugin.

Icons refers to the icon that the plugin displays.

Permissions is the permission used by the plug-in, tabs allows the API to use Chrome.tabs and chrome.windows, followed by a matching pattern, which refers to the code that can interact with the mode's Web site.

Content scripts is a JavaScript script that runs within a Web page. By using the standard DOM, they can get detailed information about the pages that the browser accesses and can modify the information. Where JS refers to the script to be injected, marches defines which pages are injected with the content scripts.

2. Then define the resource files declared in the Manifest.json, including Icon.png and Maidian.js, and place the files in the Manifest.json sibling directory.

3. The next thing to do is to load our custom plugins, open the Chrome extensions panel, select "Load the expanding program being developed", select our new folder above, and then we can see that our own is already running in Chrome.

4. Look at the operation of the plugin.

Can see my JS script has worked on the homepage of Baidu, and successfully obtained the data we need.

Official tutorials and api:https://developer.chrome.com/extensions/getstarted