在本教程中，我們將介紹如何創(chuàng)建附加組件，允許用戶在指定時(shí)間使用自定義文本創(chuàng)建警報(bào) 。我們將介紹如何創(chuàng)建基本加載項(xiàng)、添加彈出窗口和選項(xiàng)頁(yè)面、添加權(quán)限、存儲(chǔ)信息、發(fā)送通知以及創(chuàng)建用于發(fā)送通知的后臺(tái)腳本 。
本教程不需要任何創(chuàng)建附加組件或任何瀏覽器擴(kuò)展的經(jīng)驗(yàn) 。您只需要了解一些基礎(chǔ)知識(shí) 。您可以在此存儲(chǔ)庫(kù)中找到本教程的代碼，也可以在此處找到已創(chuàng)建的附加組件 。
設(shè)置我們的插件
創(chuàng)建附加組件的第一步是創(chuàng)建.json文件 。此文件是附加組件所需的唯一文件 。.json文件的基本格式應(yīng)包括以下鍵：
這些是任何附加組件的必填字段 。以下兩個(gè)是可選的，但建議使用：
對(duì)于我們的附加組件api版本菜單使用中，讓我們首先創(chuàng)建一個(gè)名為–addon. 然后添加一個(gè).json內(nèi)容如下：
{"name": "personalized-alarms","version": "0.0.1","description": "Create personalized alarms","manifest_version": 2,"icons": {"16": "assets/images/icon16.png","32": "assets/images/icon32.png","48": "assets/images/icon48.png","128": "assets/images/icon128.png"}}
如您所見(jiàn)，icons鍵是一個(gè)對(duì)象，其中包含文件大小和路徑的鍵 。該路徑是相對(duì)于附加組件的根目錄，即其所在的位置.json 。在本教程中，我使用的下載圖標(biāo)通過(guò)的表情符號(hào)，我可以下載需要以及不同尺寸 。
如果您正在跟進(jìn)，請(qǐng)從我們的存儲(chǔ)庫(kù)中獲取這些文件并將它們放在適當(dāng)?shù)哪夸?( //) 中 。
這就是創(chuàng)建附加組件所需的全部?jī)?nèi)容！
在中加載附加組件
要測(cè)試我們的附加組件并在稍后將其上傳到的開(kāi)發(fā)人員中心之前能夠?qū)ζ溥M(jìn)行調(diào)試，請(qǐng)打開(kāi)  ， 然后從右側(cè)菜單中選擇附加組件和主題，或使用快捷方式ctrl+ shift+ A 。然后 ， 單擊 Your 旁邊的“”圖標(biāo)并選擇Debug Add-ons 。
將為 打開(kāi)一個(gè)新頁(yè)面 。
單擊LoadAdd-on按鈕并選擇.json您剛剛創(chuàng)建的文件 。如果一切正常 ， 您將看到新創(chuàng)建的附加組件，其中包含有關(guān)它的一些信息以及我們?cè)?json.
添加彈出窗口
可以通過(guò)不同的方法訪問(wèn)附加組件，其中之一是添加彈出頁(yè)面 。添加彈出頁(yè)面時(shí)，擴(kuò)展程序的圖標(biāo)將顯示在工具欄中，一旦用戶單擊它，您指定的彈出頁(yè)面就會(huì)顯示出來(lái) 。
我們將使用彈出頁(yè)面向用戶顯示即將到來(lái)的警報(bào)列表和一個(gè)添加新警報(bào)的鏈接，該鏈接將用戶帶到選項(xiàng)頁(yè)面（我們將在下一節(jié)中討論） 。
popup.html在項(xiàng)目根目錄中創(chuàng)建一個(gè)文件，內(nèi)容如下：
Personalized AlarmsUpcoming Alarms

