Basic knowledge
1. Plug-in file structure
1.1. manifest.json
Each extension, installable WebApp, and skin has a JSON format manifest file that stores important plug-in-related 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
The pop-up window of the plug-in, the default_popup in browser_action in the above configuration is this page.
1.3. Background page
Most applications include a background page to perform the main functions of the application.
1.4. Content scripts
Content script can enable the interaction between the application and the web page, which refers to Javascript scripts that can run inside the pages that have been loaded by the browser. You can think of content script as part of a web page, not part of the application it is in.
2. Interaction between files
The function in the background page can be called directly in the popup 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 the application it is located.
Interaction between Content script and application: You can send messages to each other
3. Inject JS (Content scripts) file into 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, via executeScript():
Inject JavaScript scripts into the page to execute.
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 address bar of the main 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. Configuration item description
(1) default_icon
Icon 19 * 19px
Modify the default_icon field in browser_action's manifest, or call the setIcon() method.
chrome.browserAction.setIcon(object details)
Set browser action icon. The icon can be a path to a picture or pixel information extracted from a canvas element. Whether it is the icon path or the imageData of canvas, this property must be specified.
(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; click Internationalization to view details.
chrome.browserAction.setTitle(object details)
Set the title of browser action, this will be displayed in tooltip.
(3) Badge
Browser actions can optionally display a badge - display some text on the icon. Badges can simply update some small extension status prompt information for browser action.
Because badge space is limited, it only supports less than 4 characters.
To set badge text and color, you can use setBadgeText() and setBadgeBackgroundColor() respectively.
chrome.browserAction.setBadgeText(object details)
Set the badge text of browser action, and badge is displayed on the icon.
setBadgeBackgroundColorchrome.browserAction.setBadgeBackgroundColor(object details)
Set the background color of badge.
(4) default_popup
Popup Bubble Tips
Modify the default_popup field in browser_action's manifest to specify the HTML file, or call the setPopup() method.
chrome.browserAction.setPopup(object details)
Sets an HTML displayed in popup when clicking browser actions.
1.3. Tips
For best display, follow the following principles:
Confirm that Browser actions are only used in scenarios where most websites have functional requirements.
Confirm that Browser actions are not used in a few web pages that have functions. Please use page actions for this scenario.
Make sure your icon size should occupy as much as 19x19 pixel space. The icon of the Browser action should look bigger and heavier than the icon of the page action.
Don't try to imitate Google Chrome's wrench icons, their performance may be problematic under different themes, and the extension should be more eye-catching.
Try to use the alpha channel and smooth the edges of your icons, because many users use themes, your icons should perform well in various backgrounds.
Don't keep flashing your icon, it's very offensive.
2. Right-click menu
You can choose to add a right-click menu item for different types of objects (such as pictures, links, pages).
You can add multiple right-click menu items as needed. Multiple right-click menu items added in an extension will be automatically combined by Chrome and placed in the secondary menu of the corresponding extension name.
The right-click menu can appear in any document (or frames in the document) or even in a local file (such as file:// or Chrome://). If you want to control the display of the right-click menu in different documents, you can specify documentUrlPatterns when calling create() and update().
2.1. Configuration in manifest.json
Declare the "contentMenus" permission in the manifest. At the same time, you should specify a 16x16 icon to use as the right-click menu logo. For example:
{ "name": "My extension", ... "permissions": [ "contextMenus" ], "icons": { "16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png" }, ...}3. Desktop Notifications
Notify the user that something important has happened. Desktop notifications will be displayed outside the browser window. The picture below shows the effect of notifications. On different platforms, the display effect of notifications will be slightly different.
Directly use a small piece of JavaScript code to create notifications, and of course, it can also be done through a separate HTML page in the extension package.
3.1. Configuration in manifest.json
{ "name": "My extension", ... "permissions": [ "notifications" ], ...}3.2. Interact with the extended page:
Use getBackgroundPage() and getViews() to create interactions in notifications and extension pages
// Call the extended page method in the notification...chrome.extension.getBackgroundPage().doThing();// Call the notification method from the extension 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 address bar of Google Chrome, which is also called omnibox.
The omnibox keyword field must be included in the manifest. An icon with pixels of 16x16 is required to be specified so that it will be displayed in the address bar when the user enters 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 icons with 16x16 pixels in grayscale mode. 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 users to set up your extensions, you may need to provide an option page. If you provide an option page, a link will be provided on the extension management page chrome://extensions. Click the Options link to open your options page.
5.1. Configuration in manifest.json
{ "name": "My extension", ... "options_page": "options.html", ...}6. Overwrite specific pages
Using alternative pages, you can replace some specific pages in Chrome by default and use pages provided by the extension instead.
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.
If you want the extension icon to be always visible, use browser action.
Packaged applications cannot use page actions.
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. Configuration item description
Like browser actions, page actions can have icons, prompt messages, and pop-ups. But there is no badge
Use the methods show() and hide() to show and hide page actions. By default, page action is hidden. When you want to display, you need to specify the tab page where the icon is located. The icon will remain visible until the tab page closes or starts to display a different URL (such as: the user clicks on a connection)
7.3. Tips
Use page action only for a few pages;
Don't use it for most pages, use browser actions instead if the functionality requires it.
Don't always let the icons appear in animations when it's okay, it will be very annoying.
8. Topic
Theme is a special extension that can be used to change the appearance of the entire browser. The theme is similar to the standard extension, but the theme 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" } }}