最近刚结束了插件项目开发，故总结一些项目中用到的插件开发chrome的API，如有错误，期指出~
chrome.storage.sync/chrome.storage.local
使用chrome.storage API 存储用户数据，追踪用户数据的更改
这是为插件存储需要而特别优化的api，它提供了与localstorage API相同的功能，但是还是有以下区别: 1. 用户数据可以通过chrome浏览器的同步功能自动同步(storage.sync) 2. 使用storage.sync，存储的数据将会自动在用户启用同步功能并已经登录的所有的chrome浏览器间同步 3. 插件可以直接访问用户数据，不需要后台页面，直接storage里头取 4. 异步的，并且能够进行大量的读写操作。因此比阻塞和串行化的localStorage API更快 5. 用户数据可以存储为对象(localStorage API以字符串方式存储数据)
注： 我认为这个方式存储，只是同步数据，并没有界面可以看，只有console出来，background页和content页都可以访问查取 并且只有重新加载插件，才可能删除之前的记录
chrome.storage.sync.get({ autoIsOpen : 'true' // 是否自动开启}, (items)=>{ console.log(items.autoIsOpen);});chrome.storage.sync.set({ isUserKown : true // 是否用户指定});复制代码 sessionStorage/localStorage
注：这个方式存储，就可以通过打开插件的背景页(background.html)，能看到存储的一些数据，并且可以对着右键clear掉
- sessionStorage 会话清除 当页面关闭时 清除
- localStorage 存储没有到期日期的数据 当浏览器关闭时 数据不会被删除
localStorage.setItem('url', 'baidu.com');let urlLocal = localStorage.getItem('url');localStorage.removeItem('url');复制代码 guid
- guid 当做用户唯一标识，数据上报等地方用到
chrome.environment.getMachineGuid((guid) => {userId = guid;});复制代码 chrome发送消息与监听消息方式
- chrome.runtime.sendMessage(string extensionId, any message, object option, function responseCallback) 注：extensionId:发送消息的扩展程序或应用的标识符，在浏览器的应用程序那页能看到，每个插件都有个唯一的ID，如果省略，消息就是发送到自身的插件里
// 给自身插件发送消息chrome.runtime.sendMessage({ isUser: true, reportId: 8888, timer: 0, type: 'baidu.com' }, () => { });// 给其他插件发送消息chrome.runtime.sendMessage('ididididididididid', { cmd: 'cmd_istall',// 为了接收的时候，区别对待不同的请求 data: { isUser: true, reportId: 8888, url: 'baidu.com', tips: '百度' }}, function (res) => { if (res) { // do something... }});复制代码 注：1. 只能是 向自身插件或另一个插件发送 单个 消息
2. 如果是用chrome.runtime.sendMessage这个方法给自身发送消息，那么每个插件能注入的页面都会产生runtime.onMessage，但是插件自身的content.js无法收到和监听这个消息，该插件的background.js可以收到，该方式通常用于数据上报 3. 如果是向另外一个插件或应用发送消息，则在另一个插件可以用runtime.onMessageExternal监听// 在其他插件监听 此方式不能写在content.js里，只能写在background.js里监听chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => { if (request && request.cmd) { switch (request.cmd) { case 'cmd_install': // do something... sendResponse('installed'); return true;// 返回true，就可以sendResponse('xxx')回调 传需要回调的参数 可以通过res.获取 } }})复制代码 4.如果是想让自身content.js监听到发送的消息，要用chrome.tabs.sendMessage，写在background.js里
// chrome.tabs.query获取当前窗口 当前显示chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { if (tabs.length !== 0) { // 给自身content.js发送消息 chrome.tabs.sendMessage(tabs[0].id, message, (response) => { currentMainFrameUrl = tabs[0].url;// 记录当前窗口url if (callback) { callback(response, tabs[0]); } }); }});// 自身content.js监听消息 写在content.js里chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {});复制代码 5.如果是content.js发送一些请求，background.js监听请求，用
// content.jschrome.extension.sendRequest( { cmd: 'background-send-message', data: text }, (res) => { // res.XXX });// background.jschrome.extension.onRequest.addListener((request, sender, sendResponse) => { if (request && request.cmd) { // do something ... }});复制代码 创建右键
- 使用chrome.contextMenus可以创建/删除等chrome浏览器的右键菜单
// 创建chrome.contextMenus.create({ id: 'contextMenus-id', title: '翻译 “%s”', // 文言内容 => %s就是所划的词 contexts: ['selection'], // 右键内容 => 该右键出现的时机(全部、页面、选定内容、链接...) onclick (params) { // do something ... }});// 删除chrome.contextMenus.remove('contextMenus-id');复制代码