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

除錯方法

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

程式執行堆疊

1.background.js定時觸發

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 的訊息

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 的回應

if (response.loggedIn) {
  // ...
  startAutomatedSearch(); 
}

理解Chrome JS

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

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

Lunski's Clutter

JS Chrome Extension

除錯方法

程式執行堆疊

理解Chrome JS