chrome extension overview

目录

什么是扩展......................................................................................................................................................................................... 2

extension & plugins................................................................................................................................................................. 3

区别.................................................................................................................................................................................................... 3

扩展的构成......................................................................................................................................................................................... 3

调试......................................................................................................................................................................................................... 3

扩展的架构......................................................................................................................................................................................... 4

开始你的扩展---Manifest......................................................................................................................................................... 5

Background Popup Content.................................................................................................................................................... 6

Background pages.................................................................................................................................................................... 6

Event Pages................................................................................................................................................................................... 7

content Script.............................................................................................................................................................................. 7

PopupJS(也就是弹出的插件页面的JS)...................................................................................................................... 8

一个完整的manifest文件.................................................................................................................................................. 8

如何在background的环境中更新popup页面？................................................................................................... 9

getViews 详解......................................................................................................................................................................... 10

消息传递........................................................................................................................................................................................... 10

一次连接...................................................................................................................................................................................... 11

向background发送消息(popupàbg  content àbg )........................................................................... 11

向content script发送消息........................................................................................................................................ 11

接受消息................................................................................................................................................................................ 12

向popup发送消息？.......................................................................................................................................................... 12

长时间连接................................................................................................................................................................................ 13

扩展之间发消息..................................................................................................................................................................... 15

content script向其他扩展发送消息........................................................................................................................ 16

右键菜单Context Menus........................................................................................................................................................ 16

chrome.tabs.................................................................................................................................................................................... 18

获取Tab....................................................................................................................................................................................... 18

创建Tab....................................................................................................................................................................................... 19

使某个指定Tab为选中状态.......................................................................................................................................... 20

注入JS和CSS............................................................................................................................................................................ 20

chrome.bookmarks................................................................................................................................................................... 21

书签节点数据结构................................................................................................................................................................ 21

get获取指定的书签节点.................................................................................................................................................. 22

getTree按照层次结构获取所有书签....................................................................................................................... 23

create move remove update........................................................................................................................................... 24

create........................................................................................................................................................................................ 24

move移动指定的书签节点到指定的位置。................................................................................................ 25

update&remove................................................................................................................................................................ 25

Events............................................................................................................................................................................................ 25

onCreated.............................................................................................................................................................................. 25

Chrome插件开发笔记

360翻译的Chrome插件开发的文档

看这里http://open.chrome.360.cn/extension_dev/overview.html

不过有些过时…理论研究的话看看还可以

Google官方文档https://developer.chrome.com/extensions/overview

什么是扩展

首先需要知道的是扩展使用到的技术和我们每天常见的网页用到的是一样的。

一个扩展其实是一组文件，包括HTML，CSS，Javascript脚本，图片文件等其它任何需要的文件。 如果你知道如何建立一个站点，那么上手扩展会非常容易。

应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API。

extension & plugins

扩展（Extension），指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。

插件（Plug-in），指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，工作在内核层面，理论上可以用任何一种生成本地二进制程序的语言开发，比如 C/C++、Delphi 等。比如Flash player 插件，就属于这种类型。一般在网页中用 <object> 或者 <embed> 标签声明的部分，就要靠插件来渲染。

区别

和建立站点不同的是，扩展的JS执行环境和访问方式和平时建立站点是不同。最重要的是，会有一大堆新的API来让你和浏览器交流。如果你是一个Web开发者，刚刚接触Extension可能觉得有些陌生，不过不管怎么说，你写的还是那些code。

扩展的构成

一个manifest文件

一个或多个html文件（除非这个应用是一个皮肤）

可选的一个或多个javascript文件

可选的任何需要的其他文件，例如图片

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息 。

调试

调试backgroundJS

调试popup

如果popup失焦的话，popup界面就会关闭，当然也包括popup页面的Inspector

所以呢想要background Inspector和popup Inspector一起显示的话

先打开background Inspector再开popup Inspector。

扩展的架构

绝大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。应用也可以包含很多其他页面(比如显示扩展的界面)

