一些开发chrome插件用到的API总结

最近刚结束了插件项目开发，故总结一些项目中用到的插件开发chrome的API，若有错误，期指出~

chrome应用

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 API

• 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监听请求，用chrome.extentsion

// content.js
chrome.extension.sendRequest(
    { 
        cmd: 'background-send-message', 
        data: text 
    }, (res) => {
        // res.XXX
    }
);
// background.js
chrome.extension.onRequest.addListener((request, sender, sendResponse) => {
    if (request && request.cmd) {
        // do something ...
    }
});
复制代码

建立右键

chrome右键

• 使用chrome.contextMenus能够建立/删除等chrome浏览器的右键菜单

// 建立
chrome.contextMenus.create({
    id: 'contextMenus-id',
    title: '翻译 “%s”', // 文言内容 => %s就是所划的词
    contexts: ['selection'], // 右键内容 => 该右键出现的时机(所有、页面、选定内容、连接...)
    onclick (params) {
        // do something ...
    }
});
// 删除
chrome.contextMenus.remove('contextMenus-id');
复制代码