Chrome plugin Development (i)--Create the first chrome plugin

Recently in the development of a chrome plug-in, found some articles on the internet, although according to the article can write the corresponding example, but to carry out the actual development, found that there are many articles do not have pits. I will add some of these pits in conjunction with several aspects that I have encountered during the development process.

If you have experience with front-end development, then you will be able to start your chrome plugin development quickly. The main content of Chrome plug-in development is still "third Kind"--html, CSS, JavaScript different is the execution environment and the usual browser slightly different, and there are some security restrictions, and plug-in development can use a bit of chrome specialized packaging API

What are the better documents?

The first is the official Chrome document: https://developer.chrome.com/extensions/If the English is not very good, or because the network reasons can not open the site of the classmate, you may see the following link.

Chrome does not currently have a Chinese document, but the 360 browser's speed mode uses the WebKit kernel and also supports Chrome plugin development, so 360 translated a very detailed development document (like silently). The ability of the students or to look at the official, after all, the content is full and new. Address: http://open.chrome.360.cn/extension_dev/overview.html

Of course, some of the basic stuff is already in the document, and I'm not just going to say it, but I'll mention it in my example.

The basic structure of the chrome plugin

The chrome plugin is structurally divided into extended interface sections and content script (injected into the script executed within the page)

The chrome plugin's extended interface section is divided into browser action (the Start button is outside the Address bar) or page action (the Start button is in the Address bar). Each app (extension) can have a maximum of one browser action or page action. The page action should be selected when the icon for the app (extension) is displayed, depending on the individual pages, and in other cases the browser action can be selected.

The content script executes in the browser page and interacts with the extension interface to complete the corresponding execution logic.

Each plugin has a manifest file that describes the configuration information associated with the plugin, including (name, icon, file path, execution time, and so on). This is described in a later example.

Plug-in code, in fact, is HTML, CSS and JS, because we will eventually be based on manifest files packaged into a CRX file. So a reference to a static resource simply uses a relative path.

First Chrome Plugin

　　We define a requirement: A plugin that gets the current weather.

We create a new folder as the project directory

mkdir WEATHERCRX
CD WEATHERCRX

With the catalog, our first thing is to create a Manifest.json, the basic content is as follows:

1 {  2"Name": "Weather",  3"Version": "0.0.1",  4"Manifest_version": 2,5"description": "Get Weather",  6"Permissions": ["Tabs", "<all_urls>", "http://*/*", "https://*/*"],7"Browser_action": {  8"Default_icon": "Icon.png" ,9"Default_title": "Weather",Ten"Default_popup": "Popup.html" One   }   A}

Note: "Manifest_version": 2 This one, must be filled in, because from Chrome18 onwards, the chrome plugin developed by the Manifest.json file "Manifest_version": 2 The attribute must be explicitly (fixed) declared. I've been unsuccessful many times before, but I didn't add this one.

Our needs and the content of the page is not directly related to the specific domain name, I did not join the content_scripts in the example, and the use of browser_action.

All the file paths in the Manifest.json are relative to the Manifest.json. The main point of Default_popup, this HTML can be understood as the portal page, that is, click the plug-in button when the Bubble Pop-up window.

I define it as popup.html.

Start writing popup.html, and then everything is the same as the usual front-end development.

Popup.html:

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Weather</title>6     <Linkrel= "stylesheet"type= "Text/css"href= "Lib/bootstrap/css/bootstrap.min.css" />7     <Scripttype= "Text/javascript"src= "Lib/jquery/jquery.min.js"></Script>8     <Scripttype= "Text/javascript"src= "Lib/bootstrap/js/bootstrap.min.js"></Script>9 </Head>Ten <Body> One     <Divclass= "Main-wrap"> A         <Divclass= "Panel Panel-default"> -            <Divclass= "Panel-heading"> -               <H3class= "Panel-title">Weather</H3> the            </Div> -            <Divclass= "Panel-body clearfix"> -               <DivID= "City-list"> -                   <formrole= "form"> +                    <Divclass= "Form-group"> -                       <label for= "Name">City/region</label> +                       <SelectID= "City-select"Multiple Class= "Form-control"> A                         <optionvalue= "101010100">Beijing</option> at                         <optionvalue= "101070101">Shenyang</option> -                         <optionvalue= "101291401">Lijiang</option> -                         <optionvalue= "101030100">Tianjin</option> -                       </Select> -                    </Div> -                 </form> in                 <PID= "City-weather"class= "Alert Alert-success"style= "Display:none;"></P> -                 <aID= "Weather-get"class= "btn btn-success pull-right">Get</a> to               </Div> +               -            </Div> the         </Div> *  $     </Div>Panax Notoginseng  -     <Scripttype= "Text/javascript"src= "Js/popup.js"></Script> the  + </Body> A </HTML>

Find the API interface of the "China Meteorological Bureau Public Meteorological Service Center" on the Internet address: http://www.weather.com.cn/adat/cityinfo/101010100.html 101010100 for Beijing, see:/http Blog.csdn.net/duxinfeng2010/article/details/7830136 's finishing.

Popup.js:

1$ (document). Ready (function(){2     functionShowweather (WI) {3$ (' #city-weather '). Text (wi.city+ ': ' +wi.weather+ ' +wi.temp1+ '-' +wi.temp2). Show ();4     };5 6     functionGetWeather (citynum) {7$.get (' http://www.weather.com.cn/adat/cityinfo/' +citynum+ '. html ',function(res) {8             if(res.weatherinfo) {9 Showweather (res.weatherinfo);Ten             } One}, ' JSON '); A     }; -  -$ (' #weather-get '). Click (function(){ the         varcurcity = $ (' #city-select '). Val (); -         if(Curcity < 1) {return;} -GetWeather (curcity[0]); -     }); +});

It is important to note that if you invoke the Weather API on your page, there will be cross-domain restrictions, but it will not be restricted in the JS of the extended page. Because the extension itself does not belong to the currently open page.

This allows our plugins to be developed, in the Chrome developer mode, to package the project:

Then drag the generated CRX file into the window to install.

Click the button, select City, see if you see the weather?

So our first chrome plugin is done.

We will continue to discuss some of the issues that are encountered in the development of chrome plugins.

Chrome plugin Development (i)--Create the first chrome plugin