Chrome extension development Chinese tutorial-1

Create and load an extension

In this section , Will write a browser action Expand , This extension will add an icon to the Google browser toolbar .

1. Create a directory on disk , Code and resources for extension

2. In this directory , Create a text file , Name it manifest.json, Its content is ：

{
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

3. Put this icon in the directory ：

4. Load extension

a) Click on

Icon , Select tools from the menu > add-in , This opens the page for extension management

b) If “ Developer mode ” There is a “+” Number , Click on this. “+” No. 1 enters developer mode .“+” The number one will become “-” Number , More buttons and information will be displayed

c) Click on “ Load the extension being developed …” Button , A file selection dialog box will appear

d) In the dialog box , Locate the extension directory and click “ determine ”

If the extension is correct , Its icon will be displayed on the right side of the address bar , The extended information will also be displayed on the extension management page , As shown in the figure below ：

Add code to the extension

In this section , It will add a little function to the extension

1. edit manifest.json file , Add the following ：

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }

In the extended Directory , Create a file called popup.html Text file for , Add some code ：CSS and JavaScript code for hello_world

2. Return to the extension management page , Click on “ Update the extension now ” Button , The modified extension will be reloaded

3. Click the extended icon , A bubble window will pop up , Show popup.html The content of the document . Look like the following ：

If you can't see this bubble , Please do it again strictly according to the above steps . Note that if you try to load anything outside the extension Directory html Files will fail .