Tutorial on developing Chrome browser extension UI using JavaScript, chromeui

Tutorial on developing Chrome browser extension UI using JavaScript, chromeui

Basic knowledge
1. Plug-in file structure
1.1. manifest. json
Each extended and installable WebApp and skin has a JSON manifest file, which stores important plug-in information.

A basic configuration example:

{"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 pop-up window. default_popup in browser_action in the preceding configuration is the page.

1.3. background page
Most applications contain a background page to perform the main functions of the application.

1.4. Content scripts
Content script allows applications to interact with web pages. content script is a Javascript script that can be run inside a page that has been loaded in a browser. Content script can be viewed as a part of a webpage, rather than a part of its application.

2. Interaction Between Files
You can directly call the function on the background page in the pop-up window.

Content script can read and modify the dom tree of the current web page, but it cannot modify the dom tree of the background page (background) of its application.

Interaction between Content scripts and applications: messages can be sent to each other

3. Inject a JS (Content scripts) file to the web page:
Method 1: Configure in the manifest. json file:

"content_scripts": [  {   "matches": ["http://www.google.com/*"],   "css": ["mystyles.css"],   "js": ["jquery.js", "myscript.js"]  } ],

Method 2: Use executeScript ():

Inject JavaScript scripts into the page for execution.

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 toolbar.

Note: Packaged apps cannot use browser actions

1.1 configuration in manifest. json
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 description of configuration items
(1) default_icon
Icon 19 * 19px

Modify the default_icon field in the manifest of browser_action, or call the setIcon () method.

chrome.browserAction.setIcon(object details)

Set the browser action icon. An icon can be the path of an image or the pixel information extracted from a canvas element .. This attribute must be specified whether it is the icon path or canvas's imageData.

(2) default_title
Modify the default_title field in the manifest of browser_action, or call the setTitle () method. You can specify a localized string for the default_title field. Click Internationalization to view details.

Chrome. browserAction. setTitle (object details)

Set the browser action title, which will be displayed in tooltip.

(3) Badge
Browser actions can selectively display a badge-display some text on the icon. Badges can easily update some small extension status prompts for browser action.

Because badge space is limited, only four or less characters are supported.

Set the badge text and color by using setBadgeText () andsetBadgeBackgroundColor ().

Chrome. browserAction. setBadgeText (object details)

Set the badge text of browser action. badge is displayed on the icon.

setBadgeBackgroundColorchrome.browserAction.setBadgeBackgroundColor(object details)

Set the background color of badge.

(4) default_popup
Popup bubble prompt

Modify the default_popup field in the manifest of browser_action to specify the HTML file, or call the setPopup () method.

chrome.browserAction.setPopup(object details)

Set the HTML displayed in popup when you click browser actions.

1.3. Prompt
To achieve the best display effect, follow the following principles:

Make sure that Browser actions is used only when most websites have functional requirements.
Make sure that Browser actions is not used in scenarios where only a few web pages are available. In this scenario, Use page actions.
Make sure that your Icon size is as full as pixels. The Browser action icon should look heavier than the page action icon.
Do not try to imitate Google Chrome's wrench icons. They may have problems in different themes, and the extensions should be eye-catching.
Try to use the alpha channel and slide your icon edge. Because many users use themes, your icon should be good in various backgrounds.
Don't keep flashing your icon, which is quite annoying.

2. Right-click the menu
You can add right-click menu items for different types of objects (slice, link, and page.

You can add multiple right-click menu items as needed. Multiple shortcut menu items added to an extension are automatically combined by Chrome and placed in the level-2 menu of the corresponding extension name.

The right-click menu can appear in any document (or the framework in the document), or even local files (such as file: // or Chrome. To control the right-click menu display in different documents, you can specify documentUrlPatterns when calling create () and update.

2.1 configuration in manifest. json
Declare the "contentMenus" permission in the list. At the same time, you should specify a 16x16 icon as the icon of the right-click menu. For example:

{    "name": "My extension",    ...    "permissions": [     "contextMenus"    ],    "icons": {     "16": "icon-bitty.png",     "48": "icon-small.png",     "128": "icon-large.png"    },    ...}

3. desktop notification
Notify the user of some important events. Desktop notifications are displayed outside the browser window. The following figure shows the notification display effect. The notification display effect varies slightly on different platforms.

Directly-use a small JavaScript code to create a notification. You can also use a separate HTML page in the extension package.

3.1 configuration in manifest. json

{ "name": "My extension", ... "permissions": [  "notifications" ], ...}

3.2 interaction with extended pages:
Use getBackgroundPage () and getViews () to create interactions on the notification and extension pages.

// Call the extension PAGE method in the notification... chrome. extension. getBackgroundPage (). doThing (); // call the notification method from the extended page... chrome. extension. getViews ({type: "notification "}). forEach (function (win) {win. doOtherThing ();});

4. Omnibox
The omnibox application interface allows you to register a keyword in the address bar of Google Chrome. the address bar is also called omnibox.

The keyword field omnibox must be included in manifest. You must specify a 16x16 pixel icon to display it in the address bar when you enter a keyword.

4.1 configuration in manifest. json

{ "name": "Aaron's omnibox extension", "version": "1.0", "omnibox": { "keyword" : "aaron" },  "icons": {   "16": "16-full-color.png"  },  "background_page": "background.html"}

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

5. Option page
You may need to provide an option page to allow users to set your extended functions. If you provide the option page, a link will be provided on the extended management page chrome: // extensions. Click the option link to open your option page.

5.1 configuration in manifest. json

{ "name": "My extension", ... "options_page": "options.html", ...}

6. overwrite a specific page
With the alternative page, you can replace some of Chrome's default pages with the pages provided by extensions.

6.1 configuration in manifest. json

{ "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 extension icon always visible, use browser action.

Page actions cannot be used for packaged applications.

7.1 configuration in manifest. json

{ "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 description of configuration items
Like browser actions, page actions can have icons, prompts, and pop-up windows. But no badge

Use show () and hide () to show and hide page Actions. By default, page action is hidden. When you want to display an icon, You need to specify the tab where the icon is located. After the icon is displayed, it will be visible until the tab is closed or different URLs are displayed (for example, a user clicks a connection)

7.3. Prompt
Use page action only for a few pages;
Do not use it for most pages. If the function is required, use browser actions instead.
It's okay. Don't always make the icons animated, which can be annoying.
8. Subject
Theme is a special extension that can be used to change the appearance of the entire browser. The packaging method of a topic is similar to that of a standard extension, but the topic cannot contain JavaScript or HTML code.

8.1 configuration in manifest. json

{ "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" : [71, 105, 91],   "toolbar" : [207, 221, 192],   "ntp_text" : [20, 40, 0],   "ntp_link" : [36, 70, 0],   "ntp_section" : [207, 221, 192],   "button_background" : [255, 255, 255]  },  "tints" : {   "buttons" : [0.33, 0.5, 0.47]  },  "properties" : {   "ntp_background_alignment" : "bottom"  } }}