[Webpage]-Google official chrome plug-in getting started tutorial

Http://code.google.com/chrome/extensions/getstarted.html (English)

Source: http://www.javaeye.com/topic/648713

 

I saw this article on JE (javaeye ).Article: Warning (if there are any inappropriate places, please forgive me ):

1. Make your browser ready
Needless to say, the first step is to install a browser. As for Windows, Linux, Mac? Official downloads are available.

 

2. Create and load an extension
2. 1. first create a folder
2. Create a file named manifest. JSON in your folder and write down the following content:

JSONCode

 

  {
  " Name  "  :  "  My first extension  "  ,
  "  Version  "  :  "  1.0  "  ,
  "  Description  " :  "  The first extension that I made.  "  ,
  "  Browser_action  "  :{
  "  Default_icon  "  :  "  Icon.png  "  
},
 "  Permissions  "  :[
  "  Http://api.flickr.com/  "  
]
} 

 

2. 3. Copy this icon to your folder

2. 4. Load your extension
A. Click the browser icon and select extensions
B. Add + in front of "Developer mode" in the upper right corner. Click it and several buttons will be added to the page, and + will change -,
C. Click the load unpacked extension button. A dialog window pops up,
D. Select the folder you created at the beginning and click OK. (Remember, do not place it in a directory with Chinese characters. Otherwise, an error will be reported. An error will be reported when I put it on the desktop)
After completing the preceding steps, the following content appears:

 

3. Add code to your extension
3. 1. Edit manifest. JSON and add the code (only add the bold line ):

JSON code

 

  ...
  "  Browser_action  "  :{
  "  Default_icon  "  :  "  Icon.png  " ,
  "Popup":"Popup.html"  
  },
... 

 

 

3.2.create the file popup.html and write the following code:

Java code

 

  <  Style >  
Body  {  
Min-Width  :  357px  ;  
Overflow-x  :  Hidden  ;  
 }  

IMG  {  
Margin  :  5px  ;  
Border  :  2px solid black  ; 
Vertical-align  :  Middle  ;  
Width  :  75px  ;  
Height  :  75px  ; 
  }  
  </  Style  >  

  <  Script  >  
  VaR  REQ  =    New  XMLHttpRequest ();
Req. Open (
  "  Get  "  ,
  "  Http://api.flickr.com/services/rest?  "    +  
  "  Method = Flickr. Photos. Search &  "     +  
  "  Api_key = 90485e931f687a9b9c2a66bf58a00001a &  "    +  
  "  TEXT = Hello % 20 World &  "     +  
  "  Safe_search = 1 &  "    +    //  1 is "safe"  
    "  Content_type = 1 &  "     +   //  1 is "photos only"  
    "  Sort = relevance &  "     +    // Another good one is "interestingness-Desc"  
    "  Per_page = 20  "  ,
  True  );
Req. onload  =  Showphotos;
Req. Send ( Null  );

  Function  Showphotos (){
  VaR  Photos  =  Req. responsexml. getelementsbytagname (  "  Photo  " );

  For  (  VaR  I  =     0  , Photo; photo  =  Photos [I]; I  ++ ){
  VaR  IMG  =  Document. createelement (  "  Image  "  );
IMG. SRC  = Constructimageurl (photo );
Document. Body. appendchild (IMG );
}
}

  //  See: http://www.flickr.com/services/api/misc.urls.html  
  Function  Constructimageurl (photo ){
  Return     "  Http: // farm "     +  Photo. getattribute (  "  Farm  "  )  +  
  "  .Static.flickr.com/ "     +  Photo. getattribute (  "  Server  "  )  +  
  "  / "     +  Photo. getattribute (  "  ID  "  )  +  
  "  _ "     +  Photo. getattribute (  "  Secret  "  )  +  
  "  _S.jpg "  ;
}
  </  Script  > 

 

 

3. Go back to the Extension Management page and click "reload" to load the new version of the plug-in.
3. 4. Click the plug-in icon in the upper right corner to see the effect, as shown in the following figure:

PS: In the last step, sometimes it will be a little slow. After you click the icon, it will actually be executed (when you move the mouse away, if the icon style is the one when you move the mouse up, note is in the run), I initially thought that is my code has a problem, the results later inadvertently found this problem, the following plus the original address: http://code.google.com/chrome/extensions/getstarted.html
Attach my plug-in folder in the attachment!

Attachment: http://files.cnblogs.com/hcbin/lib.rar

 

If you want to generate a chrome plug-in installation package, click the pack extension button on the Extension Management page and select the plug-in directory.