一些開發chrome外掛用到的API總結
最近剛結束了外掛專案開發，故總結一些專案中用到的外掛開發chrome的API，如有錯誤，期指出~
ofollow,noindex">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.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.contextMenus可以建立/刪除等chrome瀏覽器的右鍵選單
// 建立
chrome.contextMenus.create({
id: 'contextMenus-id',
title: '翻譯 “%s”', // 文言內容 => %s就是所劃的詞
contexts: ['selection'], // 右鍵內容 => 該右鍵出現的時機(全部、頁面、選定內容、連結...)
onclick (params) {
// do something ...
}
});
// 刪除
chrome.contextMenus.remove('contextMenus-id');
複製程式碼