The file structure of chrome extensions developed by Chrome extensions

A chrome extension includes a range of files, HTML files, CSS style files, JavaScript scripts, images, and one of the most characteristic manifest.json.

1. What is Manifest.json ?

It is a manifest file that each Chrome extension has and has only one, which indicates the basic information about the extension, such as the name, version, required permissions, and so on, in JSON format.

Json

JSON is a language-and platform-independent data format, and JSON objects are formatted static data, which is used to exchange information between modules in the next Chrome extension. Transmission is a simple string to pass, JS in the receipt of JSON data can be viewed as an object to parse, which can have a hierarchy. In fact, not only the data exchange between the Chrome extension modules can be used in this format, cross-platform data communication across the application can also be used in this format, because its data redundancy is very small, and readability is very good, but also easy to parse (in my previous introduction, "JSON" and "JSON" have, Because this case is irrelevant, it means the same thing. The following Manifest.json can be used as an example.
In the *.json format, the content of the file is a JSON object. Manifest.json is a format-based way to specify the basic information for a chrome extension.

Manifest.json

As a direct example, Gmailassist's Manifest.json part reads as follows:

{ "Manifest_version": 2, "Name": "Gmail Mailbox Attachment Processing assistant", "Version": "1.9", "Default_locale": "en", "description": "Query all the attachments in the mailbox, support bulk download, support batch add to the latest draft." To get started, after signing in to Gmail, click the right-hand icon in the Address bar and select "Authorize". ", "Icons": { "$": "Images/icon48.png", "$": "Images/icon128.png" }, "Short_name": "Gmailassist", "Page_action": { "Default_icon": { "+": "Images/icon19.png", "A": "Images/icon38.png" }, "Default_title": "__msg_extname__", "Default_popup": "Popup.html" }, "Background": { "Scripts": ["Background.js"], "Persistent":false }, "Content_scripts":  [        { "JS": ["Oauth2/oauth2_inject.js"], "Matches": ["http://www.google.com/robots.txt*"], "Run_at": "Document_start" },        {...} ],    ...    }

First, as an example of how we understand the JSON format, the above paragraph, enclosed by ' {' and '} ', is a JSON object. To put it bluntly, a JSON object is a struct, with individual fields, separated by commas, and no commas after the last field. Each field is a "Key:value" form, each "key" can be understood as a property of the struct, a specific property must have a specific value. (unlike the C-language struct, here you do not need to declare in advance what the properties of a struct, and do not need to specify its type for each property, such as the C language of int, char, etc., its type will be parsed in JS automatic judgment.) The "content template", similar to the declaration of struct in C, does not require you to worry about, just for Manifest.json, Chrome has defined a set of "templates" that you can do as you write your manifest by the specifications that Chrome requires)

A JSON object can contain multiple side-by-side fields (properties), each of which can be one of several types: string, number, object, array, Boolean , and null. Strings are a string of characters directly enclosed in double quotation marks ("") (e.g. the value of the name attribute in the example "Gmail Mailbox Attachment Processing Assistant"), the number is no quotation marks (such as the value of manifest_version in the example 2), the array is used ' [', '] ' One or more elements enclosed (this element can be one of the above mentioned strings, numbers, objects, arrays, etc.), of course, the elements within an array must be of the same type, and Boolean is true, False (without quotation marks). Each type can find the corresponding instance in the example above.

When your extension is released and installed, the chrome store and chrome will check Manifest.json, get the necessary information, and check if your writing is legal (for example, if you have an embedded JS script in your popup.html, and your "Content_ Security_policy "field is empty and you are trying to get chrome to load your extension, it will prompt for an error. These do not understand now, it is not important at present, there is a general impression on the line, to the back naturally will understand). The so-called necessary information is not only some of the information (such as the name of the extension, the abbreviation, the introduction, etc.), but also the information to the browser (such as Content_script, Page_action and other fields), which informs Chrome about the entry of your program, and so on.

Specifically, there are several characters commonly used segments:
There are three properties that are required : Name, version, Manifest_version.
1,"name": the name of your extension program;
string that can include Chinese. It is added here that Manifest.json needs to be saved in UTF-8 encoded format, otherwise it will be reported as an error when loading into the browser.
2,"version": refers to the version number of your extension program;
string , note that although the version number is generally a string, it should be represented by a string, not a number, so don't forget the quotation marks. The version number can be up to 3, separated by 4 numbers, such as "1.0.0.16".
3,"Manifest_version": Specify the version of the manifest file format ( number );
After Chrome18 (open chrome://help in Chrome to see your current version of Chrome), it should all be 2, so write 2 directly.

Other characters commonly used section, I only introduce the gmailassist, the complete introduction can refer to Google's official documents. In addition to say a little more, easy Baidu to, have a Chinese Chrome extension development document, but I remember this document is not too complete, and the quality of translation is not too high, read more laborious. For convenience, or to see the official Google documents, after all, the technical staff to write documents, there is no hard to understand the long difficult sentence, very good reading, and there are inevitably some inaccurate translation, see the official documents or more insurance. (More to say, maybe the novice in the FQ will have obstacles, recommend a fool-style gadget, blue Light (Lantern), the effect is very good Baidu download it)

"Default_locale": This is the language that specifies the default display of your extension, involving internationalized content, which is described later;
"description": The description of your extension, which is displayed in the Chrome store and the Chrome extension page, as in. (where the store is supposed to be the default language you specified in manifest by Default_locale, which I specified here in English)

(Supplement: Set the Browser language by: 1. Open Chrome's Settings page; 2. Pull down to "show advanced Settings ...", point it; 3. Then pull down to find "language"-"language and input Settings", click it 4. Click Add in the lower left corner, select the language you want and confirm; 5. In the left-hand list, click the language you want, and on the right, "Google Chrome in this language"; 6. Restart Chrome)
"description" also has the "Icons" field, which specifies the icon for your extender, and the number indicates the resolution (such as 128 for the image resolution of 128*128 pixels).

"Short_name": The abbreviation of your extension, this dispensable.
"Page_action": There is another field on the same lateral"Browser_action", one of the most in your manifest. Visually, these two attributes indicate whether your extension will work in a particular webpage, or if you open the browser. More intuitively, your extended icons appear in different locations, such as.

In the picture is the right end of the address bar, obviously there are several icons inside and out of the address bar. The corresponding in the address bar is specified page_action extension (such as gmailassist), the address bar outside the corresponding is designated browser_action. When developing, decide which to use according to your needs and specify Page_action or browser_action in manifest. Because Gmailassist is for Gmail, so it should be available when the user is browsing the Gmail mailbox, other times it will just hide the line, so we choose Page_action. (Browser_action and page_action are about the same, details can be seen in Google Docs)
Notice that there are several fields in the page_action:
"Default_icon"Specifies the icon that your extension displays in the address bar, similar to the icons in the previous description, and the number indicates the resolution. Unlike the icons in description, the latter specifies an icon that appears in Chrome's Extended Administration page (chrome://extension), which refers only to the icon in the Address bar. By default, Chrome chooses a 19-megapixel image, which shows 38 pixels for the retina screen. These icons are not all resolutions need to specify a picture, but in order to ensure that the results, it is best to take the several sizes I am involved in the preparation of a picture. If you don't specify your own icon, it's also possible, and chrome will display a default icon. If you need to change the icon dynamically, you can refer to SetIcon (Https://developer.chrome.com/extensions/browserAction#method-setIcon) or badge (as described in the same page as SetIcon).
"Default_title"Is the descriptive text that appears when you hover over the icon in the Address bar.
"Default_popup"Is the small window that pops up below the icon when you click on the extension icon, as the popup page of Gmailassist.

Here are a few of the properties, here is just a brief introduction to the concept, it is difficult to understand the novice beginner, it is OK, there is an impression on the line, I will specify the following separately.
"Background": Your extension can be pointed out in this field if you need something that continues to run in the background. Not only is JS, you can also specify a self-written HTML, like this:

"Background": { "page": "background.html", "scripts": ["Background.js"],  false }

If you just specify that Js,chrome will generate an HTML by itself to run the script you specify in the background, it will not appear if you specify the HTML that you write yourself.
the "persistent" value defaults to True. When True, the JS script that you indicate in the background field (note that the format is an array, so that you can have multiple scripts) will continue to run in the background, and if persistent is false, the scripts will only run when the event is active. When an event is inactive, resources such as its occupied memory are freed.

"Content_scripts": The content of this property is an array of objects, each object in the array indicates a series of JS scripts and the pages that will be injected (support wildcard *), and the injection time (can be "Document_start", " Document_end "or" Document_idle ", Default to" Document_idle ").
To illustrate, the script here is injected into the page where you want to manipulate the DOM, but this injection is different from the introduction of an external script statement that writes directly to the page. The multiple JS that is introduced directly in the page is a shared namespace, but Content_script is independent from each other, and the Content_script and the page's original JS share only the DOM elements of the page. In the early days of gmailassist development, this place brought me some trouble, and I'll elaborate on that later.

Briefly introduce so many fields, these can be said to be the most commonly used, and others are very commonly used, such as "permission" , etc., gmailassist involved, I will be introduced slowly in the back, and Gmailassist not involved in, please refer to Google's documentation.

2. Internationalization (Multi-language support) related documents

_locales ", its structure
en , zh two folders, indicating that gmailassist have two versions in English and Chinese respectively. Two folders each have a file, called "Messages.json " (two folders are the name of the file), It formats each string of different language versions that your plugin will use, such as: careful words, you may notice "Page_action" The field has a "Default_title" with a value of "__msg_ Extname __ . As I said earlier, this field shows you the text that will appear on the icon when your mouse is placed on it. This part is used in the internationalization (i18n) processing, for different languages, the emerging text will show different content. Specifically to this example, in the _locales->zh folder under the Messages.json, there is a paragraph:

{ "Extname": { "message": "Gmail Accessory Assistant" },    ...}

Similarly, in the _locales->en folder under the Messages.json, there is this paragraph:

{ "Extname": { "message": "Gmail Attachment Manager" },    ...}

Notice that "extname" corresponds to "__msg_extname__", and when the plugin is running, Chrome will "__msg_ Extname__", according to the current user browser settings language, go to the plug-in _locales folder to find the current language corresponding Messages.json, and find the corresponding field"extname", Take out the value of the message property in this field and replace "__msg_extname__".
therefore, Messages.json in the ZH folder, there is a copy of all fields with the same key value but different value values in the En folder. Of course, all Messages.json are not required to have full field names, and when Chrome does not find the desired message content in the file in the current language, it goes to the default language folder. For example If there is a corresponding ZH-CN (Simplified Chinese) A copy of the Messages.json, there is an en, there is a copy of en; the current user's browser language is set to ZH-CN, the default language declared in the plugin manifest is en; but there are no JSON files in ZH-CN and zh. "Extname" field, then Chrome will follow the zh-cn,zh,en in the order it finds it.
each key in Messages.json can have another field-"description"-to illustrate the meaning of this key, which is for translators, and if you intend to translate it yourself, you can not write this field. In addition, Chrome requires that the default_locale field be declared in the Manifest.json, and that the _locales folder in the plugin (that is, internationalization) is an adequate relationship, that is, one has to have another, without which there can be no one.
internationalization-related content, there is no introduction, there is a part of the script in the back of the introduction.

3. Other documents

There are some *.html,*.css,*.js, all of which are bound to be touched by Web pages. Complex advanced features may not be understood for a while, but the basic syntax is easy to grasp, W3cschool's tutorials are exhaustive, and if you're a novice, take the time to learn the basics of these three things first.

The general file structure of an extension is the way it is, and the next article describes how the scripts in the Chrome extension run and communicate.
Finally, two links are attached:
http://www.ituring.com.cn/minibook/950, this book was very helpful when I first approached Chrome extension, and it was very clear, with a lot of small examples to help understand.
Https://crxdoc-zh.appspot.com/extensions/getstarted, this is the online personal translation of the Chrome extension and application development documents, I personally believe that the quality of translation than of the document is higher, But I still suggest that you refer to the official English document of Google, and only this as a supplement.

The file structure of chrome extensions developed by Chrome extensions