例如一个browser action可以包含一个弹窗(popup)

如果一个应用（扩展）需要与web页面交互，那么就需要使用一个content script。

开始你的扩展---Manifest

要写一个扩展首先从manifest 文件开始。它是一个JSON文件，告知了Chrome这个插件都有些什么。它包含了扩展的名字和版本，文件，图标，background Page等。

接下来的一步就是要确定你希望写哪一种扩展。扩展分为

Page action和Browser action两种。

当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。

PS 事实上Page action和Browser action的几乎是相同的

Page action也有popup

Page action的图标是否显示是通过backgroundJS中的code来控制的 默认是都不显示的

如何配置？

"page_action": {

"default_title": "Extension Name",

"default_icon": "path/to/logo.jpg",

"default_popup": "path/to/popup.html"

}

"browser_action": {

"default_title": "test event page",

"default_icon": "clock.png",

"default_popup":"popup.html"

},

Background Popup Content

Background pages

background.html是一个始终运行于浏览器后台的页面，在扩展的各个生命周期中它都一直存在，并且只有一个实例(如果使用incognito隐身模式 那么会有第二个实例)。

每当View需要更新，它都需要向background发出请求(发送消息)

如果background页面检测到了一个更新，background页面告知view去更新。

在manifest中注册background page 。一般来说background page可以不用任何HTML标记 比如下面这种

"background": {

"scripts": ["background.js"]

},

系统会自动生成一个background HTML，其中包括所有的js

或者这样

"background": {

"page": "background.html"

},

再或者这样

"background_page": "bg.html",

后面的方式就是写一个background.html 然后在其script中引用需要的脚本

(一定要引用js文件 不可以写在html中  这是Chrome插件的策略决定的)

PS你可以直接调用插件不同页面中js的函数 就像frame中的通信一样，

通过extension.getViews() 和 getBackgroundPage()

Event Pages

Event Pages和background page非常相似(Chrome22+)。他们的区别是EventPages只有在有需要的时候才会被加载。当Event Page什么事情都木有做的时候会被unload并释放资源。这对于一些性能不是那么好的机器来说很合适

事实上Google官方文档的Background Page中已经写道

Caution: Consider using event pages instead. Learn more.

如何写event pages？

"background": {

"scripts": ["eventPage.js"],

"persistent": false

},

生命周期

在被需要时加载，当页面闲置时unload。

何时会被加载(运行)？

扩展首次被安装、当Event Page中有个监听并且接收到消息时、Popup中调用getBackgroundPage()时

PS 当popup的窗体木有关闭，eventPage中的port木有关闭前 event Page 会一直运行

PS 打开一个popup并不一定使event page运行 它只是阻止EventPage停止

content Script

如果一个应用（扩展）需要与web页面交互，那么就需要使用一个content script。Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本。可以将content script看作是网页的一部分，而不是它所在的应用（扩展）的一部分。它和backgroundJS 是运行在不同的环境中  他们之间的通信需要通过message来完成

"content_scripts": [

{

"matches": ["http://*/*"],

"js": ["page.js"]

}

],

一些限制

不能使用除了chrome.extension之外的chrome.* 的接口(比如 chrome.tabs  chrome.bookmarks) 且只能访问chrome.extension的部分接口

不能访问它所在extension中定义的函数和变量  也就是说得不到background

不能访问所在web页面或其它content script中定义的函数和变量

不能做 cross-site XMLHttpRequests

PopupJS(也就是弹出的插件页面的JS)

这是另一个环境中运行的JS  其运行环境是点击插件弹出的页面

PS 这个页面不是必需的 有些应用就是点击一下图标就开始起作用。

PS 指定了弹出框的话 chrome.browserAction.onClicked 事件会失效

(有弹出框 点击插件图标就只是显示弹出框而已)

如何指定哪些页面是popup页呢？

"browser_action":{

"default_title":"test1",

"default_icon": "images/normal.png",

"default_popup":"popup.html"

},

