一些開發chrome外掛用到的API總結

DianaHan發表於2018-12-11
ChromeAPI

最近剛結束了外掛專案開發，故總結一些專案中用到的外掛開發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掉

一些開發chrome外掛用到的API總結

  • 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');
複製程式碼

相關文章