JavaScript to develop the Chrome browser Extender UI tutorial _javascript Tips

Basic knowledge
1. plugin file structure
1.1, Manifest.json
each extended, installable WebApp, Skin, has a JSON-formatted manifest file that holds important plug-in-related information.

One of the most basic configuration examples:

{"
  name": "Browser Action demo",
  "version": "1.0",
  "Permissions": [
    "Tabs", "http://*/*", "https://*/ * "
  ],
  " browser_action ": {
    " default_title ":" Switch Light ",
    " Default_icon ":" Icon.png ",
    " Default_popup ":" Popup.html "
  },
  " background ": {
    " page ":" Background.html "
   },
  " Manifest_version ": 2
}

1.2, Popup
Plug-in window, the above configuration in the Browser_action default_popup is this page.

1.3, Background page
most applications include a background page (background page) that performs the main functions of the application.

1.4. Content Scripts
The content script enables applications to interact with Web pages, which are JavaScript scripts that can be run inside a page that has been loaded by the browser. Content script can be viewed as part of a Web page, not as part of the application in which it resides.

2, the interaction between files
the popup window can call functions directly from the background page.

The Content script can read and modify the DOM tree of the current Web page, but it does not modify the DOM tree of the background page (background) where it is applied.

Interaction between Content script and application: Messages can be sent to each other

3. Inject JS (Content scripts) file for Web page:
method One, configured in the Manifest.json file:

"Content_scripts": [
  {"
   matches": ["http://www.google.com/*"],
   "CSS": ["MyStyles.css"],
   "JS": [" Jquery.js "," Myscript.js "]
  }
 ,

Method two, through Executescript ():

Inject JavaScript script execution into the page.

Chrome.tabs.executeScript (integer tabid, object details, function callback)
Chrome.tabs.executeScript (TabID, { File: "Func.js", allframes:true});

UI appearance
1. Browser Action:
Add an icon to the right of the Chrome main toolbar's address bar.

Note: Packaged apps cannot use browser actions

1.1, Manifest.json in the configuration
Register Browser Action:

{
 ' name ': ' My extension ',
 ...
 ' Browser_action ": {" Default_icon ":"
  images/icon19.png ",//optional 
  " Default_title ":" Google Mail ",   // Optional Shown in tooltip 
  "Default_popup": "popup.html"    //Optional 
 },
 ...
}

1.2, Configuration item description
(1) Default_icon
Icon *19PX

Modify the Default_icon field in the browser_action manifest, or call the SetIcon () method.

Chrome.browserAction.setIcon (Object details)

Sets the icon for the browser action. The icon can be the path to a picture or the pixel information extracted from a canvas element. This property must be specified either as an icon path or as a canvas imagedata.

(2) Default_title
Modify the Default_title field in the browser_action manifest, or call the Settitle () method. You can specify a localized string for the Default_title field, and click Internationalization to view details.

Chrome.browserAction.setTitle (Object details)

Set the caption for the browser action, which will be displayed in ToolTip.

(3) Badge
Browser actions can optionally display a badge-to display some text on the icon. Badges can simply update some small extended status hints for the browser action.

Because badge space is limited, only 4 of the following characters are supported.

Set badge text and colors to use Setbadgetext () Andsetbadgebackgroundcolor () respectively.

Chrome.browserAction.setBadgeText (Object details)

Sets the badge text for the browser action, badge displayed on the icon.

Setbadgebackgroundcolor

Chrome.browserAction.setBadgeBackgroundColor (object details)

Sets the background color of the badge.

(4) Default_popup
Popup Bubble Tip

Modify the Default_popup field in the browser_action manifest to specify an HTML file, or call the Setpopup () method.

Chrome.browserAction.setPopup (Object details)

Sets the HTML to display in popup when clicking Browser actions.

1.3, Tips
to get the best results, follow these guidelines:

Confirm that the Browser actions are only used in scenarios where most Web sites have functional requirements.
Verify that the Browser actions do not use scenes that feature on a few pages, use page actions.
Make sure your icon size is as full as possible in the 19x19 pixel space. The Browser action icon should look bigger and heavier than the page action icon.
Don't try to imitate Google Chrome wrench icons, they may have problems with different themes, and the extensions should be more eye-catching.
Use alpha channels as much as possible and smooth the edges of your icons, as many users use themes and your icons should perform well in a variety of backgrounds.
Do not keep flashing your icon, which is very annoying.

2, right button menu
you can choose to add a right-click menu item for different types of objects, such as pictures, links, and pages.

You can add multiple right-click menu items as needed. Multiple right-click menu items added to an extension are automatically grouped by chrome into the level two menu of the extended name.