一个完整的manifest文件

参考https://developer.chrome.com/extensions/manifest

{

// Required

"manifest_version": 2,    //1 was deprecated in chrome18

"name": "My Extension",

"version": "versionString",

// Recommended

"default_locale": "en",

"description": "A plain text description",

"icons": {...},

// Pick one (or none)

"browser_action": {...},

"page_action": {...},

// Optional

"author": ...,

"automation": ...,

"background": {

// Recommended

"persistent": false

},

"content_scripts": [{...}],

,  "permissions": [...],

}

"icons": {"16": "icon16.png", ----工具栏中显示

"48":"icon48.png",  ---chrome://extensions中需要

"128": "icon128.png" }, ----安装和Store中需要

每个扩展 App 主题都需要不止一个icon。

Icon最好都是png格式，这种格式对透明支持最好

如何在background的环境中更新popup页面？

可以使用chrome.extension中的方法来获取应用（扩展）中的页面，例如getViews()和getBackgroundPage()。一旦一个页面得到了对应用（扩展）中其它页面的引用，它就可以调用被引用页面中的函数，并操作被引用页面的DOM树。

如果你想要在插件页面中调用background page中得函数 chrome.extension.getBackgroundPage()

如果想在background页面调用popup page中得函数

chrome.extension.getViews()

以数组的形式返回当前扩展运行的所有页面的JavaScript “window”对象。

PS  content script是不能使用上述函数的

Content script中chrome.extension只能调用

connect: function () { [native code] }

getURL: function () { [native code] }

onConnect: Event

onMessage: Event

onRequest: Event

sendMessage: function () { [native code] }

sendRequest: function () { [native code] }

参考

http://open.chrome.360.cn/extension_dev/extension.html#method-getViews

https://developer.chrome.com/extensions/extension#method-getViews

http://stackoverflow.com/questions/18286684/how-do-i-use-chrome-extension-getviews-to-send-activate-a-function-on-the-fron

getViews 详解

views=chrome.extension.getViews({type: 'popup'});

PS要想得到popup的views 首先要保证插件的popup处于显示状态

假如插件页面js有个函数是xxx  则调用方法为views[0].xxx()

一个Demo

views=chrome.extension.getViews({type: 'popup'});

console.log(views);

views[0].changeTextById('resultsRequest',new Date().toLocaleString());

这段代码是在background中的  作用就是获取到一个popup的window

并调用popup的函数

另一种解决方案

参考

http://stackoverflow.com/questions/20570319/passing-variable-from-background-to-popup-on-chrome-extension

把popupJS的函数用一个对象都封装好 然后在popupJS中得到backgroundJS的window 将这个popupJS的对象保存在backgroundJS的某个变量中  然后通过该变量.xxx()这样的方式来调用popupJS中的函数

消息传递

由于content script内容运行在网页环境而不是在扩展中，我们经常需要一些方法使得页面和扩展进行通信。

通过使用消息传递机制可以在扩展和content scripts之间通信，任何一方可以监听另一方传递来的消息，并且在相同的通道上答复。这个消息可以可以是任何一个有效的JSON对象(null, boolean, number, string, array, or object)。

对于一次通信有个简单的API ，对于长时间的的连接有个复杂的API来交换多个信息。甚至可以和其它扩展之间通信(如果你知道另一个扩展的ID的话)

参考

https://developer.chrome.com/extensions/messaging

https://developer.chrome.com/extensions/tabs#method-sendRequest

源码

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/messaging/timer/

一次连接

如果你仅仅需要给你自己的扩展的另外一部分发送一个次消息（可选的是否得到答复），你可以使用chrome.runtime.sendMessage Or chrome.tabs.sendMessage

向background发送消息(popupàbg  content àbg )

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {

...

});

向content script发送消息

(也就是向一个tab页 发送消息 popupàcontent  bgàcontent)

一个demo(向当前window的tab页发送消息)

