JavaScript writes chrome extensions to enable interaction with browsers and time notifications _javascript tips

Interacting with the browser
1. Bookmark
Use the Chrome.bookmarks module to create, organize, and manage bookmarks. You can also see Override pages to create a Customizable Bookmark Manager page.

1.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [
  " Bookmarks "
 ],
 ...
}

Objects and properties:
The check is organized according to the tree structure, each node is a bookmark or a group of nodes (each bookmark can contain multiple nodes). Each node corresponds to a Bookmarktreenode object.

You can use the Bookmarktreenode properties by using the Chrome.bookmarks API.

Example:
A bookmark folder titled "Extension Bookmarks" was created.

Chrome.bookmarks.create ({' ParentID ': bookmarkbar.id,
             ' title ': ' Extension bookmarks '},
            function ( NewFolder) {
 console.log ("added folder:" + Newfolder.title);
});

A bookmark was created that points to the extended development document.

Chrome.bookmarks.create ({' ParentID ': Extensionsfolderid,
             ' title ': ' Extensions doc ',
             ' url ': ' http:// Code.google.com/chrome/extensions '});

2. Cookies
2.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [
  " Cookies ",
  " *://*.google.com "
 ],
 ...
}

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

(1) Devtools.inspectedwindow
(2) Devtools.network
(3) Devtools.panels
3.1, Manifest.json in the configuration

{
 "name": ...
 " Version ":" 1.0 ","
 minimum_chrome_version ":" 10.0 ",
 " Devtools_page ":" devtools.html ",
 ...
}

4. Events
an Event is an object that notifies you when something happens that concerns you. Here is an example of using Chrome.tabs.onCreated event, which is notified whenever a new label is created:

Chrome.tabs.onCreated.addListener (function (tab) {
 appendtolog (' tabs.oncreated--'
       + ' window: ' + Tab.windowid
       + ' tab: '  + tab.id
       + ' index: ' + tab.index
       + ' URL: '  + Tab.url ';
};

You can call any of the following methods of an 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 the history of your browser.

5.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [
  " History "
 ],
 ...
}

6, Plug-in Management
The Chrome.management module provides a way to manage extensions or applications that are installed and running. This is especially useful for overwriting extensions of new, built-in tab pages.

To use this API, you must have authorization in the extended manifest file.

6.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [" Management "],
 ...
}

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

7.1, Manifest.json in the configuration

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

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

8.1, Manifest.json in the configuration

{
 ' name ': ' My extension ',
 ...
 ' Permissions ": [" Tabs "],
 ...
}

Implementation of time notification (notifications)
1, create notification two ways:

Note: There is no need to invoke webkitnotifications.checkpermission ().
The Extender that declares the notifications permission always allows the creation of notifications.

//Create a simple text notification:
var notification = webkitnotifications.createnotification (
 ' 48.png ',//icon URL, can be a relative path
 ' Hello! ',//notification title
 ' content (Lorem ipsum ... ) '//Notification body text
);

or create an HTML notification:
var notification = webkitnotifications.createhtmlnotification (
 ' notification.html '//html URL, can be a relative path
);

The notification is then displayed.
notification.show ();

2, notice and other pages of communication mode:

In a notification ...
Chrome.extension.getBackgroundPage (). dothing ();

From the background page
... Chrome.extension.getViews ({type: "Notification"}). ForEach (function (Win) {
 win.dootherthing ();
});

3, the time notice instance
The following creates a time notice, each 10 seconds pop-up time reminder, altogether pops up 10 times.

3.1, Manifest.json

{
 //This field will be used in the installation dialog, extension management interface, and store, pop-up notification title
 "name": "System Notice",
 //Extended version with a number of 4 digits, the middle is separated by dots, must be between 0 to 65535, A non-0 number cannot begin with 0
 "version": "1",
 //Description of a string of extended species (cannot be HTML or other format, not more than 132 characters). This description must be appropriate for both the browser-extended management interface and the Chrome Web store.
 "description": "Shows off desktop notifications, which are \" toast\ "Windows this pop up on the desktop.",
 //one or Many icons to express the extension, app, and skin
 "icons": {""
   : "16.png",//application of the FA Web page icon
   "": "48.png",//Application Management page needs this icon
   "128": " 128.png "//////(Webstore),
 //extension or app will use a set of permissions
 " permissions ": [" Tabs "," Notifications "],
 // Manifest V2 replaces background_page//With background attribute
 This specifies a JavaScript script
 "background": {"Scripts": [" Background.js "]},
 //Manifest version 1 has been deprecated in Chrome18 and should be specified as 2
 " Manifest_version ": 2,

 //Manifest_ In version 2, specifying the resource path within the Extender package that can be used in a Web page (relative to the root of the Extender package) uses this attribute to include resources in the whitelist, and the inserted content script itself does not need to be added to the whitelist
 "Web_accessible_ Resources ": [
  " 48.png "
 ]
}

3.2, Background.js

/** * Displays a time notification/function show () {var times = new Date (). Format (' Yyyy-mm-dd hh:mm:ss '); Create a notification var notification = window.webkitNotifications.createNotification (' 48.png ',//Picture, in Web_accessi
   Ble_resources added ' Now time is: ',//title times//body.
   );
Display notification notification.show (); }//Format time function Date.prototype.format = function (format) {var o = {"m+": This.getmonth () +1,//month "d+": this.getd
  Ate (),//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 (fo
  Rmat)) Format=format.replace (Regexp.$1, (this.getfullyear () + ""). substr (4-regexp.$1.length)); For (var k in O) if (new RegExp ("+ K +")). Test (format) format = Format.replace (regexp.$1, regexp.$1.length==1? o[k)
  : ("+ o[k]"). substr (("" "+ o[k]). length);
return format; }//TestTest whether the browser supports webkitnotifications if (window.webkitnotifications) {//Display notice show ();
  var interval = 0;
  Pop-up 10 times = 10;
    Create timer var timer = setinterval (function () {interval++;
       10 seconds Eject if (<= interval) {show ();
       Interval = 0;
       times--;
    if (Times <-0) clearinterval (timer);
}, 1000);

 }

Source

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