Compile Chrome extension in JavaScript to implement interaction with the browser and time notification. javascriptchrome

Compile Chrome extension in JavaScript to implement interaction with the browser and time notification. javascriptchrome

Interaction with browsers
1. bookmarks
Use the chrome. bookmarks module to create, organize, and manage bookmarks. You can also refer to Override Pages to create a customizable bookmarks Manager page.

1.1 configuration in manifest. json

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

Objects and attributes:
Labels are organized in a tree structure. Each node is a bookmarks or a group of nodes (each book folder can contain multiple nodes ). Each node corresponds to a BookmarkTreeNode object.

You can use the chrome. bookmarks API to use the attributes of BookmarkTreeNode.

Example:
Creates a book folder named "Extension bookmarks.

chrome.bookmarks.create({'parentId': bookmarkBar.id,             'title': 'Extension bookmarks'},            function(newFolder) { console.log("added folder: " + newFolder.title);});

Creates a bookmark pointing to the extended development document.

chrome.bookmarks.create({'parentId': extensionsFolderId,             'title': 'Extensions doc',             'url': 'http://code.google.com/chrome/extensions'});

2. Cookies
2.1 configuration in manifest. json

{ "name": "My extension", ... "permissions": [  "cookies",  "*://*.google.com" ], ...}

3. Developer Tools
The following API modules provide some interfaces of the developer tool to support your expansion of the developer tool.

(1) devtools. inspectedWindow
(2) devtools. network
(3) devtools. panels
3.1 configuration in manifest. json

{ "name": ... "version": "1.0", "minimum_chrome_version": "10.0", "devtools_page": "devtools.html", ...}

4. Events
Event is an object that notifies you when something you are concerned about occurs. The following is an example of using chrome. tabs. onCreated event. Every time a new tag is created, the event object will be notified:

chrome.tabs.onCreated.addListener(function(tab) { appendToLog('tabs.onCreated --'       + ' window: ' + tab.windowId       + ' tab: '  + tab.id       + ' index: ' + tab.index       + ' url: '  + tab.url);});

You can call the following methods for any Event object:

void addListener(function callback(...))void removeListener(function callback(...))bool hasListener(function callback(...))

5. Browsing History
The chorme. history module is used to interact with the page records accessed by the browser. You can add, delete, and query browser history records.

5.1 configuration in manifest. json

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

6. Plug-in management
The chrome. management module provides methods to manage extensions or applications installed and running. It is particularly useful for rewriting extensions of built-in new tabs.

To use this API, you must authorize it in the extended list file.

6.1 configuration in manifest. json

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

7. Labels
The chrome tag module is used to interact with the browser's tag system. This module is used to create, modify, and rearrange tags in the browser.

7.1 configuration in manifest. json

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

8. Windows
Use chrome. windows to interact with browser windows. You can use this module to create, modify, and rearrange windows in the browser.

8.1 configuration in manifest. json

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

Implementation of time notifications
1. Create notification in two ways:

// Note: There is no need to call webkitconfigurations. checkPermission (). // The Extended Program that declares the notifications permission always allows the creation of notifications. // Create a simple text notification: var notification = webkitNotifications. createNotification ('48.png ', // The icon URL, which can be a relative path 'Hello! ', // Notification title' content (Lorem ipsum ...) '// notification body text); // or create an HTML notification: var notification = webkitNotifications. createHTMLNotification ('icationication.html '// URL of HTML, which can be a relative path); // then display the notification. Notification. show ();

2. Communication between notifications and other pages:

// In a notification... chrome. extension. getBackgroundPage (). doThing (); // from the background webpage... chrome. extension. getViews ({type: "notification "}). forEach (function (win) {win. doOtherThing ();});

3. Time notification instance
Next, create a time notification. A time reminder is displayed every 10 seconds. A total of 10 times are displayed.

3.1. manifest. json

{// This field will be used in the installation dialog box, extended management interface, and store. The notification title "name": "system notification" is displayed ", // The extended version is represented by one to four numbers separated by vertices. It must be between 0 and 65535. A non-zero number cannot start with "version": "1 ", // a string with an extended description (it cannot be in html or other formats and cannot exceed 132 characters ). This description must be applicable to the browser's extended management interface and Chrome Web Store. "Description": "Shows off desktop specifications, which are \" toast \ "windows that pop up on the desktop. ", // one or more icons to represent extensions, apps, and skins" icons ": {" 16 ":" 16.png", // The fa webpage icon of the application "48 ": "48.png", // This icon is required on the Application Management page" 128 ":" 128.png" // used when installing webstore }, // The extended or app will use a set of permissions "permissions": ["tabs", "notifications"], // Manifest V2 replaces background_page with the background attribute. // a Javascript script "background": {"scripts": ["background. js "]}, // Manifest version 1 has been discarded in Chrome18. It should be specified as 2" manifest_version ": 2, // manifest_version 2, this attribute is used to specify the resource path (relative to the root directory of the extension package) that can be used on the webpage in the extension package to whitelist the resources, the inserted content script itself does not need to be added to the White List "web_accessible_resources": ["48.png"]}

3.2. background. js

/*** Display a time notification */function show () {var time = new Date (). format ('yyyy-MM-dd hh: mm: ss'); // create a notification var notification = window. webkitNotifications. createNotification ('48.png ', // image, added 'current time:', // title time // body. 'In web_accessible_resources .); // display notification. show ();} // format the time function Date. prototype. format = function (format) {var o = {"M +": this. getMonth () + 1, // mon Th "d +": this. getDate (), // day "h +": this. getHours (), // hour "m +": this. getMinutes (), // minute "s +": this. getSeconds (), // second "q +": Math. floor (this. getMonth () + 3)/3), // quarter "S": this. getMilliseconds () // millisecond} if (/(y + )/. test (format) format = format. replace (RegExp. $1, (this. getFullYear () + ""). substr (4-RegExp. $1. length); for (var k in o) if (new RegExp ("(" + k + ")"). test (format) fo Rmat = format. replace (RegExp. $1, RegExp. $1. length = 1? O [k]: ("00" + o [k]). substr ("" + o [k]). length); return format;} // test whether the browser supports webkitNotificationsif (window. webkitNotifications) {// display the notification show (); var interval = 0; // pop up 10 times var times = 10; // create the timer var timer = setInterval (function () {interval ++; // if (10 <= interval) {show (); interval = 0; times --; if (times <-0) clearInterval (timer); }}, 1000 );}

Source code

Https://github.com/arthinking/google-plugins/tree/master/example/notifications