chrome.tabs.query({

active: true,

currentWindow: true

}, function(tabs) {

var tab = tabs[0];

chrome.tabs.sendMessage(tab.id, ‘something I want to say’, function handler(response) {

document.querySelector('#resultsRequest').innerHTML += response.counter;

});

});

PS 官方文档中提到sendRequest已不建议使用  用sendMessage代替

PS 官方文档中getSelected也不建议使用 用tabs.query {active: true}代替

接受消息

接受消息的一方，需要启动一个chrome.runtime.onRequest事件监听器用来处理消息。这个方法在content script和扩展中(background popup)都是一样的。这个请求将会保留直到你做出了回应。下面的这个例子是一个很好的做法调用一个空对象请求然后得到答复的例子。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {});

一个demo

chrome.runtime.onMessage.addListener(

function(request, sender, sendResponse) {

console.log(sender.tab ?

"from a content script:" + sender.tab.url :

"from the extension");

if (request.greeting == "hello")

sendResponse({farewell: "goodbye"});

});

sender是发送消息者的信息  (用于判断是不是tab发出的消息)

request是消息对象本身  它可是很多形式 数字 字符 或是JSON格式的对象

sendResponse是做响应的函数名

关于sender

由popup和bg发送消息时 Sender

Object {id: "jakklaaifkgohekmdejmehikkbakelgd"}

由Tab发送时

Object {id: "jakklaaifkgohekmdejmehikkbakelgd", url: "http://weibo.com/u/2371564754/home?wvr=5", tab: Object}

很明显Tab发送时的Sender对象和其他不一样  可以用sender.tab判断

向popup发送消息？

http://stackoverflow.com/questions/20019958/chrome-extension-how-to-send-data-from-content-script-to-popup-html

比如，是否可以向 popup发送消息？应该是不行的

逻辑上讲从background到popup  首先要明白 popup页面不止一个  我需要发送信息到指定的页面的运行环境

方案1

popup发送消息到bg Or content 然后popup在回调函数中得到消息

方法2

要在bg中更新popup的数据 需要getView获取到popup页面的window环境

长时间连接

参考https://developer.chrome.com/extensions/messaging

http://open.chrome.360.cn/extension_dev/messaging.html

有时候持续长时间的保持会话会比一次简单的请求有用。你可以建立一个长时间存在的从content script到扩展的连接，两端都有一个Port 对象通过这个连接发送和接收消息。

可以分别使用runtime.connect or tabs.connect，通道可以指定一个名字，用于和其他连接区分。当建立连接后，两端都有一个Port 对象通过这个连接发送和接收消息。

对话发起的一方

var port = chrome.runtime.connect({

name: "knockknock"

});

port.postMessage({

joke: "Knock knock"

});

port.onMessage.addListener(function(msg) {

if (msg.question == "Who's there?")

port.postMessage({

answer: "Madame"

});

else if (msg.question == "Madame who?")

port.postMessage({

answer: "Madame... Bovary"

});

});

接收

chrome.runtime.onConnect.addListener(function(port) {

console.assert(port.name == "knockknock");

port.onMessage.addListener(function(msg) {

console.log(msg);

if (msg.joke == "Knock knock")

port.postMessage({question: "Who's there?"});

else if (msg.answer == "Madame")

port.postMessage({question: "Madame who?"});

else if (msg.answer == "Madame... Bovary")

port.postMessage({question: "I don't get it."});

});

});

由此可见 和SendMessage不同的是长连接可以进行多次消息传递

PS 向content script中发送消息非常的类似，需要指定tab的id，并换成tabs.connnect

对话发起方

chrome.tabs.query({

active: true,

currentWindow: true

}, function(tabs) {

var tab = tabs[0];

console.log(tab);

var port = chrome.tabs.connect(tab.id,{

name: "knockknock"

});

port.postMessage({

joke: "Knock knock"

});

port.onMessage.addListener(function(msg) {

....

});

content接收消息

chrome.runtime.onConnect.addListener(function(port) {

port.onMessage.addListener(function(msg) {

port.postMessage('long port');

});

});

扩展之间发消息

扩展之间传送消息和扩展内传递消息非常相似，需要指定接收消息扩展的id

发送

// The ID of the extension we want to talk to.

var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:

chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},

function(response) {

if (targetInRange(response.targetData))

chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});

});

