剛開(kāi)始接觸 Chrome Extension 開(kāi)發(fā)時(shí)，我以為實(shí)現(xiàn)定時(shí)任務(wù)只需要簡(jiǎn)單調(diào)用 setInterval 就行，沒(méi)想到這個(gè)看似簡(jiǎn)單的功能讓我踩了不少坑。今天我們就來(lái)聊聊如何在 Chrome Extension 中優(yōu)雅地實(shí)現(xiàn)定時(shí)任務(wù)，既要保證準(zhǔn)時(shí)執(zhí)行，又要確保穩(wěn)定可靠。

Chrome 拓展（Chrome Extension）是什么

• Chrome Extension 實(shí)際上就是大多數(shù)人所說(shuō)的 Chrome 插件，但是從標(biāo)準(zhǔn)上來(lái)說(shuō) Chrome 插件是瀏覽器更底層的拓展功能開(kāi)發(fā)，而我們使用的應(yīng)該叫 Chrome 拓展（Chrome Extension）。
• Chrome 拓展是為 Chrome 瀏覽器設(shè)計(jì)和開(kāi)發(fā)的小型軟件程序，用于增強(qiáng)瀏覽器功能、改善用戶體驗(yàn)，甚至提供全新的工具和服務(wù)。比如我們常用的廣告屏蔽插件、網(wǎng)頁(yè)圖片資源、視頻資源嗅探工具等等。

從常駐后臺(tái)到按需喚醒

早期的 Chrome Extension 允許后臺(tái)腳本常駐內(nèi)存，使用 setInterval 實(shí)現(xiàn)定時(shí)任務(wù)確實(shí)很簡(jiǎn)單。但隨著 Manifest V3 的推出，情況發(fā)生了變化：后臺(tái)腳本變成了 Service Worker，采用按需喚醒、自動(dòng)休眠的機(jī)制，徹底告別了全天候運(yùn)行的時(shí)代。

這就好比你想找個(gè)24小時(shí)值班的保安，結(jié)果卻來(lái)了個(gè)隨時(shí)可能睡著、需要特定條件才能喚醒的臨時(shí)工。如果不特別注意喚醒機(jī)制，你的定時(shí)任務(wù)很可能會(huì)錯(cuò)過(guò)執(zhí)行時(shí)機(jī)。

實(shí)現(xiàn)方案

方案一：使用 chrome.alarms API

Chrome 專(zhuān)門(mén)提供了 chrome.alarms API 來(lái)實(shí)現(xiàn)定時(shí)任務(wù)功能。你可以設(shè)置執(zhí)行間隔和首次觸發(fā)時(shí)間，非常適合需要定期執(zhí)行的任務(wù)，比如數(shù)據(jù)同步、接口輪詢(xún)等。

// 創(chuàng)建一個(gè)名為 'FunTesterAlarm' 的定時(shí)器，每 15 分鐘觸發(fā)一次
chrome.alarms.create('FunTesterAlarm', {
  periodInMinutes: 15 // 設(shè)置觸發(fā)間隔為 15 分鐘
});

// 監(jiān)聽(tīng)定時(shí)器觸發(fā)事件
chrome.alarms.onAlarm.addListener((alarm) => {
  // 檢查觸發(fā)的定時(shí)器名稱(chēng)是否為 'FunTesterAlarm'
  if (alarm.name === 'FunTesterAlarm') {
    // 執(zhí)行定時(shí)任務(wù)，例如獲取遠(yuǎn)程配置、發(fā)送通知等
    console.log('FunTesterAlarm triggered');
  }
});

這個(gè)方案的優(yōu)點(diǎn)是接口簡(jiǎn)單、官方支持，但也存在一些限制：

• 任務(wù)執(zhí)行依賴(lài)于后臺(tái)喚醒，瀏覽器休眠時(shí)可能延遲或跳過(guò)
• 最小時(shí)間間隔為1分鐘，無(wú)法實(shí)現(xiàn)秒級(jí)定時(shí)
• 每次喚醒時(shí)狀態(tài)會(huì)重置，不能依賴(lài)全局變量

方案二：結(jié)合 content script 的狀態(tài)感知定時(shí)器

某些場(chǎng)景下，我們需要的不是嚴(yán)格定時(shí)，而是在用戶訪問(wèn)頁(yè)面時(shí)進(jìn)行檢查。這時(shí)可以通過(guò) content script 在頁(yè)面上下文中實(shí)現(xiàn)定時(shí)邏輯。

