SoFunction
Updated on 2025-04-20

Chrome Extension Development Timed Task Plugin

When I first started to develop Chrome Extension, I thought that I only needed to simply call setInterval to implement timing tasks, but I didn’t expect that this seemingly simple function made me fall into a lot of tricks. Today we will talk about how to elegantly implement timing tasks in Chrome Extension, which not only ensures on time but also ensures stability and reliability.

What is Chrome Extension

  • Chrome Extension is actually what most people call Chrome plug-in, but from a standard perspective, Chrome plug-in is the development of the browser's underlying expansion function, and what we use should be called Chrome Extension.
  • Chrome Expansion is a small software program designed and developed for Chrome browsers to enhance browser functionality, improve user experience, and even provide brand new tools and services. For example, our commonly used ad blocking plug-ins, web image resources, video resource sniffing tools, etc.

From resident background to wake-up on demand

Early Chrome Extension allowed background scripts to reside in memory, and using setInterval to implement timing tasks is indeed very simple. But with the launch of Manifest V3, the situation changed: the background script became a Service Worker, using a mechanism of on-demand wake-up and automatic sleep, completely bidding farewell to the era of all-weather operation.

It's like you want to find a security guard on duty 24 hours a day, but a temporary worker who may fall asleep at any time and needs specific conditions to wake up. If you don't pay special attention to the wake-up mechanism, your timing tasks will likely miss the execution time.

Implementation plan

Solution 1: Use API

Chrome specifically provides an API to implement timing tasks. You can set execution intervals and first trigger times, which are very suitable for tasks that need to be executed regularly, such as data synchronization, interface polling, etc.

// Create a timer called 'FunTesterAlarm', triggering every 15 minutes('FunTesterAlarm', {
  periodInMinutes: 15 // Set the trigger interval to 15 minutes});

// Listen to the timer to trigger the event((alarm) => {
  // Check whether the triggered timer name is 'FunTesterAlarm'  if ( === 'FunTesterAlarm') {
    // Execute timing tasks, such as obtaining remote configuration, sending notifications, etc.    ('FunTesterAlarm triggered');
  }
});

The advantage of this solution is that the interface is simple and official support, but there are some limitations:

  • Task execution depends on background wakeup, and the browser may be delayed or skipped when sleeping
  • The minimum time interval is 1 minute, and the second-level timing cannot be achieved
  • The state will be reset every time you wake up, and you cannot rely on global variables.

Solution 2: State-aware timer combined with content script

In some scenarios, what we need is not strict timing, but checking when the user accesses the page. At this time, the timing logic can be implemented in the page context through content script.

setInterval(() => {
  // Check the DOM status or send a heartbeat request}, 10000);

The limitations of this approach are:

  • The execution frequency cannot be guaranteed, and the page will stop after it is closed.
  • Relying on user behavior, it is impossible to implement background timing tasks

Solution 3: Simulation timing based on event triggering and storage

This is a more robust way to implement it: when the plug-in is started or when the message is received, check the last task execution time to decide whether the task needs to be executed.

// Triggered when Chrome extensions start (for example, browser startup or extensions are reloaded)(() => {
  checkAndRunTask(); // Call a function that checks and runs the task});

// Define functions to check and run tasksfunction checkAndRunTask() {
  const now = (); // Get the timestamp of the current time (milliseconds)  
  // Get the value of 'lastRun' from Chrome' local storage  ('lastRun', (res) => {
    const lastRun =  || 0; // If 'lastRun' does not exist, the default is 0    
    // Check whether the interval between the current time and the last running time exceeds 30 minutes    if (now - lastRun > 1000 * 60 * 30) {
      // If more than 30 minutes, perform a scheduled task      ({ lastRun: now }); // Update 'lastRun' to the current time    }
  });
}

Although this method is not accurate enough, it is relatively stable and is suitable for performing low-frequency, non-urgent backend tasks.

Best Practice: Create reliable timed tasks

When implementing timing tasks in Chrome Extension, you need to pay attention to the following points:

  1. Ensure that the task is idempotentImpotence means that the result should be the same no matter how many times the task is executed. For example, when syncing bookmarks, even if the synchronization operation is triggered multiple times, data will not be duplicated or errored. Idepotency can be achieved by verifying or deduplicating the data.
  2. Record detailed execution logsLogging is an important tool for troubleshooting problems during development and testing. It is recommended to log each key step in the task execution, including the task start, end, abnormal situation, etc. For example, you can useOr integrate third-party logging services to store logs to remote servers for subsequent analysis.
  3. Prevent tasks from being repeatedTo avoid the task being triggered multiple times in a short time, a lock mechanism or status check can be introduced. For example, set a flag at the beginning of the task and clear the flag after the task is completed. If the task is executing, the new trigger request should be returned directly to avoid repeated execution.
  4. Avoid relying on memory state, important data should be stored persistentlyChrome Extension's background scripts may be destroyed due to browser restarts or other reasons, so they cannot rely on state in memory. It is recommended to store the status, execution time and other information in the task.or other persistent storage. For example, the time of the last task execution can be stored to, first check the time in storage when the task is triggered to determine whether the task needs to be executed.

Here is a sample code showing how to implement an idempotent timing task in Chrome Extension while logging and preventing duplicate execution:

