Understand the composition of chrome plug-in files

To understand the chrome plug-in, you must first understand the component file of the plug-in, and then understand the plug-in API provided by Chrome. The rest is JavaScript.
Currently, chrome plug-ins are developed in version 2.0. Many of the blogs that are intercepted on the Internet are 1.0, so some of them cannot be used directly, for more information, see the official documentation.

The chrome plug-in is actually a collection of files. After development, package [Zip compression format] using the packaging tool provided by chrome and submit it to the Chrome app store for review, you can search and install webapp directly. After downloading an installation package, we can directly decompress it using WinRAR and other decompression tools. The obtained content is all the content of the chrome plug-in. A plug-in usually contains the following types of files:
1. a manifest file named manifest. JSON, which is used to configure and control the resource reference of the entire plug-in.
2. One or more JS files, including backgroud scripts and content_script scripts.
3. One or more image files are used for plug-in reference and plug-in icon reference.
4. One or more HTML files used in pop-up boxes,
5. One or more CSS files for plug-in reference.

The learning of the entire plug-in starts with the manifest file. The configuration and process of the plug-in are controlled or introduced by this file. For the complete description of the manifest file, see. Http://open.chrome.360.cn/extension_dev/manifest.html,the field description for example:

{// Required field "name": "Test of Rep", "version": "1.0", "manifest_version": 2, # The newly developed plug-in must have this field // The description field "Description": "Test of description", "icons": {"128": "logo.png "}, // "default_locale": "en", // application type. Select either of the following: "browser_action ":{...}, "page_action ":{...}, "theme ":{...}, "app ":{...}, "browser_action": {// "default_popup": "popup.html", // after this option is used, The onclick event registered in the background script becomes invalid. "default_icon": "icon. ICO "," default_title ":" enable Object Library plug-in "}, ////************************************ * ***** // all of the following are provided as needed ////********************* * ****************** // permission for operations on the plug-in "Permissions ": ["tabs", "communications", "http: // */*", "https: // */*"], // background logic and event handler, "background": {"scripts": ["jquery-1.8.0.min.js", "background. JS "]," matches ": [" http: // */* "," https: // */* "]," CSS ": ["plug_style.css"]}, // The host page needs to inject resources "content_scripts": [{"JS": ["jquery-1.8.0.min.js", "content_script.js"], "matches ": ["http: // */*", "https: // */*"], "CSS": ["content_style.css"], "run_at ": "document_idle"}]}

Note that Chrome plug-ins have multiple types, and one plug-in can only be one of them. Optional types include:
1. "browser_action": browser activity plug-in. This plug-in displays an icon in the upper right corner of the browser. This icon can respond to user clicks.
2. "page_action": Page activity plug-in. This plug-in will display an icon on the far right of the browser address bar of the matching page. Its role and processing method are basically the same as those of browser_action. Only the display position and display conditions are different.
3. "theme": A Theme plug-in that provides a class of plug-ins that change the background of a browser's theme.
4. "app": the app plug-in, which is used to display an icon on the chrome application page. Click it and navigate to the specified URL, which is the simplest plug-in.

In addition to determining the application type of the plug-in, the plug-in must have the relevant permissions to work. The specific settings are in the permissions field. Usually the required permissions are HTTP, and tab, more details can be viewed here http://open.chrome.360.cn/extension_dev/manifest.html#permissions _

Basically, most plug-ins with some features require a background field. The content configured for this field will run in an independent background environment, it is automatically executed every time the browser is started or the plug-in is reloaded. This field is mainly used to specify the script file for running backgroud. The backgroud runtime environment is used to register the event operations of the listening browser and the plug-in itself, so as to control the transaction logic of the entire plug-in; at the same time, only the scripts specified here can use the API interfaces provided by the chrome plug-in. In addition, the backgroud runtime environment is also used for inter-page communication. More http://open.chrome.360.cn/extension_dev/background_pages.html

The content_scripts field specifies which URLs are matched for which resource files are injected, and when the injection operation is performed. The injection here is injected into the native PAGE, but the content injected by the content_script field will be in an independent runtime environment, there is no conflict with the resource file JS and CSS of the native PAGE, that is, they do not affect or overwrite each other. However, they operate on the same page Dom, so their mutual influence will only be reflected in the content changes of this Dom. More http://open.chrome.360.cn/extension_dev/content_scripts.html

After understanding manifest, you will know the general workflow of the entire plug-in. The rest is to drop the chrome plug-in API in the corresponding script file and process the functional logic of the plug-in, call resource files.