Google Chrome Extensions Architecture

1) background pages that are not visible

Google Chrome extensions tend to include an invisible background page, Google Chrome The main business logic for the extension is here. There are two types of background pages, one is persistent background pagesand the other is the event pages. Persistent background pages runs continuously and is readily accessible. the events pages are event-driven and can only be accessed when an event occurs.

Persistent background pages is loaded into memory by default and continues to run in the background. Register persistent Background page in the Manifest.json article as follows:

{

"Background": {

"Scripts": [Mybackgroundpage.js],

"Persistent": true

]

}

The event pages are not loaded by default and are loaded and run only when events occur. The scenario that triggers the loading of the event pages is as follows:

· Google Chrome extensions are installed or upgraded to a new version for the first time

· Event Pages Listening events occurred

· Content script or other Google Chrome extensions sent a message

· Other pages in the Google Chrome extension call the Chrome.runtime.getBackgroundPage () method

The Google Chrome extension requires listening for oninstalled events through Chrome.runtime.onInstalled.addListener (OnInit), which keeps track of all events that are currently occurring. Once the monitored event occurs, the Chrome browser loads the events pages.

If the Google Chrome extension cancels a listener for an event via RemoveListener, the Chrome browser will not load event pages when this event occurs.

When the event is no longer referenced by the listener, unload to free memory and emit the Chrome.runtime.onSuspend event.

Register the event page in the Manifest.json article as follows:

{

"Background": {

"Scripts": [Myeventpage.js],

"Persistent": false

]

}

2) visual page

Google Chrome extensions can be run completely in the background or provide a visual interface to the user. The most common visual interface for Google Chrome extensions is the following two forms (mutually exclusive):

· Browser actions, such a Google Chrome extension can work on any page. Icons are often located on the right outside the browser's address bar. Click on the icon to pop up the window.

· Page actions, such a Google Chrome extension can only be used on a page, and when the page opens, the Google Chrome extension is triggered, and the Google Chrome extension disappears when the page is closed. Icons are often located in the right end of the browser's address bar.

In addition, Google Chrome extensions supports other visual interfaces:

· Context menu, right-click

· Options page, Google Chrome extensions can have an Options page that allows users to customize the operating parameters of the Chrome extension.

· Override page, the override page in Google Chrome extensions can replace the default page opened in the browser, such as the Tag Manager page Chrome://bookmarks, the Browsing history page chrome:// Bookmarks or New tab page Chrome://bookmarks. However, a Google Chrome extension can only replace one default page.

· Pages opened with chrome.tabs.create () or window.open ()

3) Google Chrome extension and Web page/ server Interaction

· With content scripts, you can achieve the interaction between Google Chrome extensions and user-opened web pages.

· With cross-domain XMLHttpRequest, you can achieve the interaction between Google Chrome extensions and other servers.

Content scripts is a set of JavaScript files that run in the context of the page currently open by the browser and can read and modify the currently open page DOM structure. In fact, content scripts can be seen as part of the currently open page.

4) using the chrome.* API

Google Chrome extensions can also use Chrome's proprietary API, known as the chrome.* API, in addition to the common standard API for JavaScript.

However, most chrome.* APIs are asynchronous calls that return immediately after the call without waiting for the result to be called, so calls to the chrome.* API often require a callback function as a parameter to handle the invocation result.

Of course, there are also a few chrome.* APIs that are synchronous calls. Such chrome.* APIs often have a return type and do not require a callback function as a parameter.

5) data communication between pages in Google Chrome Extensions

The different pages in the Google Chrome extension often have to communicate to call each other's methods to share data. Because all pages in a Google Chrome extension run on the same thread in the same process, each page can be called directly by a certain method.

If you get an array of window objects for all visible pages through Chrome.extension.getViews (), Chrome.extension.getBackgroundPage () Gets the window object of the background page that is not visible. The Window object of the page allows you to do anything with the DOM of the page.

Google Chrome Extensions Architecture