Lunski's Clutter

This is a place to put my clutters, no matter you like it or not, welcome here.

0%

JS Chrome Extension

JavaScript是單線程、同步執行的語言,所以程式碼會按照順序,由上而下執行。

除錯方法

  1. 加log: console.log(“Alarm triggered!”);
  2. Chrome 瀏覽器網址列輸入 chrome://extensions/
  3. 找到正在開發的擴充功能
  4. 查看檢視模式 Service Worker
  5. 主控台顯示log

程式執行堆疊

1.background.js定時觸發

1
2
3
4
5
chrome.alarms.onAlarm.addListener()
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
files: ['content.js'] // 注入檔案
})

2.content.js被注入到目標分頁,開始執行

1
2
3
chrome.runtime.sendMessage({ action: 'checkLogin' }, (response) => { 
// ...
});

3.chrome.runtime.onMessage.addListener 監聽到來自 content.js 的訊息

1
2
3
4
5
6
7
8
chrome.scripting.executeScript({
target: { tabId: sender.tab.id },
function: checkLoginStatus // 注入函式
}, (results) => {

if (results && results.length > 0 && results[0].result) {
sendResponse({ loggedIn: true }); // 接收到 checkLoginStatus 的執行結果,並透過 sendResponse 發送回應
}

4.content.js的 chrome.runtime.sendMessage 的回呼函式接收到來自 background.js 的回應

1
2
3
4
if (response.loggedIn) {
// ...
startAutomatedSearch();
}

理解Chrome JS

  1. 執行堆疊
  2. 除錯方法
  3. 訊息傳遞
  4. 腳本(檔案/函式)注入
  5. 跨環境執行機制
  6. chrome.runtime API

如果你覺得這篇文章很棒,請你不吝點讚 (゚∀゚)

Welcome to my other publishing channels