Chrome extension notation

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;} label.off{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://chrome.google.com/webstore/developer/dashboard, need 5 knife, register to publish.



	





	





	





	





	





	Data Source:



	





 

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


 


	





	Chrome extension notation