Teach you how to develop chrome extension 1: Developing chrome extenstion is actually very simple

1. Teach you how to develop chrome extension 1: Developing chrome extenstion is actually very simple
2. Teach you how to develop chrome extension 2: Add behavior for HTML
3. How to Develop chrome extension 3: about local storage data

The update speed of Chrome is unprecedented. Now, the first thing I do when I start the system every day is to enable chrome to check if a new version is available. The refreshing interface, user-friendly operations, network backup data, and fast start-up speed make me feel at ease, and it also has a large number of extensions. Compared with Firefox plug-ins, it is slightly insufficient in quantity and quality, however, I believe chrome will soon surpass Firefox in terms of expansion. The memory usage on Firefox is not satisfactory. Maybe one reason I use Firefox is because of firebug, however, I believe that the firebug plug-in of chrome will soon become available.

Chrome's extension development is very simple. We only need to master the HTM + CSS + JavaScript of web development, and we can quickly develop our own extensions.

What you need to know

You must first master some basic knowledge before development.

1. Chrome extension file

Chrome extension file. CRX is the suffix. When Google Chrome expands the official website to download the extension, chrome will. download the CRX file to user data \ temp in Chrome's application data folder, which is generally c: \ Documents ents and Settings \User\ Local Settings \ Application Data \ google \ chrome \ User Data \ Temp. The file will be deleted after the installation is completed or canceled .. CRX is actually a compressed file. open the file with the unzipped file and you will see the file directory, which is expanded by "turn off the light and watch the video:

Therefore, we can think that we are actually writing a web application, and then placing a shortcut on the chrome toolbar according to Chrome's rules.

2. browser actions (Extended icon)

Translating browser actions into extended icons is not very accurate, but its function is to display your applications on the chrome toolbar. We can see the manifest. JSON File above, which is used to register the corresponding icons and other parameters to browser actions. For example, it is the extension icon of Evernote.

3. Page Actions (address bar icon)

If you are familiar with some chrome plug-ins, you will surely find that some extended icons are not displayed on the right of the address bar, but on the right of the address, which is the page actions address bar icon.

It can be seen that there are three page actions in the above figure. I marked chrome as a bookmarkdoning. Now you will find that this is actually a chrome extension, but it is not directly embedded in chrome.

The difference between Page Actions and browser actions is that page actions is not displayed at any time and must be used in a specific page. Therefore, during development, note that if not all pages can be used, Use Page Actions.

4. Popup pop-up window

Popup belongs to browser actions. When you click the icon, this window appears. You can place any HTML element in it, and its width is adaptive. Of course, this pop-up window will not be intercepted by Chrome :)

For example, the following figure shows the popup window of Evernote:

5. Background pages

This window is not displayed. It is the extension's background service and will continue to run. For example, in some data storage programs, if the current user closes the popup, the background pages is required for corresponding operations.

Do it yourself

We will explain it step by step with a simple task management program.

Is the interface implementation. First, we will complete the display part of the interface. First, we will create a new folder with the expanded application name as the title. Our application here is called mytasklist. Then, find an icon file and put it in the folder. You can also right-click to download this icon:

The size of the icon file should not be less than 19px * 19px, but it is better not to exceed this size. Although the large image is adaptive, it will make the application file larger. The complete and unfinished icons are then placed in the resource file. You can create any folder and put it in, because the CSS file defines their paths.

Create manifest. JSON to define our program Configuration:

{    "name": "MyTaskList",    "version": "0.9.0",    "description": "Management my everyday's task lists.",    "browser_action": {      "default_icon": "icon.png" ,    "default_title": "My Task List",    "default_popup": "popup.html"  }  } 

Name indicates the application name, version indicates the version number, and description indicates the function description. These can be seen after the extension is installed. See:

Browser_action indicates that the extended icon segment is displayed. It defines the icon address, title (that is, the mouse hover prompt), and default popup page. Here, we define the popuppage as "popup.html.

To enable the definition of popup.html display, it does not need to use the <HTML>,

<Style type = "text/CSS"> * {margin: 0; padding: 0;} body {color: #333; overflow: hidden; margin: 0px; padding: 5px; background: white; font-size: 12px;} IMG {margin: 0 4px;} # additemdiv {color: # CCC ;}. hide {display: none ;}. show {display: block ;}. taskitem {cursor: pointer;} input {width: 100%;} 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> <Div id = "newitem" class = "gray"> Add a new item </div> <Div id = "adddiv" class = "hide"> <input type = "text" id = "txttitle"/> </div> <Div id = "taskitemlist"> <Div class = "taskitem"> <label class = "on"> </ label> <SPAN class = "tasktitle"> new task </span> </div> <Div class = "taskitem"> <label class = "off"> </label> <SPAN class = "tasktitle"> completed tasks </span> </div>

Open preview and it will be displayed:

In this way, the file has been created. The file list is as follows:

Now you can try to package it into your chrome.

First, open chrome-tools-extensions, expand the developer mode, and click the "package extension" button:

Click "package extension ...", The package selection file window is displayed. Find the created folder in the extension root target. You do not need to select the private password file for the first time:

Click OK to generate the mytasklist at the same level in the root folder. CRX and mytasklist. PEM, mytasklist. PEM is a program signature file, which is also required in the development of a new version. Do not delete it. Drag mytasklist. CRX into the chrome form and install mytasklist in chrome.

We can see the results of this simple model. In the next section, we will improve the code.