一些开发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');
复制代码