Chrome Extender developed to run its own JS on the target page

We all know that JS is running on the client, so if we write a browser, it is bound to download down the source code to add JS. Unfortunately we do not have this ability. Fortunately, Chrome's extensions can help us do this.

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.

This article will be a primer on Chrome plug-in development, enabling the use of chrome extensions to run our JS functionality on the target page. Details about the Chrome extension are available on the website.

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

{  "name": "First Chrome plugin",  "manifest_version": 2,  "version": "1.0",  "description": "My first chrome plugin, not bad"  ,"Browser_action": {    "Default_icon": "1.png "  },  " content_scripts ": [    {      " matches ": [" http://chenyu.mydearest.cn/" ],      "JS": ["Test.js"]    }  ]}

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.1.png, just drag a picture to come in OK. It is also important to note that the text file needs to be saved with the UTF8 character set.

3. New JS file Test.js

Alert ("HelloWorld");d ocument.body.style.backgroundColor= "Gray";

Content_scripts is a script that runs on the open page and can get a DOM object for the entire page, so you can use the script to manipulate the page.

4. Open Chrome, open the menu, and find the Extender options in my extension path, tools------wrench. Click to load the extension you are developing, add folder is OK!

Chrome Extender developed to run its own JS on the target page