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

6,072 阅读3分钟

最近刚结束了插件项目开发,故总结一些项目中用到的插件开发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');