一些開發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');
複製代碼