setInterval(() => {
  // 檢查DOM狀態(tài)或發(fā)送心跳請(qǐng)求
}, 10000);

這種方式的局限性在于：

• 無(wú)法保證執(zhí)行頻率，頁(yè)面關(guān)閉后就會(huì)停止
• 依賴(lài)用戶行為，無(wú)法實(shí)現(xiàn)后臺(tái)定時(shí)任務(wù)

方案三：基于事件觸發(fā)和存儲(chǔ)的模擬定時(shí)

這是一種更穩(wěn)健的實(shí)現(xiàn)方式：在插件啟動(dòng)或收到消息時(shí)，檢查上次任務(wù)執(zhí)行時(shí)間，決定是否需要執(zhí)行任務(wù)。

// 當(dāng) Chrome 擴(kuò)展啟動(dòng)時(shí)觸發(fā)（例如瀏覽器啟動(dòng)或擴(kuò)展被重新加載）
chrome.runtime.onStartup.addListener(() => {
  checkAndRunTask(); // 調(diào)用檢查并運(yùn)行任務(wù)的函數(shù)
});

// 定義檢查并運(yùn)行任務(wù)的函數(shù)
function checkAndRunTask() {
  const now = Date.now(); // 獲取當(dāng)前時(shí)間的時(shí)間戳（毫秒）
  
  // 從 Chrome 的本地存儲(chǔ)中獲取 'lastRun' 的值
  chrome.storage.local.get('lastRun', (res) => {
    const lastRun = res.lastRun || 0; // 如果 'lastRun' 不存在，則默認(rèn)為 0
    
    // 檢查當(dāng)前時(shí)間與上次運(yùn)行時(shí)間的間隔是否超過(guò) 30 分鐘
    if (now - lastRun > 1000 * 60 * 30) {
      // 如果超過(guò) 30 分鐘，則執(zhí)行定時(shí)任務(wù)
      chrome.storage.local.set({ lastRun: now }); // 更新 'lastRun' 為當(dāng)前時(shí)間
    }
  });
}

這種方式雖然不夠精確，但穩(wěn)定性較好，適合執(zhí)行低頻、非緊急的后臺(tái)任務(wù)。

最佳實(shí)踐：打造可靠的定時(shí)任務(wù)

在 Chrome Extension 中實(shí)現(xiàn)定時(shí)任務(wù)時(shí)，需要注意以下幾點(diǎn)：

1. 確保任務(wù)具有冪等性 冪等性是指無(wú)論任務(wù)被執(zhí)行多少次，結(jié)果都應(yīng)該是相同的。比如在同步書(shū)簽時(shí)，即使多次觸發(fā)同步操作，也不會(huì)導(dǎo)致數(shù)據(jù)重復(fù)或錯(cuò)誤。可以通過(guò)對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)或去重來(lái)實(shí)現(xiàn)冪等性。
2. 記錄詳細(xì)的執(zhí)行日志 在開(kāi)發(fā)和測(cè)試過(guò)程中，日志是排查問(wèn)題的重要工具。建議在任務(wù)執(zhí)行的每個(gè)關(guān)鍵步驟都記錄日志，包括任務(wù)開(kāi)始、結(jié)束、異常情況等。例如，可以使用 console.log 或者集成第三方日志服務(wù)，將日志存儲(chǔ)到遠(yuǎn)程服務(wù)器，方便后續(xù)分析。
3. 防止任務(wù)重復(fù)執(zhí)行 為了避免任務(wù)在短時(shí)間內(nèi)被多次觸發(fā)，可以引入鎖機(jī)制或狀態(tài)檢查。例如，在任務(wù)開(kāi)始時(shí)設(shè)置一個(gè)標(biāo)志位，任務(wù)完成后清除標(biāo)志位。如果任務(wù)正在執(zhí)行，新的觸發(fā)請(qǐng)求應(yīng)直接返回，避免重復(fù)執(zhí)行。
4. 避免依賴(lài)內(nèi)存狀態(tài)，重要數(shù)據(jù)應(yīng)該持久化存儲(chǔ) Chrome Extension 的后臺(tái)腳本可能會(huì)因?yàn)闉g覽器重啟或其他原因被銷(xiāo)毀，因此不能依賴(lài)內(nèi)存中的狀態(tài)。建議將任務(wù)的狀態(tài)、執(zhí)行時(shí)間等信息存儲(chǔ)到 chrome.storage 或其他持久化存儲(chǔ)中。例如，可以將上次任務(wù)執(zhí)行的時(shí)間存儲(chǔ)到 chrome.storage.local，在任務(wù)觸發(fā)時(shí)先檢查存儲(chǔ)中的時(shí)間，判斷是否需要執(zhí)行任務(wù)。