// Start a long-running conversation:

var port = chrome.runtime.connect(laserExtensionId);

port.postMessage(...);

接收

// For simple requests:

chrome.runtime.onMessageExternal.addListener(

function(request, sender, sendResponse) {

if (sender.id == blacklistedExtension)

return;  // don't allow this extension access

else if (request.getTargetData)

sendResponse({targetData: targetData});

else if (request.activateLasers) {

var success = activateLasers();

sendResponse({activateLasers: success});

}

});

// For long-lived connections:

chrome.runtime.onConnectExternal.addListener(function(port) {

port.onMessage.addListener(function(msg) {

// See other examples for sample onMessage handlers.

});

});

content script向其他扩展发送消息

发送

// The ID of the extension we want to talk to.

var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:

chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},

function(response) {

if (!response.success)

handleError(url);

});

接收

chrome.runtime.onMessageExternal.addListener(

function(request, sender, sendResponse) {

if (sender.url == blacklistedWebsite)

return;  // don't allow this web page access

if (request.openUrlInEditor)

openUrl(request.openUrlInEditor);

});

右键菜单Context Menus

Context菜单用于在Chrome的右键菜单中增加自己的菜单项。

右键菜单可以出现在任意文档(或文档中的frame)中，甚至是本地文件(如file://或者Chrome://)中。

参考

https://developer.chrome.com/extensions/contextMenus (with samples)

右键菜单是动态的(所以才有context) 可以在backgroundJS中创建

要使用contentMenus API，manifest中要允许“contentMenus”权限。同时，您应该指定一个16x16的图标用作右键菜单的标识。

创建菜单

var parentID = chrome.contextMenus.create({"title": "Test parent item"});

var child1 = chrome.contextMenus.create({"title": "Child 1", "parentId": parentID});

var child2 = chrome.contextMenus.create({"title": "Child 2", "parentId": parentID});

PS create后一定要拿到菜单的ID值唷 不知道ID的话后面都无法操作菜单了

一个Demo

这个demo是在页面中选中了一个词 并且鼠标右键的时候查询这个词的意思并将翻译结果显示在新的标签页中

Content script右键菜单取词并发消息到background

function selectText(){

if(document.selection){//For ie

return  document.selection.createRange().text;

}else{

return  window.getSelection().toString();

}

}

document.body.addEventListener('mousedown',function(event) {

if(event.button == 2){

chrome.runtime.sendMessage(selectText(), function(response) {

});

}

},false);

在bg中接受到消息并调用有道词典的API翻译，打开一个新的标签页(url指定为本地文件 并将翻译结果以消息的方式传入到新的Tab)

function mountMsgListener() {

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {

var res = '';

if (!sender.tab) {

sendResponse('response to msg setn by popup');

} else if (sender.tab) {

if (message && message.length > 0) {

console.log('in bg msg listener ');

word=message;

title='翻译'+word;

chrome.contextMenus.update(fanyiMenuID,{'title':title},function(){});

fanyi(word);

}

}

});

}

fanyi()函数

function fanyi(word) {

var rs = '';

$.ajax({

url: 'http://fanyi.youdao.com/openapi.do',

type: 'GET',

dataType: 'json',

data: {

'keyfrom': 'rakustrans',

'key': '1506707246',

'type': 'data',

'doctype': 'json',

'version': '1.1',

'q': word

},

}).done(function(data) {

console.log(data);

fanyirs=data;

}).fail(function() {

console.log("error");

}).always(function() {

console.log("complete");

});

}

chrome.tabs

参考

https://developer.chrome.com/extensions/tabs#method-create

