引言:
在 Chrome 扩展开发的奇妙世界里,有一个非常实用的工具 ——Alarm。它就像是一个精准的定时助手,能够让我们的扩展在特定的时间或者按照一定的时间间隔自动执行任务。
Manifest
{
"name": "Alarms API Demo",
"version": "1.0",
"description": "Uses the chrome.alarms API to allow the user to set alarms using an extension page.",
"manifest_version": 3,
"background": {
"service_worker": "bg-wrapper.js"
},
"permissions": ["alarms"], // 申请alarms权限
"action": {}
}
申请权限
在扩展的 manifest.json 文件中,我们需要声明使用 Alarm 的权限。
创建定时任务
在后台脚本(比如 background.js)中,我们可以使用 chrome.alarms.create 方法来创建一个 Alarm。
API
chrome.alarms.create(name, alarmInfo) alarmInfo对象的一些常见属性如下:
when(可选双精度型):以纪元以来所经过的毫秒数为单位(例如Date.now() + n)来指定定时器应该触发的时刻。不过由于性能原因,定时器可能会延迟至该时间后的任意时间。需要注意的是,虽然可以设置为当前时间后小于 1 分钟的值,但定时器至少在 1 分钟内不会运行。
delayInMinutes(可选双精度型):以分钟为单位的时间长度,表示在指定时间之后将产生onAlarm事件。
periodInMinutes(可选双精度型):如果不是null的话,该定时器会重复触发,每隔periodInMinutes分>钟触发一次。
示例
if (delayFormat === 'ms') {
// 设置触发时间
alarmInfo.when = Date.now() + delay;
} else if (delayFormat === 'min') {
// 延迟多少秒执行
alarmInfo.delayInMinutes = delay;
}
if (period) {
// 设置周期执行时间
alarmInfo.periodInMinutes = period;
}
createAlarm(name, alarmInfo);
createAlarm(name, alarmInfo) {
chrome.alarms.create(name, alarmInfo);
const json = JSON.stringify(alarmInfo, null, 2).replace(/\s+/g, ' ');
this.logMessage(`Created "${name}"\n${json}`);
this.refreshDisplay();
}
监听定时器事件
当 Alarm 触发时,我们需要告诉扩展要做什么。通过chrome.alarms.onAlarm.addListener方法来监听 Alarm 的触发事件。
API
chrome.alarms.onAlarm.addListener(handler)
它接收一个回调函数作为参数(function(Alarm alarm) {...}),回调函数中的alarm参数就是触发事件的定时器对象。
示例
handleAlarm = async (alarm) => {
const json = JSON.stringify(alarm);
this.logMessage(`Alarm "${alarm.name}" fired\n${json}}`);
await this.refreshDisplay();
};
constructor(display, log) {
this.displayElement = display;
this.logElement = log;
this.logMessage('Manager: initializing demo');
this.displayElement.addEventListener('click', this.handleCancelAlarm);
chrome.alarms.onAlarm.addListener(this.handleAlarm);
}
清除指定定时器
当我们可能需要手动停止或清理已经创建的定时任务时,可以使用 chrome.alarms.clear 方法来清理定时任务。
API
chrome.alarms.clear(name, callback)
name: 可选,默认为空字符串
当执行这个清除操作后,会返回一个表示是否清除成功的反馈情况(通过回调函数中的boolean wasCleared参数体现)
示例
async cancelAlarm(name) {
return chrome.alarms.clear(name, (wasCleared) => {
if (wasCleared) {
this.logMessage(`Manager: canceled alarm "${name}"`);
} else {
this.logMessage(`Manager: could not canceled alarm "${name}"`);
}
});
}
清除所有定时器
当我们可能需要手动停止或清理已经创建的全部定时任务时,可以使用 chrome.alarms.clearAll 方法来清理定时任务。
API
chrome.alarms.clearAll(callback)
示例
async cancelAllAlarms() {
return chrome.alarms.clearAll((wasCleared) => {
if (wasCleared) {
this.logMessage(`Manager: canceled all alarms"`);
} else {
this.logMessage(`Manager: could not canceled all alarms`);
}
});
}
查看指定定时任务
获取指定定时器的有关详情。
API
chrome.alarms.get(name, callback)
name: 可选,默认为空字符串
示例
chrome.alarms.get("alarm-name",function(alarm){
if(alarm){
console.log(alarm);
}
});
查看全部定时任务
获取全部定时器的有关详情。
API
chrome.alarms.getAll(callback)
示例
async populateDisplay() {
return chrome.alarms.getAll((alarms) => {
for (const [index, alarm] of alarms.entries()) {
const isLast = index === alarms.length - 1;
this.renderAlarm(alarm, isLast);
}
});
}