以下是一個(gè)示例代碼，展示如何在 Chrome Extension 中實(shí)現(xiàn)一個(gè)冪等的定時(shí)任務(wù)，同時(shí)記錄日志并防止重復(fù)執(zhí)行：

// 創(chuàng)建一個(gè)名為 FunTesterTask 的定時(shí)器，每 30 分鐘觸發(fā)一次
chrome.alarms.create('FunTesterTask', {
  periodInMinutes: 30
});

// 監(jiān)聽(tīng)定時(shí)器觸發(fā)事件
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'FunTesterTask') {
    console.log('FunTesterTask triggered at', new Date().toISOString());
    executeTask();
  }
});

// 定義任務(wù)執(zhí)行函數(shù)
function executeTask() {
  const now = Date.now();

  // 從存儲(chǔ)中獲取上次任務(wù)執(zhí)行時(shí)間
  chrome.storage.local.get('lastRun', (res) => {
    const lastRun = res.lastRun || 0;

    // 檢查是否已經(jīng)超過(guò) 30 分鐘
    if (now - lastRun > 1000 * 60 * 30) {
      console.log('Executing FunTesterTask at', new Date().toISOString());

      // 模擬任務(wù)執(zhí)行邏輯
      performTask()
        .then(() => {
          console.log('FunTesterTask completed successfully');
          // 更新上次執(zhí)行時(shí)間
          chrome.storage.local.set({ lastRun: now });
        })
        .catch((error) => {
          console.error('FunTesterTask failed:', error);
        });
    } else {
      console.log('FunTesterTask skipped, last run was too recent');
    }
  });
}

// 模擬任務(wù)邏輯
function performTask() {
  return new Promise((resolve, reject) => {
    // 模擬異步操作，例如同步數(shù)據(jù)
    setTimeout(() => {
      console.log('Performing FunTesterTask...');
      resolve();
    }, 2000);
  });
}

Show You Code

下面是我根據(jù)歷史訪問(wèn)信息寫(xiě)了定時(shí)任務(wù)，用來(lái)處理這個(gè)工作的，僅供參考。

// 在擴(kuò)展安裝時(shí)清理歷史記錄、最近記錄和下載記錄
chrome.runtime.onInstalled.addListener(() => {  
 
    // 清除歷史記錄  
    clearHistoryRecord();  
    // 清除最近記錄  
    clearRecentRecord();  
    // 刪除下載記錄  
    deleteDownlaods();  
      
    // 創(chuàng)建一個(gè)定時(shí)任務(wù)，每 15 分鐘清除最近記錄  
    chrome.alarms.create("clearRecent", {  
        // delayInMinutes: 1, // 延遲 1 分鐘后開(kāi)始（已注釋?zhuān)? 
        periodInMinutes: 15  
    });  
      
    // 創(chuàng)建一個(gè)定時(shí)任務(wù)，每 5 小時(shí)清除歷史記錄  
    chrome.alarms.create("clearHistory", {  
        // delayInMinutes: 1, // 延遲 1 分鐘后開(kāi)始（已注釋?zhuān)? 
        periodInMinutes: 60 * 5  
    });  
});

拓展思路

在 Chrome Extension 開(kāi)發(fā)中，除了傳統(tǒng)的定時(shí)任務(wù)（如 chrome.alarms），我們還可以采用更靈活的方式來(lái)實(shí)現(xiàn)任務(wù)觸發(fā)，以下是一些可行的方案：

結(jié)合服務(wù)器推送

通過(guò)服務(wù)器推送消息（如 Firebase Cloud Messaging 或其他推送服務(wù)），可以在特定事件發(fā)生時(shí)通知插件執(zhí)行任務(wù)。這種方式適合需要實(shí)時(shí)響應(yīng)的場(chǎng)景，例如消息通知或數(shù)據(jù)更新。在服務(wù)器端配置推送服務(wù)，發(fā)送消息到客戶端。在插件中監(jiān)聽(tīng) chrome.pushMessaging.onMessage 或其他推送事件。根據(jù)接收到的消息內(nèi)容執(zhí)行相應(yīng)的任務(wù)。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'SERVER_PUSH') {
        console.log('Received push message:', message.data);
        // 根據(jù)推送內(nèi)容執(zhí)行任務(wù)
        executeTask(message.data);
        sendResponse({status: 'Task executed'});
    }
});