通过本API和浏览器的Tab交互。可以创建修改

获取Tab

Chrome提供了三种获取标签信息的方法，分别是get、getCurrent和query。get方法可以获取到指定id的标签，getCurrent则获取运行的脚本本身所在的标签，query可以获取所有符合指定条件的标签。

PS 关于getCurrent

不知道该函数怎么用  这个函数是不能够取得当前标签页的环境的

因为content script中根本不能用chrome.tabs这个API

官档说明

getCurrent(function callback). Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).

Stackoverflow上的解释

http://stackoverflow.com/questions/4619219/chrome-tab-extensions-getcurrent-vs-getselected

Ok I got it all wrong apparently. getCurrent should be used only inside extension's own pages that have a tab associated with them (options.html for example), you can't use it from a background or popup page. getSelected is a tab that is currently selected in a browser.

创建Tab

chrome.tabs.create(object createProperties, function callback)

在createProperties中可以指定创建的tab所在的窗口 url 位置 是否立即选中等

integer  (optional) windowId

The window to create the new tab in. Defaults to the current window.

integer  (optional) index

The position the tab should take in the window. The provided value will be clamped to between zero and the number of tabs in the window.

string    (optional) url

The URL to navigate the tab to initially. Fully-qualified URLs must include a scheme (i.e. 'http://www.google.com', not 'www.google.com'). Relative URLs will be relative to the current page within the extension. Defaults to the New Tab Page.

boolean       (optional) active

Whether the tab should become the active tab in the window. Does not affect whether the window is focused (see windows.update). Defaults to true.

创建Tab的同时发送消息

chrome.tabs.create( {index:tabs[0].index+1,url:'./fanyiRs.html',active:true },function(tab){

setTimeout(function(){

chrome.tabs.sendMessage(tab.id, fanyirs, function handler(response) { });

},100);

});

使某个指定Tab为选中状态

实际上就是更新Tab 使该Tab的active为true

chrome.tabs.update(integer tabId, object updateProperties, function callback)

PS

注意tabId并不是tab的index

注入JS和CSS

注入JS和CSS。之前我们接触过content_scripts，它可以向匹配条件的页面注入JS和CSS，但是却无法向用户指定的标签注入。通过executeScript和insertCSS可以做到向指定的标签注入脚本。

chrome.tabs.executeScript(tabId, {

file: 'js/ex.js',

allFrames: true,

runAt: 'document_start'

}, function(resultArray){

console.log(resultArray);

});

也可以直接注入代码：

chrome.tabs.executeScript(tabId, {

code: 'document.body.style.backgroundColor="red"',

allFrames: true,

runAt: 'document_start'

}, function(resultArray){

console.log(resultArray);

});

向指定的标签注入CSS：

chrome.tabs.insertCSS(tabId, {

file: 'css/insert.css',

allFrames: false,

runAt: 'document_start'

}, function(){

console.log('The css has been inserted.');

});

插入CSS也可以指定具体代码。

PS 关于runAt

控制content script注入的时机。可以是document_start， document_end或者document_idle。

缺省时是document_idle。浏览器会在document_end和发出window.onload事件之间的某个时机注入。

详情https://developer.chrome.com/extensions/tabs#type-InjectDetails

chrome.bookmarks

参考

https://developer.chrome.com/extensions/bookmarks#method-getTree

http://open.chrome.360.cn/extension_dev/bookmarks.html#method-getTree

书签是按照树状结构组织的，每个节点都是一个书签或者一组节点（每个书签夹可包含多个节点）。每个节点都对应一个 BookmarkTreeNode 对象。

使用该API首先要在manifest中添加权限

"permissions": [

"bookmarks"

],

书签节点数据结构

BookmarkTreeNode( object )

这个节点对象代表一个书签或者一个书签目录项。 节点对象有父子关系。

id ( string )

节点的唯一标识。IDs 在当前配置文件中是唯一的，浏览器重启后依然有效。

parentId (string )( optional)

父节点的ID。根节点没有父节点。

