Chrome extension notation

Source: Internet
Author: User
Tags chrome developer

Recently saw company colleagues often write the chrome extension, to improve the efficiency of production, recall that they have also written the chrome extension, but because not often write, also did not accumulate also forget, now re-review.

First, the basic concept of chrome extension

  The Chrome extension app is actually a set of files that are compressed together, including html,css,javascript scripts, picture files, and any other required files. Apps (extensions) are essentially web pages that can use all the browser-provided APIs, from XMLHttpRequest to JSON to HTML5.

An app (extension) can interact with a Web page, or with a server through content script or Cross-origin xmlhttprequests. Apps (extensions) also have access to the internal features provided by the browser, such as tags or bookmarks.

II. basic knowledge needed for chrome expansion development

  1. Chrome extension file

Chrome extension files are suffixed with. CRX, and when you download an extension on the Google Chrome Extensions website, chrome downloads the. crx file to the user data\temp of the Chrome Application Data folder, typically C: \ Documents and Settings\User\local Settings\Application Data\google\chrome\user Data\temp, Installation Complete or cancel installation, The file will be deleted: CRX is actually a compressed file, and the file directory can be seen by opening the file using an extract file.

So we can assume that we're actually writing a web app, and then we'll put a shortcut on the Chrome toolbar as per Chrome's rules.

  2. Browser Actions (extended icon)

  Translating browser actions into an extended icon is not very accurate, but its function is to display your app on the Chrome toolbar. We see a file Manifest.json that uses this file to register the corresponding icon and other parameters to the browser Actions. For example, the extended icon for Evernote.

3.Page Actions (Address bar icon)

  If you are familiar with some chrome plugins, you will find that some of the extended icons are not displayed on the right side of the address bar, but are displayed on the inside of the address, which is the page Actions address bar icon.

You can see that there are three page Actions in the picture, I marked the Chrome bookmark, and now you will find that this is the chrome extension, but it is not directly embedded in chrome.

The difference between page actions and browser actions is that page actions are not always displayed and must be used on a specific page. So in development note: If not all of the features available on the page, use page actions

4. Popup Popup Window

Popup belongs to browser Actions, which appears when you click on the icon to place any HTML element in it, and its width is self-adapting. Of course, this popup window will not be blocked by Chrome:)

As in the popup window of Evernote:

5. Background Pages Background page

This window will not show, it is the extension's background service, it will keep running. For example, in some data-saving programs, if the current user closes the popup, background pages is required to do the appropriate work.

  6. Files included in the Chrome extension

Each application (extension) should contain the following files:

    • A manifest file
    • One or more HTML files (unless the app is a skin)
    • One or more JavaScript files that are optional
    • Optional any other files needed, example slices

When developing applications (extensions), these files need to be placed in the same directory. When you publish an application (extension), the directory is packaged in a compressed file with an application (extension) name of. Crx. If you use Chrome Developer Dashboard to upload an app (extension), you can automatically generate a. crx file.

Iii. Examples of chrome expansion

Directory structure:

Manifest.json file

{ //Required Fields "name":"My Chrome Extension", "version":"1.0", "manifest_version":2, //suggested Fields "Description":"MY self CHROME EXTENSION", "icons": { " -":"Images/1.png" , " -":"Images/1.png" }, //"Default_locale": "en", specifies the subdirectory of the default string that the extension guarantees: _lcoales. If the extension has a _locales directory, this field is required.          If there is no _locales directory, this field must not exist. //choose one more, or none "browser_action": { "Default_icon":"Images/1.png" , "Default_title":"My Chrome Extension", "Default_popup":"index.html" }} 

index.html file:

<! DOCTYPE html>"en">"UTF-8"> <style type="Text/css"> *{margin:0;p adding:0;} body{color:#333; overflow:hidden;margin:0px;padding:5px;background:white;font-size:12px;} Img{margin:04px;}    #addItemDiv {color: #ccc;}    . Hide{display:none;}    . Show{display:block;}    . Taskitem{cursor:pointer;} Input{width: -%;} label.on{width:12px; Display:inline-block; height:12px; Background:url (images/bg_task_on.gif) no-repeat 0px 2px;}{width:12px; Display:inline-block; height:12px; Background:url (images/bg_task_off.gif) no-repeat 0px 2px;} </style>"NewItem" class="Gray"> Add New Item </div> <div id="Adddiv" class="Hide"><input type="text"Id="Txttitle"/></div> <div id="taskitemlist"> <divclass="TaskItem"> <labelclass=" on"></label><spanclass="Tasktitle"> New Tasks </span> </div> <divclass="TaskItem"> <labelclass="off"></label><spanclass="Tasktitle"> Completed Tasks </span> </div> </div> </body>

We'll see the file drag-and-drop to the Chrome extension:

is not very simple, a simple small example is done.

IV. Packaging Chrome Extensions

In the browser window, type chrome://extensions/, or menu------extensions, you will see two menus "Loading extensions under development" and " packaging extenders "

We click Package Extender:

You'll see that there are two files generated: Mychrome.pem and MYCHROME.CRX, MYCHROME.CRX unzip to see the contents of the element, then we can upload the MYCHROME.CRX extension to the Chrome store.

Upload chrome extensions to the Chrome store

Enter address Https://, need 5 knife, register to publish.

Data Source:

    1. teach you to develop Chrome extensions one: Developing Chrome extenstion is really simple
    2. teach you to develop Chrome Extensions II: Add behavior for HTML
    3. Teach you how to develop Chrome extensions three: about storing data locally
    4. Speed Browser Application development platform
    5. Chrome Extender Development Examples
    6. A preliminary Chrome Packaged App notation

Chrome extension notation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.