Interaction with the browser
1. Bookmark
Use the chrome.bookmarks module to create, organize, and manage bookmarks. See Override Pages to create a customizable bookmark manager page.
1.1. Configuration in manifest.json
{ "name": "My extension", ... "permissions": [ "bookmarks" ], ...}Objects and properties:
Signs are organized in a tree structure, and each node is a bookmark or a group of nodes (each bookmark folder can contain multiple nodes). Each node corresponds to a BookmarkTreeNode object.
The properties of BookmarkTreeNode can be used through the chrome.bookmarks API.
example:
Created a bookmark folder titled "Extension bookmarks".
chrome.bookmarks.create({'parentId': bookmarkBar.id, 'title': 'Extension bookmarks'}, function(newFolder) { console.log("added folder: " + newFolder.title);});Created a bookmark 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 to developer tools to enable you to extend developer tools.
(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 happens. Here is an example of using chrome.tabs.onCreated event, and the event object is notified whenever a new tag 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 the following methods of 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 page records accessed by the browser. You can add, delete, and query browser history.
5.1. Configuration in manifest.json
{ "name": "My extension", ... "permissions": [ "history" ], ...}6. Plug-in management
The chrome.management module provides a way to manage installed and running extensions or applications. Especially useful for rewriting extensions that are built-in new tabs.
To use this API, you must authorize it in the extension manifest file.
6.1. Configuration in manifest.json
{ "name": "My extension", ... "permissions": [ "management" ], ...}7. Tags
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. Window
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. Configuration in manifest.json
{ "name": "My extension", ... "permissions": ["tabs"], ...}Implementation of notifications
1. Two ways to create notification:
// Note: There is no need to call webkitNotifications.checkPermission(). // Extensions that declare notifications permissions always allow notification creation. // Create a simple text notification: var notification = webkitNotifications.createNotification( '48.png', // The icon URL can be a relative path 'Hello!', // Notification title 'Content (Lorem ipsum...)' // Notification body text);// Or create HTML notification: var notification = webkitNotifications.createHTMLNotification( 'notification.html' // The URL of HTML can be a relative path);// Then display the notification. notification.show();
2. How to communicate with other pages:
// In a notification...chrome.extension.getBackgroundPage().doThing();// From the background web page...chrome.extension.getViews({type:"notification"}).forEach(function(win) { win.doOtherThing();});3. Example of time notification
Let’s create a time notification, which pops up time reminders every 10 seconds, and a total of 10 times pops up.
3.1. manifest.json
{ // This field will be used in the installation dialog box, the extension management interface, and the store. The title of the pop-up notification is "name": "System Notification", // The extended version is represented by one to 4 numbers, separated by dots, and must be between 0 and 65535. Non-zero numbers cannot start with "version": "1", // A string that describes the extended type (can't be html or other format, and cannot exceed 132 characters). This description must be appropriate for both the browser extension's management interface and the Chrome Web Store. "description": "Shows off desktop notifications, 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 application's fa web icon "48": "48.png", // The application management page requires this icon "128": "128.png" // Use when installing the webstore}, // A set of permissions that the extension or app will use "permissions": ["tabs", "notifications"], // Manifest V2 replaces background_page with the background attribute // Here is a Javascript script "background": { "scripts": ["background.js"] }, // Manifest version 1 has been deprecated in Chrome 18, and it should be specified as 2 "manifest_version": 2, // manifest_version 2. Specify the resource path that can be used in the web page in the extension package (relative to the root directory of the extension package) that needs to be used to whitelist the resources. The inserted content script itself does not need to be whitelisted "web_accessible_resources": [ "48.png" ]}3.2. background.js
/** * Show 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', // Picture, add 'the current time in web_accessible_resources: ', // title time // body. ); // Show notification notification.show();}// Format the time function Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "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)) format = 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) { // Show notifications show(); var interval = 0; // pop-up 10 times var times = 10; // Create timer var timer = setInterval(function() { interval++; // pop-up once in 10 seconds if (10 <= interval) { show(); interval = 0; times--; if(times <- 0) clearInterval(timer); } }, 1000);}source code
https://github.com/artinking/google-plugins/tree/master/example/notifications