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.

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.

Development tools are simple, Notepad is OK, and of course there is a Chrome browser.

Create a new folder, for example, HelloWorld

Then create a text file, as the extension's configuration file, so the file name is Manifest.json, note that the extension is JSON, and then enter the following content.

Plain Code

1. {
2. "name": "first Chrome plugin",
3. "Manifest_version": 2,
4. "version": "1.0",
5. " description": "My first chrome plugin, not bad",
6. "Browser_action": {
7. " Default_icon": "1.png"
8. }
9. }

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.

Your first Chrome extension is complete.

What the? It's done? So fast?

Yes, open chrome, open the menu, find the extender options, my extensions under wrench, tools, and so on.

Click to load the extension you are developing

As you can see, your 1.png has been placed next to the address bar as an icon. It's just that it's no function.

Now let's add the HelloWorld. Add a few lines of code to the manifest file.

Plain Code

1. "Content_scripts": [
2. {
3. "matches": ["http://www.aaaaa.com/*"],
4. "JS": ["Myscript.js"]
5. }
6. ]

Note that the previous code is separated by commas.

You can see that we have added a new content, that is content_scripts, detailed introduction should go to see the official documents, I briefly introduced here, Content_scripts is run in the Open page script, can get the entire page of the DOM object, So you can use the script to manipulate the page.

Create a new JS file Myscript.js, inside the code is very simple.

JavaScript code

1. Alert ("HelloWorld");
2. Document.body.style.backgroundcolor="Gray";

The current plug-in directory is:

1.png

Manifest.json

Myscript.js

Reload the plugin on the Extensions page to see the effect.

When I opened the Baidu, Oh,my god!

After clicking OK

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