index (integer ) ( optional)

在父节点的书签夹范围内，该节点的索引，从0开始。

url (string ) ( optional)

当用户点击书签时，浏览器访问的url。书签夹没有该属性 。

title ( string )

节点的说明文字。

dateAdded (number ) ( optional)

节点创建时距纪元时间的毫秒数。 (new Date(dateAdded)).

dateGroupModified (number ) ( optional)

书签夹内容的最后更新时间距纪元时间的毫秒数。

children (array of BookmarkTreeNode ) ( optional)

get获取指定的书签节点

chrome.bookmarks.get(string or array of string idOrIdList, function callback)

get()的第一个参数是一个书签节点的id  而且是字符型

第一个参数还可以是一个包含id的数组

第二个参数是一个函数  这个函数式一个回调函数  该回调函数的参数是一个包含书签节点的数组

例如

chrome.bookmarks.get(['4','5'],function(rs){console.log(rs)});

执行该语句  回调函数将输出

[Object, Object]

0: Object

dateAdded: 1393641673546

dateGroupModified: 1401338527353

id: "4"

index: 0

parentId: "1"

title: "ME"

__proto__: Object

1: Object

dateAdded: 1393641673554

dateGroupModified: 1401158322373

id: "5"

index: 1

parentId: "1"

title: "Google"

__proto__: Object

length: 2

__proto__: Array[0]

rs是数组，包含两个书签节点，这两个书签节点就是get中id为4和5的书签节点信息

getTree按照层次结构获取所有书签

chrome.bookmarks.getTree(function callback)

回调函数的格式function(array of BookmarkTreeNode results) {...};

chrome.bookmarks.getTree(function(itemTree){

itemTree.forEach(function(item){

processNode(item);

});

});

function processNode(node) {

// recursively process child nodes

if(node.children) {

node.children.forEach(function(child) { processNode(child); });  //递归

}

// print leaf nodes URLs to console

if(node.url) { console.log(node.url); }

}

chrome.bookmarks.getRecent(integer numberOfItems, function callback)

PS回调函数格式function(array of BookmarkTreeNode results) {...};

PS Recent中值直接记录书签信息 不包含文件夹

chrome.bookmarks.getRecent(20,function(items){

items.forEach(function(items){

document.write(items.url);

});

}

);

chrome.bookmarks.getSubTree(string id, function callback)

获取指定的书签节点的子节点

PS 360的文档中为getChildren() 此API已不建议使用

create move remove update

create

chrome.bookmarks.create(object bookmark, function callback)

bookmark 对象属性

parentId 父节点ID ( string )

index (integer ) ( optional)

title (string ) ( optional)

url (string )( optional) 当url是NULL的时候创建的是文件夹

回调函数格式如下：

function(BookmarkTreeNode result) {...};

一个创建文件夹的Demo

chrome.bookmarks.create({'parentId': '1',

'title': 'bookmarks created'},

function(newFolder) {

console.log("added folder: " + newFolder.title);

});

添加书签

chrome.bookmarks.create({'parentId': '4','title': 'Extensions Test',

'url':'http://code.google.com/chrome/extensions'});

move移动指定的书签节点到指定的位置。

chrome.bookmarks.move(string id, object destination, function callback)

id ( string )

destination ( object )

parentId ( string ) ( optional)

index (integer )( optional)

callback ( optional function )

这里说明第二个参数是一个object  且这个作为参数object有两个可选的属性

一个demo

chrome.bookmarks.move('1332', {'parentId':'4'}, function(item){console.log(item)})

update&remove

chrome.bookmarks.update('1332', {'title':'Ext'}, function(){});

Events

onCreated

chrome.bookmarks.onCreated.addListener(function(string id, BookmarkTreeNode bookmark) {...});

当创建书签或者书签夹夹时，会触发该事件。Id就是刚添加的书签id

添加新书签时触发

chrome.bookmarks.onCreated.addListener(function(id,item){console.log(item)} );