// Create a timer called FunTesterTask, triggering every 30 minutes('FunTesterTask', {
  periodInMinutes: 30
});

// Listen to the timer to trigger the event((alarm) => {
  if ( === 'FunTesterTask') {
    ('FunTesterTask triggered at', new Date().toISOString());
    executeTask();
  }
});

// Define task execution functionfunction executeTask() {
  const now = ();

  // Get the last task execution time from storage  ('lastRun', (res) => {
    const lastRun =  || 0;

    // Check if it has been more than 30 minutes    if (now - lastRun > 1000 * 60 * 30) {
      ('Executing FunTesterTask at', new Date().toISOString());

      // Simulate task execution logic      performTask()
        .then(() => {
          ('FunTesterTask completed successfully');
          // Update the last execution time          ({ lastRun: now });
        })
        .catch((error) => {
          ('FunTesterTask failed:', error);
        });
    } else {
      ('FunTesterTask skipped, last run was too recent');
    }
  });
}

// Simulate task logicfunction performTask() {
  return new Promise((resolve, reject) => {
    // Simulate asynchronous operations, such as synchronous data    setTimeout(() => {
      ('Performing FunTesterTask...');
      resolve();
    }, 2000);
  });
}

Show You Code

Below is the timed task I wrote based on historical access information to handle this work, for reference only.

// Clean history, recent records and download records when installing extensions(() => {  
 
    // Clear history    clearHistoryRecord();  
    // Clear the latest records    clearRecentRecord();  
    // Delete the download record    deleteDownlaods();  
      
    // Create a timed task to clear the latest records every 15 minutes    ("clearRecent", {  
        // delayInMinutes: 1, // Delay starts after 1 minute (noted)        periodInMinutes: 15  
    });  
      
    // Create a timed task to clear history every 5 hours    ("clearHistory", {  
        // delayInMinutes: 1, // Delay starts after 1 minute (noted)        periodInMinutes: 60 * 5  
    });  
});

Expand ideas

In Chrome Extension development, in addition to traditional timing tasks (such as), we can also adopt a more flexible way to achieve task triggering. Here are some feasible solutions:

Combined with server push

Through server push messages, such as Firebase Cloud Messaging or other push services, you can notify the plug-in to perform tasks when a specific event occurs. This approach is suitable for scenarios that require real-time responses, such as message notifications or data updates. Configure push services on the server side and send messages to the client. Listen in plug-inor other push events. Perform corresponding tasks according to the received message content.

((message, sender, sendResponse) => {
    if ( === 'SERVER_PUSH') {
        ('Received push message:', );
        // Execute tasks based on push content        executeTask();
        sendResponse({status: 'Task executed'});
    }
});

Listen with WebSocket

Establishing a long connection through WebSocket allows you to listen for state changes in the backend in real time and trigger tasks. This approach is suitable for scenarios that require continuous monitoring, such as stock price changes or system status updates. Create a WebSocket connection in the plug-in. - Listen to WebSocket message events and trigger tasks based on the message content.

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

 = () => {
    ('WebSocket connection established');
};

 = (event) => {
    const data = ();
    ('Received WebSocket message:', data);
    // Execute tasks according to the message content    executeTask(data);
};

 = (error) => {
    ('WebSocket error:', error);
};

 = () => {
    ('WebSocket connection closed');
};

Trigger plug-in with the help of three-party scheduling services

The plug-in's functionality can be called at a specific time or condition through external scheduling services such as AWS Lambda, Google Cloud Functions, or timing triggers. This method is suitable for scenarios where complex scheduling logic is required. Configure scheduling tasks in external services. Call the plug-in's API or notify the plug-in to perform tasks through a message mechanism.

// The plugin listens for HTTP requests from external services((message, sender, sendResponse) => {
    if ( === 'TRIGGER_TASK') {
        ('Received external trigger:', );
        // Execute tasks        executeTask();
        sendResponse({status: 'Task executed'});
    }
});

Summarize

Implementing timing tasks in Chrome Extension is like using a timer when cooking. It not only requires precise control of time, but also requires both execution environment and state management. The implementation of timing tasks requires consideration of many factors, such as the idempotence of the task, the persistence of the state, and the efficient utilization of resources. Although the timing mechanism of Chrome Extension is not as flexible as it is, by deeply understanding its working principles and following best practices, a stable and reliable timing task system can be built.

When designing timing tasks, ensuring the idempotence of the tasks is crucial, so that the side effects of repeated execution can be avoided. In addition, since extended background scripts may be destroyed, it is recommended to store the task state inso that the task state can be restored after the extension restart. In order to facilitate debugging and optimization, the execution time, results and exception information of the task can also be recorded. In addition to traditional timing tasks (such as), and can also combine server push, WebSocket or user behavior trigger tasks to further improve the flexibility and real-time of tasks.

Through reasonable design and optimization, Chrome Extension's timing tasks can not only meet the needs of time-triggering, but also be efficiently executed at the right time, providing users with a better user experience. Hopefully these experiences can help you avoid common pitfalls and write higher-quality extension code.

This is the article about Chrome Extension development timed task plug-in. For more information about Chrome development timed task plug-in, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!