Develop the first chrome Extension

Document directory

• Step 1
• Step 2
• Step 3

How to start Step 1

Select an extended representation based on the purpose and product features:

Interface	Performance	Introduction
Page action	Address bar icon, click to open the new tab page or content Injection	Applicable to features that only make sense to a few pages (such as RSS subscriptions ).
Browser action	Toolbar icon, click to open a popup layer or new tab page	Applicable to meaningful features on most pages (for example, my common code formatting tool jsbeautifier ).
App	Application List, click to open the built-in tab page or a new page with any domain name	For the best experience (such as full screen, Desktop shortcuts, taskbar icons), or compatibility with other browsers (deployed on your own server, such as the 'wordsquared. com' application ).

* The reason for Google's official recommendation to use browser action is that if the extended script is injected into all pages, the performance of the original page will be significantly affected.

** In addition, the main reason is that chrome extensions do not currently provide widgets that are not similar to Firefox and can be suspended on all pages.

* ** Browser action's popup.html limits the display size, which can only be about pixels.

Step 2

Create the folder required for expansion, and place the manifest. JSON file below-declare the expression of the plug-in, dependency files, and so on.

Page action example:

{"Name": "My extension", "version": "0.4.0", "icons": {"16": "icon.png", "48": "icon48.png ", "128": "icon128.png"}, "Description": "My first chrome extension. "," page_action ": {" default_title ":" enable on some pages "," default_icon ":" foo.png "," default_popup ":" html/popup.html "}, "background_page": "html/background.html", "options_page": "options/index.html", "content_scripts": [{"matches": ["http: // */* "," https: // */* "]," run_at ":" document_idle "," CSS ": [" CSS/style.css "], "JS": ["JS/Foo. JS "," JS/bar. JS "]}]," Permissions ": [" tabs "," notifications "," idle "," http: // */"," https: // */"]}

Your directory corresponds to the 'chrome-Extension: // {extensionid}/'root directory in the browser.

Content scripts is the script that Page Actions inject to a specific page. Permissions authorizes it to execute under which conditions.

Options page is an extended setting page.

For expansion, the HTML page defined by the background page must and is the most important. After the browser is enabled, the extension itself runs on this background page.

Backgroun page can use all chrome. * For APIs, Chrome is required for extended pages outside of it. extension. getbackgroundpage () is used to communicate with it. In the browser, the page cannot access it, and only content scripts can communicate with it through chrome. extension. sendrequest () communicates with it.

Figure 1: page action, browser action, and content scripts

* Content scripts is injected into the original page and the Dom is modified.

Figure 2: Dom, original script, and content scripts contact

* The original scripts and content scripts cannot communicate directly in different environments. There may be multiple Content scripts (injected with different extensions), which are isolated from each other; however, Dom is shared, so Dom can share data and Event Notifications.

Step 3

After setting up the extended infrastructure, you can test it in chrome.

Click "options/tools/extensions" in chrome and open "Developer mode" on the new page: "Load the developing extension... click it to select your extension directory to start testing.

Snippets

• How to keep open tabs unique

  VaR option_url = chrome. extension. geturl ('Options/index.html '); chrome. tabs. getallinwindow (null, function (tabs) {var option_tab = tabs. filter (function (t) {return T. URL === option_url}); If (option_tab.length) {// enabled, directly activate chrome. tabs. update (option_tab [0]. ID, {selected: true});} else {chrome. tabs. create ({URL: option_url, selected: true })}});

• Return to the specified tab in the specified window:

  // Todo: Save a tab reference, or just Tabid and javaswidvar tab = Foo; chrome. windows. get (tab. windowid, function (WIN) {chrome. windows. update (win. ID, {focused: true}); chrome. tabs. update (tab. ID, {selected: true });})

Backgroundpage:

var key = 'some_method',parameters = {};chrome.extension.sendRequest({ report : key, parameters : parameters }, callback);

The backgroundpage Notification tab PAGE method, script injection:

// Execute a file chrome.tabs.exe cutescript (Tabid, {file: 'foo. JS '}); // code chrome.tabs.exe cutescript (Tabid, {code: 'alert (1)'}); // Insert the CSS method. The parameter is similar to chrome. tabs. insertcss (Tabid, {file: 'foo.css '});

Extended configuration through localstorage

localStorage['member'] = JSON.stringify({username:'ambar'})

Send a request to the extension in a specific tab:

// The second parameter completely customizes chrome. Tabs. sendrequest (Tab. ID, {FOO: True, any_other_params :''});

There are two formats for desktop notifications: HTML and pure files.

// In the HTML format, you can simply use the query variable to pass the parameter var policy_html = function (icon, title, message) {var encode = encodeuricomponent; var notification = webkitnotifications. createhtmlnotification (chrome. extension. geturl ('html/icationication.html? Message = '+ encode (Message) +' & Title = '+ encode (title) +' & icon = '+ encode (icon); notification. show () ;}; // text format. You can set an icon and title var policy_plain = function (icon, title, message) {var notification = webkitnotifications. createnotification (chrome.extension.geturl('icationication.png '), title, message); notification. show (); // close notification in 5 seconds after display. ondisplay = function (e) {setTimeout (function () {notification. cancel ();}, 5000 );}}