使用 WebSocket 監(jiān)聽(tīng)

通過(guò) WebSocket 建立長(zhǎng)連接，可以實(shí)時(shí)監(jiān)聽(tīng)后端的狀態(tài)變化并觸發(fā)任務(wù)。這種方式適合需要持續(xù)監(jiān)控的場(chǎng)景，例如股票價(jià)格變動(dòng)或系統(tǒng)狀態(tài)更新。在插件中創(chuàng)建 WebSocket 連接。- 監(jiān)聽(tīng) WebSocket 消息事件，根據(jù)消息內(nèi)容觸發(fā)任務(wù)。

const socket = new WebSocket('wss://example.com/socket');

socket.onopen = () => {
    console.log('WebSocket connection established');
};

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Received WebSocket message:', data);
    // 根據(jù)消息內(nèi)容執(zhí)行任務(wù)
    executeTask(data);
};

socket.onerror = (error) => {
    console.error('WebSocket error:', error);
};

socket.onclose = () => {
    console.log('WebSocket connection closed');
};

借助三方調(diào)度服務(wù)觸發(fā)插件

通過(guò)外部調(diào)度服務(wù)（如 AWS Lambda、Google Cloud Functions 或定時(shí)觸發(fā)器），可以在特定時(shí)間或條件下調(diào)用插件的功能。這種方式適合需要復(fù)雜調(diào)度邏輯的場(chǎng)景。在外部服務(wù)中配置調(diào)度任務(wù)。調(diào)用插件的 API 或通過(guò)消息機(jī)制通知插件執(zhí)行任務(wù)。

// 插件監(jiān)聽(tīng)外部服務(wù)的 HTTP 請(qǐng)求
chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
    if (message.type === 'TRIGGER_TASK') {
        console.log('Received external trigger:', message.data);
        // 執(zhí)行任務(wù)
        executeTask(message.data);
        sendResponse({status: 'Task executed'});
    }
});

總結(jié)

在 Chrome Extension 中實(shí)現(xiàn)定時(shí)任務(wù)，就像烹飪時(shí)使用定時(shí)器，不僅需要精確把控時(shí)間，還要兼顧執(zhí)行環(huán)境和狀態(tài)管理。定時(shí)任務(wù)的實(shí)現(xiàn)需要考慮多方面因素，例如任務(wù)的冪等性、狀態(tài)的持久化以及資源的高效利用。雖然 Chrome Extension 的定時(shí)機(jī)制不如 Node.js 那樣靈活，但通過(guò)深入理解其工作原理并遵循最佳實(shí)踐，可以構(gòu)建出穩(wěn)定可靠的定時(shí)任務(wù)系統(tǒng)。

在設(shè)計(jì)定時(shí)任務(wù)時(shí)，確保任務(wù)的冪等性至關(guān)重要，這樣可以避免重復(fù)執(zhí)行帶來(lái)的副作用。此外，由于擴(kuò)展的后臺(tái)腳本可能會(huì)被銷(xiāo)毀，建議將任務(wù)狀態(tài)存儲(chǔ)在 chrome.storage 中，以便在擴(kuò)展重啟后能夠恢復(fù)任務(wù)狀態(tài)。為了便于調(diào)試和優(yōu)化，還可以記錄任務(wù)的執(zhí)行時(shí)間、結(jié)果以及異常信息。除了傳統(tǒng)的定時(shí)任務(wù)（如 chrome.alarms），還可以結(jié)合服務(wù)器推送、WebSocket 或用戶行為觸發(fā)任務(wù)，進(jìn)一步提升任務(wù)的靈活性和實(shí)時(shí)性。

通過(guò)合理設(shè)計(jì)和優(yōu)化，Chrome Extension 的定時(shí)任務(wù)不僅可以滿足時(shí)間觸發(fā)的需求，還能在合適的時(shí)機(jī)高效執(zhí)行，為用戶提供更優(yōu)質(zhì)的使用體驗(yàn)。希望這些經(jīng)驗(yàn)?zāi)軒椭惚荛_(kāi)常見(jiàn)的陷阱，編寫(xiě)出更高質(zhì)量的擴(kuò)展程序代碼。

到此這篇關(guān)于Chrome拓展（Chrome Extension）開(kāi)發(fā)定時(shí)任務(wù)插件的文章就介紹到這了,更多相關(guān)Chrome開(kāi)發(fā)定時(shí)任務(wù)插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論