Add an Alarm
如您所見(jiàn)，它只是一個(gè) HTML 文檔 。我們也加入.min.css到/css和鏈接在這里它 ， .min.js在/js/.min.js和鏈接它 。這兩個(gè)庫(kù)只是為了讓事情變得更容易，但您不必實(shí)際使用它們 。你可以在這里和這里從我們的倉(cāng)庫(kù)中獲取它們 。
在頁(yè)面內(nèi)容中，我們將顯示即將到來(lái)的警報(bào)列表以及指向選項(xiàng)頁(yè)面的鏈接 。
使彈出窗口工作的下一步是在 中添加以下內(nèi)容.json：
"browser_action": {"default_popup": "popup.html","browser_style": true}
是一個(gè)具有多個(gè)選項(xiàng)的對(duì)象，但唯一必須的一個(gè)是 ， 它是從附加組件根目錄到彈出窗口的相對(duì)路徑 。不是強(qiáng)制性的，但建議將其設(shè)置為true. 這意味著將注入瀏覽器的默認(rèn)樣式，以確保加載項(xiàng)的彈出樣式與瀏覽器的其余部分相似 。
這就是添加彈出窗口所需的全部?jī)?nèi)容 。轉(zhuǎn)到我們之前訪問(wèn)的臨時(shí)附加組件頁(yè)面，然后單擊附加組件的重新加載按鈕 。這將使檢查.json任何更改并應(yīng)用它們 。
完成后，您將能夠在工具欄菜單中看到擴(kuò)展程序的圖標(biāo) 。
如果你點(diǎn)擊它 ， 你可以看到我們剛剛創(chuàng)建的彈出頁(yè)面 。
我們的彈出窗口中還剩下兩件事情以使其功能齊全：使用存儲(chǔ)來(lái)獲取即將到來(lái)的警報(bào) ， 并使“添加警報(bào)”鏈接將用戶帶到選項(xiàng)頁(yè)面 。
使用存儲(chǔ)
瀏覽器擴(kuò)展中的存儲(chǔ)允許我們存儲(chǔ)與擴(kuò)展或用戶相關(guān)的數(shù)據(jù) ， 無(wú)論是在機(jī)器本地，還是基于他們的帳戶同步 。本地存儲(chǔ)將信息本地存儲(chǔ)在瀏覽器中，這意味著如果用戶使用來(lái)自另一臺(tái)機(jī)器的同一電子郵件登錄 ，則存儲(chǔ)的信息將不會(huì)出現(xiàn)在那里 。同步存儲(chǔ)存儲(chǔ)當(dāng)前登錄用戶的信息，這使得該信息在用戶登錄的任何地方都可用 。
同步存儲(chǔ)應(yīng)該用于用戶希望在任何地方都可用的某些設(shè)置，而本地存儲(chǔ)應(yīng)該用于僅與當(dāng)前瀏覽器安裝相關(guān)的信息或選項(xiàng) 。
在我們的示例中，我們將在用戶登錄的任何地方提供警報(bào)，因此我們將它們存儲(chǔ)在同步存儲(chǔ)中 。但是假設(shè)我們要添加一個(gè)“臨時(shí)禁用”選項(xiàng)，將警報(bào)靜音一段時(shí)間 。在這種情況下，使用本地存儲(chǔ)可能更合適 。
可以通過(guò)存儲(chǔ) API通過(guò)get和set方法輕松訪問(wèn)存儲(chǔ)，但首先，我們需要請(qǐng)求在我們的附加組件中使用的權(quán)限 。這可以在里面完成.json：
"permissions": ["storage"],
當(dāng)用戶安裝您的加載項(xiàng)時(shí)，他們將看到您需要哪些權(quán)限并需要他們接受才能安裝您的加載項(xiàng) 。
為了能夠在本地測(cè)試附加組件，我們還需要添加另一件事：顯式附加組件 ID以便能夠使用。為此 ， 也將其添加到.json：
"browser_specific_settings": {"gecko": {"id": "addon@example.com","strict_min_version": "42.0"}}
這只是為了能夠在本地測(cè)試它 。發(fā)布后，我們將從清單中刪除它 。
接下來(lái)我們要做的是創(chuàng)建一個(gè)新/js/popup.js文件，該文件將從存儲(chǔ)中獲取警報(bào)并顯示它們 。
要從存儲(chǔ)中獲取項(xiàng)目，您可以使用..sync.get或..local.get 。這取決于您是將信息存儲(chǔ)在同步存儲(chǔ)還是本地存儲(chǔ)中 。在我們的例子中 ， 我們將警報(bào)存儲(chǔ)在同步存儲(chǔ)中，因此我們將使用..sync.get. 需要注意的是，..sync.*和下的所有方法..local.*都具有相同的簽名并接受/返回相同的類型 。
..sync.get接受一個(gè)參數(shù)：一個(gè)字符串?dāng)?shù)組，這些字符串是我們正在檢索的數(shù)據(jù)的鍵 。這些鍵是在我們?cè)O(shè)置存儲(chǔ)時(shí)定義的（我們將在下一節(jié)中討論） 。此函數(shù)返回一個(gè)承諾，該承諾解析為包含我們?cè)诘谝粋€(gè)參數(shù)中指定的鍵及其值（如果存在）的對(duì)象 。
注意：如果您要使加載項(xiàng)與兼容，請(qǐng)務(wù)必查看“使加載項(xiàng)與兼容”部分 。
/js/popup.js使用以下內(nèi)容創(chuàng)建：
$(document).ready(() => {const listElement = $('#alarmsList');browser.storage.sync.get(['alarms']).then((result) => {if (result.alarms && result.alarms.length) {//loop over the alarms and display themresult.alarms.forEach((alarm) => {appendItem(alarm.content, alarm.time);});} else {//show no items availableappendItem('No alarms are available');}});function appendItem(content, badgeContent = null) {listElement.append(`

${content}${badgeContent ? `${badgeContent}` : ''}

`);}});
您還需要將此文件包含在popup.html：
...
當(dāng)文檔準(zhǔn)備好時(shí)，我們使用..sync.get來(lái)獲取用戶創(chuàng)建的警報(bào) 。然后我們檢查是否有任何警報(bào) 。如果有，我們將遍歷它們并使用 函數(shù)顯示它們，該函數(shù)只是將一個(gè) HTML 列表元素附加li到#. 如果沒(méi)有可用的警報(bào)，我們只是顯示“沒(méi)有可用的項(xiàng)目” 。
如果我們現(xiàn)在重新加載附加組件，您會(huì)注意到添加了一個(gè)新安裝的附加組件 。這是因?yàn)槲覀冊(cè)?json. 您可以刪除舊的以避免沖突 。
您會(huì)注意到我們的彈出窗口中沒(méi)有任何變化 ， 因?yàn)槲覀冞€沒(méi)有添加任何警報(bào) 。我們將在下一節(jié)中執(zhí)行此操作 。
添加選項(xiàng)頁(yè)面
要允許您的用戶自定義或編輯附加組件中的選項(xiàng)或設(shè)置，您可以創(chuàng)建一個(gè) HTML 頁(yè)面，其中包含這些選項(xiàng)以及設(shè)置或更改它們背后的邏輯 。然后在.json文件中鏈接到它 。
在我們的附加組件中，我們將使用“選項(xiàng)”頁(yè)面來(lái)允許用戶創(chuàng)建警報(bào) 。讓我們首先創(chuàng)建文件.html 。您可以在附加項(xiàng)目目錄中的任何位置創(chuàng)建它 。我們將在項(xiàng)目的根目錄中創(chuàng)建它，內(nèi)容如下：
OptionsAdd AlarmAlarm NameTimeAdd a New Alarm
在這里 ， 我們只顯示一個(gè)包含兩個(gè)輸入字段的表單：“Alarm Name” ， 這是發(fā)送通知時(shí)在警報(bào)中顯示的文本，以及“Time” ， 即設(shè)置鬧鐘的時(shí)間 。
我們需要?jiǎng)?chuàng)建/js/.js，它將偵聽(tīng)同步存儲(chǔ)中和 設(shè)置的事件，向數(shù)組添加一個(gè)新警報(bào) 。
與我們使用該get方法類似 ， 要設(shè)置存儲(chǔ)，我們可以使用..sync.set或..local.set ， 具體取決于我們是在本地存儲(chǔ)數(shù)據(jù)還是在所有登錄之間同步實(shí)例 。由于我們將警報(bào)存儲(chǔ)在 中sync，因此我們將使用..sync.set 。
該set方法采用一個(gè)參數(shù)，該參數(shù)是鍵和值的對(duì)象 。關(guān)鍵是我們稍后用來(lái)檢索值的東西，就像我們之前對(duì)get.
/js/.js使用以下內(nèi)容創(chuàng)建：
$(document).ready(() => {const nameElm = $('#name');const timeElm = $('#time');const formElm = $('form');formElm.on('submit', () => {$('.alert').remove(); //remove previous success alerts, if any//get existing alarmsbrowser.storage.sync.get(['alarms']).then((result) => {let alarms = result.alarms;const alarmName = nameElm.val().trim() + '_' + (Math.random() * 100);if (!alarms) {alarms = [];}alarms.push({content: nameElm.val().trim(),time: timeElm.val(),alarmName});//set alarms in the storagebrowser.storage.sync.set({alarms}).then(() => {//TODO schedule notificationformElm.prepend('Alarm added successfully');nameElm.val('');timeElm.val('');});});return false; //disable default form submit action});});
在提交表單時(shí) ， 我們首先檢索存儲(chǔ)的警報(bào)（如果有） 。然后 ， 我們將通過(guò)表單創(chuàng)建的新警報(bào)推送到數(shù)組 。注意我們是如何創(chuàng)建一個(gè)變量的 。我們將使用這個(gè)變量來(lái)創(chuàng)建一個(gè)獨(dú)特的警報(bào)，然后在用戶刪除它時(shí)取消它 。最后，我們使用..sync.set來(lái)設(shè)置新數(shù)組 。
您可能還注意到我們添加了一條TODO評(píng)論，我們將在下一部分中安排通知 。
我們的選項(xiàng)頁(yè)面現(xiàn)已準(zhǔn)備就緒 。要使其可用，我們首先需要將以下內(nèi)容添加到.json：
"options_ui": {"page": "options.html","browser_style": false}
這會(huì)告訴在哪里可以找到我們的選項(xiàng)頁(yè)面 。我們還設(shè)置為，false因?yàn)槲覀儾幌Ｍ臉邮礁采w樣式 。
其次 ， 我們現(xiàn)在將使彈出窗口中的鏈接將用戶帶到選項(xiàng)頁(yè)面 。為此，我們?cè)诟郊拥?的新事件偵聽(tīng)器中使用方法..()# 。我們將添加以下內(nèi)容/js/popup.js：
$(document).ready(() => {...// New code here$('#optionsLink').on('click', () => {browser.runtime.openOptionsPage();});function appendItem(content, badgeContent = null) { ... }});
現(xiàn)在，當(dāng)用戶單擊“添加警報(bào)”鏈接時(shí)，它會(huì)將他們帶到“選項(xiàng)”頁(yè)面 。
轉(zhuǎn)到臨時(shí)附加組件頁(yè)面，然后單擊重新加載按鈕 。現(xiàn)在，我們的選項(xiàng)頁(yè)面將被注冊(cè) 。
讓我們來(lái)測(cè)試一下 。打開(kāi)彈出窗口，然后單擊“添加警報(bào)” 。它應(yīng)該會(huì)帶您到附加組件頁(yè)面中的“首選項(xiàng)”選項(xiàng)卡，內(nèi)容將是我們?cè)?html頁(yè)面中添加的內(nèi)容 。
現(xiàn)在，嘗試添加任何名稱和時(shí)間的測(cè)試警報(bào)，然后單擊“添加警報(bào)” 。之后您應(yīng)該能夠在彈出窗口中看到它 。
我們還需要對(duì) 做一個(gè)改動(dòng)/js/.js ， 就是顯示時(shí)間晚于當(dāng)前時(shí)間的鬧鐘 。將調(diào)用更改..sync.get為以下內(nèi)容：
browser.storage.sync.get(['alarms']).then((result) => {if (result.hasOwnProperty('alarms') && result.alarms) {//get current timeconst minutes = (new Date).getMinutes().toString().padStart(2, '0');const hours = (new Date).getHours().toString().padStart(2, '0');const now = new Date('1970-01-01T' + hours + ':' + minutes + 'Z').getTime();//loop over the alarms and display themresult.alarms.forEach((alarm) => {const alarmTime = new Date('1970-01-01T' + alarm.time + 'Z').getTime();if (alarmTime > now) {appendItem(alarm.content, alarm.time);}});} else {//show no items availableappendItem('No alarms are available');}});
這會(huì)檢查每個(gè)警報(bào)的時(shí)間是否大于當(dāng)前時(shí)間，然后顯示它 。我們將時(shí)間格式化的原因'1970-01-01T' + alarm.time + 'Z'是因?yàn)槲覀冋趧?chuàng)建獨(dú)立于日期的警報(bào) 。這只是為了使教程更簡(jiǎn)單 。在計(jì)算當(dāng)前時(shí)間時(shí)，當(dāng)它們是一位數(shù)時(shí)，我們還會(huì)填充hours并使用零，因?yàn)樗璧母袷綄?duì)于new Date兩個(gè)數(shù)字都應(yīng)該有兩位數(shù) 。
如果您現(xiàn)在查看 ， 您會(huì)注意到我們添加的上一個(gè)鬧鐘是否顯示取決于其時(shí)間 。您還可以在其他時(shí)間測(cè)試添加新鬧鐘以查看它是否出現(xiàn)在彈出窗口中 。
調(diào)度通知
要發(fā)送通知，我們需要使用 API和 API 。警報(bào) API 允許我們安排在特定時(shí)間觸發(fā)的“警報(bào)” 。然后我們可以為事件添加一個(gè)事件偵聽(tīng)器，并在那時(shí)使用API 發(fā)送通知 。
要使用API 和API，我們需要為每個(gè) in 添加必要的權(quán)限.json，就像我們之前對(duì)API 所做的一樣：
"permissions": ["storage","alarms","notifications"],
接下來(lái)我們要做的是用TODO在/js/.js.
要?jiǎng)?chuàng)建警報(bào)，我們使用..函數(shù)，向其傳遞兩個(gè)參數(shù) 。第一個(gè)是警報(bào)的名稱 。這允許我們?cè)诟郊咏M件中擁有不同類型的警報(bào)，并根據(jù)名稱采取不同的行動(dòng) 。第二個(gè)是選項(xiàng)對(duì)象：
所有這些選項(xiàng)都是可選的 。如果你沒(méi)有通過(guò)它們中的任何一個(gè) ， 警報(bào)將在創(chuàng)建后立即觸發(fā)一次 。如果您需要在指定的時(shí)間觸發(fā)一次警報(bào)，只需傳遞when要觸發(fā)的時(shí)間即可 。如果您想在指定的分鐘數(shù)后觸發(fā)一次警報(bào)，則只需通過(guò). 如果您想在指定的分鐘數(shù)內(nèi)重復(fù)觸發(fā)警報(bào) ， 則只需通過(guò). 除非通過(guò)，否則警報(bào)只會(huì)觸發(fā)一次 。
在我們的插件中，我們需要鬧鐘每天在用戶創(chuàng)建鬧鐘時(shí)輸入的指定時(shí)間觸發(fā)一次 。因此，我們將使用的組合when和 。
將TODO注釋替換/js/.js為以下內(nèi)容：
//create a new alarmconst currentDate = new Date();const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');const currentDay = currentDate.getDate().toString().padStart(2, '0');//same as before, add 0 to month and day if they're less than 10browser.alarms.create(alarmName, {when: new Date(currentDate.getFullYear() + '-' + currentMonth + '-' + currentDay + 'T' + timeElm.val()).getTime(),periodInMinutes: 1440,});
作為第一個(gè)參數(shù) ， 我們傳遞我們之前創(chuàng)建的唯一警報(bào)名稱 。附加組件中的警報(bào)名稱應(yīng)該是唯一的，因?yàn)槿绻皇牵绿砑拥木瘓?bào)名稱將覆蓋具有相同名稱的前一個(gè)警報(bào)名稱 。在對(duì)象中，我們傳遞用戶在when屬性中選擇的時(shí)間，因?yàn)槲覀儌鬟f的是1440，因?yàn)檫@是一天中的分鐘數(shù) 。
和以前一樣 ， 0如果月份和日期小于一位數(shù)，我們也會(huì)填充它們以確保它們是兩位數(shù) ， 因?yàn)檫@是new Date.
這意味著警報(bào)將在用戶每天輸入的指定時(shí)間觸發(fā)一次 。
現(xiàn)在我們已經(jīng)成功創(chuàng)建了警報(bào)，接下來(lái)我們需要做的是監(jiān)聽(tīng)這些警報(bào)何時(shí)觸發(fā)，當(dāng)它們觸發(fā)時(shí)，向用戶發(fā)送通知 。為此，我們需要使用后臺(tái)腳本 。
后臺(tái)腳本
加載項(xiàng)、彈出窗口、選項(xiàng)頁(yè)面或任何其他頁(yè)面僅在我們打開(kāi)它們時(shí)才處于活動(dòng)狀態(tài) 。這意味著如果我們?cè)趶棾龃翱诨蛉魏纹渌?yè)面內(nèi)監(jiān)聽(tīng)事件，監(jiān)聽(tīng)器只會(huì)在我們打開(kāi)它們后工作 。在一天中的不同時(shí)間收聽(tīng)鬧鐘時(shí)api版本菜單使用中，這不會(huì)有幫助 。
為此，我們需要一個(gè)后臺(tái)腳本 。后臺(tái)腳本始終在后臺(tái)運(yùn)行，即使加載項(xiàng)的彈出窗口、選項(xiàng)頁(yè)面或任何其他頁(yè)面未打開(kāi)也是如此 。因此，在后臺(tái)腳本中，我們可以向任何事件添加偵聽(tīng)器并確保它們相應(yīng)地工作 。
要添加后臺(tái)腳本，我們首先需要將其添加到.json：
"background": {"scripts": ["assets/js/background.js"]}
一旦我們創(chuàng)建/js/.js并重新加載擴(kuò)展 ， 此腳本將始終在后臺(tái)運(yùn)行 。
我們會(huì)監(jiān)聽(tīng).js警報(bào)響起 。為此，我們需要使用… ， 它采用一個(gè)函數(shù)，該函數(shù)將在每次警報(bào)觸發(fā)時(shí)執(zhí)行 。該函數(shù)有一個(gè)對(duì)象作為參數(shù)，其中包含有關(guān)觸發(fā)警報(bào)的信息 。
/js/.js使用以下內(nèi)容創(chuàng)建：
browser.alarms.onAlarm.addListener((alarmInfo) => {const alarmName = alarmInfo.name.split('_')[0];console.log(alarmName);//TODO send notification});
我們還通過(guò)刪除我們附加到它的隨機(jī)整數(shù)來(lái)檢索警報(bào)名稱 。然后 ， 我們將發(fā)送內(nèi)容為 的通知 。現(xiàn)在 ， 我們剛剛TODO發(fā)表了評(píng)論 。我們還添加了.log用于測(cè)試目的 。
一旦我們重新加載擴(kuò)展程序，這個(gè)后臺(tái)腳本將開(kāi)始工作并監(jiān)聽(tīng)警報(bào) 。讓我們測(cè)試一下 。重新加載擴(kuò)展程序，然后轉(zhuǎn)到選項(xiàng)頁(yè)面并添加一個(gè)警報(bào)，該警報(bào)將在一分鐘后響起 。接下來(lái)，在臨時(shí)附加組件頁(yè)面上，單擊附加組件的檢查按鈕 。這將打開(kāi)一個(gè)新窗口，您可以在其中看到控制臺(tái) 。如果等到警報(bào)時(shí)間，您將能夠在控制臺(tái)中看到警報(bào)的名稱 。那是因?yàn)槲覀儺?dāng)前正在偵聽(tīng)警報(bào)并在控制臺(tái)中記錄其名稱 。
現(xiàn)在我們有了一個(gè)可以工作的后臺(tái)腳本！下一步是在觸發(fā)警報(bào)時(shí)發(fā)送通知 。
發(fā)送通知
要?jiǎng)?chuàng)建和發(fā)送通知 ， 我們使用..方法 。此方法以及API 中的所有方法 ， 只有在.json我們之前已經(jīng)添加的 中添加權(quán)限后才能訪問(wèn) 。
.. 接受兩個(gè)參數(shù)：
id：標(biāo)識(shí)通知的字符串 。如果您以后需要更新通知或清除通知 ， 這會(huì)很有幫助 。如果另一個(gè)通知具有相同的id ， 則舊的將被新的替換 。如果省略此參數(shù)，id將生成一個(gè) 。：通知選項(xiàng)的對(duì)象 。此對(duì)象具有三個(gè)必需屬性：type、title、 。基于type，將需要一些其他選項(xiàng) 。允許的類型是basic，它只顯示擴(kuò)展圖標(biāo)、標(biāo)題和消息；image，在通知中顯示圖像；list，顯示項(xiàng)目列表，盡管這主要僅適用于 macOS；和，顯示進(jìn)度條 。
目前，火狐只支持basic類型，與性質(zhì)type，title，，和，任選地，，指定該圖標(biāo)的顯示 。
在 中/.js，我們將用TODO以下內(nèi)容替換注釋：
browser.alarms.onAlarm.addListener((alarmInfo) => {const alarmName = alarmInfo.name.split('_')[0];browser.notifications.create({type: 'basic',title: alarmName,message: 'The alarm you created'});});
對(duì)于標(biāo)題，我們將顯示用戶在創(chuàng)建警報(bào)時(shí)在表單中輸入的消息，我們只是添加了一個(gè)描述性的.
返回臨時(shí)附加組件頁(yè)面并重新加載擴(kuò)展程序，然后對(duì)其進(jìn)行測(cè)試 。創(chuàng)建帶有關(guān)閉時(shí)間的鬧鐘，并檢查您收到的通知 。
如果您沒(méi)有收到任何通知并且您使用的是 macOS，請(qǐng)確保允許來(lái)自的通知 。
刪除通知
我們將添加的最后一個(gè)功能是刪除通知 。我們將允許用戶刪除他們從彈出窗口看到的通知，并使用警報(bào)名稱取消已刪除通知的警報(bào) 。
在開(kāi)始之前，我們將使用 中的垃圾桶圖標(biāo) 。您可以從那里下載它，也可以從本教程的存儲(chǔ)庫(kù)中獲取它 。應(yīng)該在//trash.svg.
我們需要進(jìn)行更改以/js/popup.js在每個(gè)鬧鐘的時(shí)間旁邊顯示一個(gè)垃圾箱按鈕 。我們還將在存儲(chǔ)中的數(shù)組中使用警報(bào)的索引作為元素的 ID，以便以后可以輕松訪問(wèn)它 。
我們將為被調(diào)用添加一個(gè)新的可選參數(shù)id并顯示一個(gè)新按鈕：
function appendItem (content, badgeContent = null, id = null) {listElement.append(`

${content}${badgeContent ? `${badgeContent}` : ''}

`);}
然后 ， 在循環(huán)內(nèi)，我們將添加index到參數(shù)列表中：
result.alarms.forEach((alarm, index) => {const alarmTime = new Date('1970-01-01T' + alarm.time + 'Z').getTime();if (alarmTime > now) {appendItem(alarm.content, alarm.time, index);}});
接下來(lái) ， 我們將添加一個(gè)click事件偵聽(tīng)器.trash-btn，首先從其父級(jí)檢索警報(bào)的索引：
$('body').on('click', '.trash-btn', function () {const parent = $(this).parents('.alarm-item');const parentId = parent.attr('id');const alarmIndex = parentId.split('_')[1];//TODO delete alarm from alarms array in storage});
之后，我們將從存儲(chǔ)中獲取數(shù)組，然后使用刪除索引處的警報(bào)并再次在存儲(chǔ)中設(shè)置數(shù)組：
//get alarms from storagebrowser.storage.sync.get(['alarms']).then((result) => {let alarms = [];let alarmName = '';if (result.alarms && result.alarms.length > alarmIndex) {alarmName = result.alarms[alarmIndex].alarmName;result.alarms.splice(alarmIndex, 1);}browser.storage.sync.set({alarms}).then(() => {//TODO cancel the alarm});});
然后 ， 我們需要取消鬧鐘，以免它稍后響起 。為此，我們將使用..clear，它將警報(bào)名稱作為參數(shù)來(lái)取消它 。最后，我們將從彈出窗口中刪除警報(bào)元素：
//remove alarm by namebrowser.alarms.clear(alarmName);//remove alarm item from listparent.remove();
有了這個(gè)，我們添加了一個(gè)刪除功能，可以從存儲(chǔ)中刪除警報(bào)，并取消它在后臺(tái)關(guān)閉 。
讓我們?yōu)閯倓偺砑拥陌粹o添加一些樣式 。創(chuàng)建/css/popup.css包含以下內(nèi)容的文件：
.trash-btn {background-color: transparent;border: none;}.trash-btn img {width: 15px;height: 15px;}
然后將此樣式表添加到popup.html：

現(xiàn)在檢查彈出窗口 。它應(yīng)該是這樣的：
嘗試添加應(yīng)該在接下來(lái)的幾分鐘內(nèi)發(fā)送通知的鬧鐘 。然后將其刪除 。在您安排的時(shí)間不應(yīng)發(fā)出警報(bào) 。
就是這樣！我們創(chuàng)建了一個(gè)擴(kuò)展，用于在sync存儲(chǔ)中存儲(chǔ)用戶的信息，然后我們學(xué)習(xí)了如何創(chuàng)建以特定時(shí)間間隔觸發(fā)的警報(bào) 。然后我們創(chuàng)建了一個(gè)后臺(tái)腳本來(lái)偵聽(tīng)警報(bào)觸發(fā)，最后我們學(xué)習(xí)了如何在偵聽(tīng)警報(bào)觸發(fā)后向用戶發(fā)送通知 。
創(chuàng)建附加組件生命周期的下一步是在的 Hub上發(fā)布它 。
發(fā)布插件
現(xiàn)在我們已準(zhǔn)備好發(fā)布附加組件，我們可以刪除 中的tings密鑰.json，因此請(qǐng)務(wù)必先執(zhí)行此操作 。
您需要登錄您的帳戶，或創(chuàng)建一個(gè)新帳戶 。你可以在這里做到這一點(diǎn) 。
登錄后，您可以看到“我的附加組件”部分 。單擊右下角的提交新加載項(xiàng)按鈕 。
然后將開(kāi)始提交新附加組件的過(guò)程 。首先會(huì)詢問(wèn)您是在附加組件管理器上發(fā)布附加組件，還是自行分發(fā) 。選中第一個(gè)默認(rèn)選項(xiàng)，然后單擊 。
接下來(lái)，系統(tǒng)會(huì)要求您上傳擴(kuò)展程序 。為此，請(qǐng)轉(zhuǎn)到您在其中創(chuàng)建附加組件的目錄，并創(chuàng)建一個(gè)包含所有內(nèi)容的壓縮 ZIP 文件 。確保加載項(xiàng)的根目錄是 ZIP 文件的根目錄，這意味著它.json應(yīng)該在 ZIP 文件的根目錄中 。然后上傳該 ZIP 文件 。您還可以選擇讓插件可用于。
注意：如果您收到錯(cuò)誤“發(fā)現(xiàn)重復(fù)的附加組件 ID”，請(qǐng)確保您tings已從.json.
文件上傳且沒(méi)有錯(cuò)誤后，點(diǎn)擊 。
在下一步中，您將被要求指定您的附加組件是否使用任何編譯器或壓縮器或任何對(duì)附加組件代碼進(jìn)行任何處理的工具 。這背后的原因是將需要您提交原始代碼以供審核 。由于我們的附加組件不使用任何這些工具，只需選中No并單擊 。
在最后一步中，系統(tǒng)會(huì)要求您輸入有關(guān)附加組件的一些信息 。任何想要安裝您的附加組件的用戶都會(huì)看到此信息 ， 因此請(qǐng)確保使其盡可能清晰和具有描述性 。輸入加載項(xiàng)的名稱、描述、類別等 。完成后，單擊。如果您尚未準(zhǔn)備好填寫某些信息，請(qǐng)不要擔(dān)心，因?yàn)槟梢陨院髮?duì)其進(jìn)行編輯 。
就是這樣！單擊后，您的附加組件將等待審核，這不會(huì)花費(fèi)很長(zhǎng)時(shí)間 。審核過(guò)程最多可能需要一天時(shí)間 。一旦獲得批準(zhǔn)，您將收到一封電子郵件通知 ， 然后您可以在商店中查看該插件 。您還可以轉(zhuǎn)到附加組件的信息頁(yè)面并添加或編輯任何信息 ， 例如其說(shuō)明、圖像等 。
更新附加組件也很容易 。您只需上傳更新的版本，即可立即使用！這使得在上發(fā)布附加組件比大多數(shù)其他瀏覽器更容易、更快 。
使附加組件與兼容
為了使我們剛剛創(chuàng)建的擴(kuò)展與兼容，我們需要進(jìn)行以下修改：
替換所有出現(xiàn)的.*用.* 。在上，它的所有 API 都使用回調(diào)而不是返回承諾 。這意味著我們不需要在我們的代碼中使用，而是需要傳遞一個(gè)回調(diào)函數(shù)作為最后一個(gè)參數(shù) 。
進(jìn)行這些更改的一個(gè)示例是/js/.js. 我們使用以下代碼來(lái)獲取警報(bào)并顯示它們：
browser.storage.sync.get(['alarms']).then((result) => {//...});
我們將用以下代碼替換此代碼：
chrome.storage.sync.get(['alarms'], (result) => {//...});
就是這樣 。我們只是將其余的代碼移到回調(diào)函數(shù)中 。
結(jié)論
在本教程中，我們討論了如何創(chuàng)建具有基本和必要功能的附加組件，例如使用存儲(chǔ)、發(fā)送通知、創(chuàng)建后臺(tái)腳本等 。了解如何完成所有這些可以幫助您創(chuàng)建具有許多功能的附加組件 。開(kāi)始創(chuàng)造一些很棒的東西！
【在 Firefox 中加載附加組件】本文到此結(jié)束，希望對(duì)大家有所幫助 。

• 代碼中的注釋
• 中國(guó)大褲衩建筑 ?最失敗的建筑
• ?最能吸引女生的朋友圈，如何在朋友圈吸引女生
• 陽(yáng)關(guān)在哪里
• 哪種動(dòng)物沒(méi)有方向感
• 二月二的習(xí)俗
• 在家自制肥皂簡(jiǎn)單方法
• 知了的特征是什么
• pp塑料有毒嗎
• 上海人心中永遠(yuǎn)的 ?李九松個(gè)人資料簡(jiǎn)介