A right-click menu can appear in any document (or frame in a document), even in a local file (such as file://or chrome://). To control the display of a right-click menu in a different document, you can specify Documenturlpatterns when you call Create () and update ().

2.1, Manifest.json in the configuration
declare "Contentmenus" permissions in the manifest. At the same time, you should specify a 16x16 icon to use as the identification of the right-click menu. For example:

{
    ' name ': ' My extension ',
    ...
    ' Permissions ": [
     " Contextmenus "
    ],
    " icons ": {" "
     :" Icon-bitty.png "," a "
     :" Icon-small.png ",
     "128": "Icon-large.png"
    },
    ...
}

3, Desktop Notice
notifies the user that something important has happened. Desktop Alerts appear outside the browser window. The following picture is the effect of the notification display, under different platforms, the notice will be slightly different display effect.

Straight-Connect a small snippet of JavaScript code to create a notification, of course, by extending a separate HTML page within the package.

3.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [
  " Notifications "
 ],
 ...
}

3.2. Interacting with extended pages:
use Getbackgroundpage () and Getviews () to create interactions between notifications and extended pages

Call Extended page method in notification ...
Chrome.extension.getBackgroundPage (). dothing ();

Method of calling notifications from an extended page ...
Chrome.extension.getViews ({type: "Notification"}). ForEach (function (Win) {
 win.dootherthing ();
});

4, Omnibox
The Omnibox application interface allows you to register a keyword with the Google Chrome address bar, also known as the Omnibox

The Omnibox key field must be included in the manifest. You need to specify an icon with the pixel as 16x16 so that when the user enters a keyword, it appears in the Address bar.

4.1, Manifest.json in the configuration

{
 "name": "Aaron ' s Omnibox extension",
 "version": "1.0",
 "Omnibox": {"keyword": "Aaron"}, 
 "icons": { c7/> "": "16-full-color.png" 
 }, 
 "Background_page": "Background.html"
}

Chrome automatically creates grayscale-mode 16x16 pixel icons. You should provide a full color version of the icon so that it can be used in other scenarios.

5. Options page
in order for the user to set your extended functionality, you may need to provide an option page. If you provide an option page, a link is provided on the Extended Admin page chrome://extensions. Click on the selection link to open your Options page.

5.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Options_page ":" options.html ",
 ...
}

6. Overwrite specific pages
with alternate pages, you can replace some of the specific pages of chrome by default and use the extensions provided pages instead.

6.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...

 ' Chrome_url_overrides ": {" pagetooverride ":
  " mypage.html "
 },
 ...
}

7, Page Actions
use page actions to place the icon in the Address bar.

To make the extended icon always visible, use the browser action.

The packaged application cannot use page actions.

7.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Page_action ": {" Default_icon ":"
  icons/foo.png ",//optional 
  " Default_title ":" Do Action ",  ///optional ; Shown in tooltip 
  "Default_popup": "popup.html"  //Optional 
 },
 ...
}

7.2, Configuration item description
like browser actions, page actions can have icons, hints, pop-up windows. But no badge.

You can display and hide the page action by using the method Show () and hide (). The page action is hidden by default. When you want to display, you need to specify the label page where the icon is displayed, and the icon will be visible until it closes or starts displaying a different URL (for example, a user clicks on a connection)

7.3, Tips
to use page action only on a few pages;
Do not use it for most pages, if the function requires, use browser actions instead.
Don't always let the icon appear animation, it will make people very annoying.
8. Theme
a theme is a special extension that can be used to change the appearance of an entire browser. Themes and standard extensions are packaged in a similar way, but themes cannot contain JavaScript or HTML code.

8.1, Manifest.json in the configuration

{
 "version": "2.6", "
 name": "Camo Theme",
 "theme": {"
  images": {
   "theme_frame": "Images/theme_ Frame_camo.png ",
   " Theme_frame_overlay ":" Images/theme_frame_stripe.png ",
   " Theme_toolbar ":" Images/theme_ Toolbar_camo.png ",
   " Theme_ntp_background ":" Images/theme_ntp_background_norepeat.png ","
   theme_ntp_ Attribution ":" Images/attribution.png "
  },
  " Colors ": {
   " frame ": [,],
   " toolbar ": [207, 22 1),
   "Ntp_text": [A, 0],
   "Ntp_link": [+, 0],
   "ntp_section": [207, 221, the "),
   " Button_ Background ": [255, 255, 255]
  },
  " tints ": {"
   buttons ": [0.33, 0.5, 0.47]
  },
  " Properties ": {
    "ntp_background_alignment": "Bottom"
  }}}