` untuk pelanjutan penyemak imbas anda. Mulai sekarang, anda perlu bekerja dalam fail `/src/index.js` dan membina pelanjutan anda sedikit demi sedikit. Rujuk [pelajaran sebelumnya](../../about-browser/README.md) untuk menyiapkan projek anda dan pada proses pembinaan.
+Pada masa ini anda telah membina HTML untuk bentuk dan hasilnya `
` untuk pelanjutan penyemak imbas anda. Mulai sekarang, anda perlu bekerja dalam fail `/src/index.js` dan membina pelanjutan anda sedikit demi sedikit. Rujuk [pelajaran sebelumnya](../../1-about-browsers/translations/README.ms.md) untuk menyiapkan projek anda dan pada proses pembinaan.
Bekerja dalam fail `index.js` anda, mulakan dengan membuat beberapa pemboleh ubah `const` untuk menahan nilai yang berkaitan dengan pelbagai bidang:
@@ -94,7 +94,7 @@ Dalam fungsi ini, terdapat beberapa logik yang menarik. Bacalah, anda dapat meli
- sembunyikan borang
- tunjukkan butang set semula
-Sebelum meneruskan, berguna untuk mengetahui konsep yang sangat penting yang terdapat dalam penyemak imbas: [LocalStorage] https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage adalah cara yang berguna untuk menyimpan rentetan dalam penyemak imbas sebagai pasangan `kunci-nilai` . Jenis storan web ini dapat dimanipulasi oleh JavaScript untuk menguruskan data di penyemak imbas. LocalStorage tidak akan habis masa berlakunya, sementara SessionStorage, jenis penyimpanan web lain, akan dihapus apabila penyemak imbas ditutup. Pelbagai jenis storan mempunyai kebaikan dan keburukan terhadap penggunaannya.
+Sebelum meneruskan, berguna untuk mengetahui konsep yang sangat penting yang terdapat dalam penyemak imbas: [LocalStorage] https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage adalah cara yang berguna untuk menyimpan rentetan dalam penyemak imbas sebagai pasangan `kunci-nilai` . Jenis storan web ini dapat dimanipulasi oleh JavaScript untuk menguruskan data di penyemak imbas. LocalStorage tidak akan habis masa berlakunya, sementara SessionStorage, jenis penyimpanan web lain, akan dihapus apabila penyemak imbas ditutup. Pelbagai jenis storan mempunyai kebaikan dan keburukan terhadap penggunaannya.
> Catatan - pelanjutan penyemak imbas anda mempunyai storan tempatan sendiri; tetingkap penyemak imbas utama adalah contoh yang berbeza dan berkelakuan secara berasingan.
@@ -143,7 +143,7 @@ Sebelum melangkah lebih jauh, kita harus membincangkan API. API, atau [Applicati
✅ Istilah 'REST' adalah singkatan dari 'Representational State Transfer' dan ciri menggunakan URL yang dikonfigurasikan dengan pelbagai untuk mengambil data. Lakukan sedikit kajian mengenai pelbagai jenis API yang tersedia untuk pembangun. Format apa yang menarik bagi anda?
-Terdapat perkara penting yang perlu diperhatikan mengenai fungsi ini. Perhatikan dahulu kata kunci [`async` kata kunci](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Menulis fungsi anda supaya mereka berjalan secara tidak segerak bermakna mereka menunggu tindakan, seperti data yang dikembalikan, diselesaikan sebelum meneruskan.
+Terdapat perkara penting yang perlu diperhatikan mengenai fungsi ini. Perhatikan dahulu kata kunci [`async` kata kunci](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Menulis fungsi anda supaya mereka berjalan secara tidak segerak bermakna mereka menunggu tindakan, seperti data yang dikembalikan, diselesaikan sebelum meneruskan.
Inilah video ringkas mengenai `async`:
@@ -198,7 +198,7 @@ Ini adalah fungsi besar. Apa yang berlaku di sini?
- setelah API bertindak balas, anda menetapkan pelbagai elemen data responsnya ke bahagian-bahagian skrin yang anda siapkan untuk menunjukkan data ini.
- jika ada ralat, atau jika tidak ada hasil, anda akan menunjukkan mesej ralat.
-✅ Menggunakan corak pengaturcaraan tak segerak adalah alat lain yang sangat berguna dalam kotak alat anda. Baca untuk[mengenai pelbagai cara](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) anda boleh mengkonfigurasi jenis kod ini.
+✅ Menggunakan corak pengaturcaraan tak segerak adalah alat lain yang sangat berguna dalam kotak alat anda. Baca untuk[mengenai pelbagai cara](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) anda boleh mengkonfigurasi jenis kod ini.
Tahniah! Sekiranya anda membina pelanjutan anda (`npm run build`) dan menyegarkannya di panel pelanjutan anda, anda mempunyai sambungan yang berfungsi! Satu-satunya perkara yang tidak berfungsi ialah ikon, dan anda akan memperbaikinya pada pelajaran seterusnya.
@@ -206,7 +206,7 @@ Tahniah! Sekiranya anda membina pelanjutan anda (`npm run build`) dan menyegarka
## 🚀 Cabaran
-Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pilih API web dan teliti secara mendalam apa yang ditawarkannya. Sebagai contoh, perhatikan API yang tersedia dalam penyemak imbas seperti [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Apa yang menjadikan API hebat pada pendapat anda?
+Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pilih API web dan teliti secara mendalam apa yang ditawarkannya. Sebagai contoh, perhatikan API yang tersedia dalam penyemak imbas seperti [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Apa yang menjadikan API hebat pada pendapat anda?
## Kuiz Pasca Kuliah
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md
new file mode 100644
index 00000000..c10d9d61
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md
@@ -0,0 +1,224 @@
+# 瀏覽器擴充功能專案 Part 1：呼叫 API，使用 Local Storage
+
+## 課前測驗
+
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25?loc=zh_tw)
+
+### 大綱
+
+在這堂課中，藉由傳遞你的擴充功能表單並顯示結果來呼叫 API。此外，你會了解如何儲存資料到瀏覽器的 Local Storage 中給未來使用。
+
+✅ 請參考下列程式碼段，加入程式碼到檔案適當的位置
+
+### 設定控制擴充功能的元素：
+
+現在你有已建好的 HTML 表單與結果區 `
`。接下來，你需要在 `/src/index.js` 做一些處理，一點一點地構築出你的擴充功能。參考[前一堂課程](../../1-about-browsers/translations/README.zh-tw.md)來設置你的專案與了解建制過程。
+
+處理 `index.js` 檔案，建立一些 `const` 變數來儲存不同用途的數值：
+
+```JavaScript
+// 表單區域
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// 結果區域
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+這些區域會被 CSS class 給參考，它們在前一堂課中已經被你設定好了。
+
+### 新增監聽者
+
+接下來，新增提交與重置表單的事件監聽者與按鈕，讓使用者能提交表單或是點擊重置鈕時，事件會發生。新增初始化呼叫處理到應用中，在檔案的最下方新增：
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ 注意提交事件與點擊事件的寫法，事件是如何被傳入到 handleSubmit 或是 reset 函式中的。你能在不改變功能的情況下，改寫成較長的格式嗎？你比較喜歡哪一種寫法？
+
+### 建立 init() 函式與 reset() 函式：
+
+現在你需要建立函式 init()，處理應用程式的初始化部分：
+
+```JavaScript
+function init() {
+ //如果任何東西存在 localStorage 中，取出來
+ const storedApiKey = localStorage.getItem('apiKey');
+ const storedRegion = localStorage.getItem('regionName');
+
+ //設定 icon 為通用綠色
+ //todo
+
+ if (storedApiKey === null || storedRegion === null) {
+ //如果沒有 keys，顯示表單
+ form.style.display = 'block';
+ results.style.display = 'none';
+ loading.style.display = 'none';
+ clearBtn.style.display = 'none';
+ errors.textContent = '';
+ } else {
+ //localStorage 有 saved keys/regions，顯示結果
+ displayCarbonUsage(storedApiKey, storedRegion);
+ results.style.display = 'none';
+ form.style.display = 'none';
+ clearBtn.style.display = 'block';
+ }
+};
+
+function reset(e) {
+ e.preventDefault();
+ //只清除 local storage 國家區域代碼
+ localStorage.removeItem('regionName');
+ init();
+}
+
+```
+在函式中，有一些有趣的邏輯。閱讀它們，你看出發生什麼事嗎？
+
+- 兩個 `const` 被設定為檢查用戶是否有儲存 APIKey 與國家區域代碼在 local storage 中。
+- 若兩者皆為 null，將造型設為 'block' 來顯示表單
+- 隱藏 results、loading 與 clearBtn，設定 error 文字為空字串
+- 若存在 key 與代碼，開始新的流程：
+ - 呼叫 API 取得碳排放資訊
+ - 隱藏結果區域
+ - 隱藏表單
+ - 顯示重置按鈕
+
+在下一步之前，你可以學習一些瀏覽器的重要成員：[LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。 LocalStorage 是瀏覽器儲存字串的有效方法，以 `key-value` 配對兩兩一組。這種儲存型態可以被 JavaScript 管理並控制瀏覽器的資料。LocalStorage 沒有期限，而另一款網頁儲存 SessionStorage 會在瀏覽器關閉時清除內容。不同的儲存方式有各自的優缺點。
+
+> 注意 ── 你的瀏覽器擴充套件有自己的 local storage。主瀏覽器視窗是不同的個體，兩者會做各自的行為。
+
+你設定 APIKey 紀錄字串數值。你可以在 Edge 瀏覽器上「檢查」一個網頁 (右鍵瀏覽器來檢查)，在 Applications 標籤中觀察儲存區的使用情況。
+
+
+
+✅ 想想那些情況你不需要儲存資料到 LocalStorage 中。總體而言，將 API Keys 放在 LocalStorage 是個很糟糕的想法！你知道為什麼嗎？在我們的例子中，我們的應用程式是以教學為目的，並不會發布在應用程式商店中，所以我們選擇此中處理方式。
+
+你可以發現網頁 API 能處理 LocalStorage，使用 `getItem()`、`setItem()` 或是 `removeItem()`。它們廣泛地支援不同的瀏覽器。
+
+在建立函式 `init()` 中的函式 `displayCarbonUsage()` 之前，我們先建立表單提交初始化的功能。
+
+### 處理表單提交
+
+建立函式 `handleSubmit`，接收事件參數 `(e)`。終止網頁移轉的事件(在本例子中，我們終止瀏覽器刷新的處理)並呼叫新的函式 `setUpUser`，傳送參數 `apiKey.value` 與 `region.value`。藉由這個方式，你能將兩個初始表單的數值正確地移轉到適合的位置。
+
+```JavaScript
+function handleSubmit(e) {
+ e.preventDefault();
+ setUpUser(apiKey.value, region.value);
+}
+```
+✅ 刷新你的記憶 ── 上堂課中的 HTML 檔案開頭有兩個輸入區域，它們的 `values` 被存到 `const` 中，並且被定為 `required`，表示瀏覽器禁止使用者輸入空值。
+
+### 設定使用者
+
+來到函式 `setUpUser`，這裡你能找到 apiKey 與 regionName 被存到 Local Storage 中。新增函式：
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+ localStorage.setItem('apiKey', apiKey);
+ localStorage.setItem('regionName', regionName);
+ loading.style.display = 'block';
+ errors.textContent = '';
+ clearBtn.style.display = 'block';
+ //建立初始化呼叫
+ displayCarbonUsage(apiKey, regionName);
+}
+```
+這個函式設定當 API 被呼叫時，顯示讀取訊息。到這裡，你即將建立這個擴充功能專案最重要的函式！
+
+### 顯示碳排放量
+
+最後，是時候查詢 API 了！
+
+在前往下一步前，我們先來討論何謂 API。API，[Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)，是網頁開發者工具箱內最重要的成員。它們提供程式標準的互動模式與溝通介面，舉例來說，如果你建立一個需要存取資料庫的網頁，資料庫方可能就有人建立了 API 供你使用。API 有各式各樣的種類，最普遍使用的為[REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)。
+
+✅ 'REST' 全名為 'Representational State Transfer'，提供各式各樣 URL 形式來抓取資料。對網路開發者的 API 種類做一點研究，什麼形式的 API 最吸引你？
+
+這條函式中有一個重要到值得紀錄的事情。第一點為[關鍵字 `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)。讓你的函式非同步地執行，在行為完成前做等待，譬如資料被回傳。
+
+這裡有一個簡短的影片介紹 `async`：
+
+[](https://youtube.com/watch?v=YwmlRkrxvkk "Async 與 Await 處理 promises 物件")
+
+> 點擊上方圖片以觀賞關於 async/await 的影片。
+
+建立新的函式來詢問 C02Signal 的 API：
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+ try {
+ await axios
+ .get('https://api.co2signal.com/v1/latest', {
+ params: {
+ countryCode: region,
+ },
+ headers: {
+ 'auth-token': apiKey,
+ },
+ })
+ .then((response) => {
+ let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+ //calculateColor(CO2);
+
+ loading.style.display = 'none';
+ form.style.display = 'none';
+ myregion.textContent = region;
+ usage.textContent =
+ Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+ fossilfuel.textContent =
+ response.data.data.fossilFuelPercentage.toFixed(2) +
+ '% (percentage of fossil fuels used to generate electricity)';
+ results.style.display = 'block';
+ });
+ } catch (error) {
+ console.log(error);
+ loading.style.display = 'none';
+ results.style.display = 'none';
+ errors.textContent = 'Sorry, we have no data for the region you have requested.';
+ }
+}
+```
+
+這是一個挺大的函式，發生了什麼事？
+
+- 遵循程式實踐過程，你使用關鍵字 `async` 讓函式非同步地作行為。函式內的 `try/catch` 區塊會在 API 回傳資料時回傳 promise 物件。因為我們無法控制 API 會多快地回應訊息(甚至無法回應訊息！)，你需要處理這種不確定性的時序關係。
+- 藉由提供 API Key 訪問 co2signal API 以取得你的地區資料。要使用這把鑰匙，你必須在網頁標頭中新增認證參數。
+- 當 API 回應時，你將各種物件填入回傳的數值，並輸出到畫面上中。
+- 如果發生錯誤，或沒有結果產生，輸出錯誤訊息。
+
+✅ 非同步程式設計是一種實用的工具。閱讀[更多使用方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)設定非同步程式的程式碼。
+
+恭喜你！當你建制你的專案(`npm run build`)並在瀏覽器上刷新功能，你有個可以運作的應用套件了！現在只差圖示無法正常顯示，我們會在下一堂課中修正它。
+
+---
+
+## 🚀 挑戰
+
+我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？
+
+## 課後測驗
+
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26?loc=zh_tw)
+
+## 複習與自學
+
+這堂課你學會關於 LocalStorage 與 API，它們對資深網頁開發者提供很大的幫助。你能想想這兩樣東西如何彼此相互合作呢？想想你會如何建構你的網頁，讓 API 得以使用你所儲存的資料。
+
+## 作業
+
+[認領一項 API](assignment.zh-tw.md)
+
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.nl.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.nl.md
new file mode 100644
index 00000000..68e4f2bd
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.nl.md
@@ -0,0 +1,11 @@
+# Adopteer een API
+
+## Instructies
+
+API's kunnen erg leuk zijn om mee te spelen. Hier is een [lijst met vele gratis](https://github.com/public-apis/public-apis). Kies een API, en bouw een browserextensie die een probleem oplost. Het kan een zo klein probleem zijn als u niet genoeg foto's van huisdieren hebt (dus probeer de [dog CEO API](https://dog.ceo/dog-api/)) of iets groters - veel plezier!
+
+## Rubriek
+
+| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+| | Een volledige browserextensie wordt ingediend met behulp van een API uit de bovenstaande lijst | Er is een gedeeltelijke browserextensie ingediend | De inzending bevat bugs |
\ No newline at end of file
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md
new file mode 100644
index 00000000..c40fea7c
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md
@@ -0,0 +1,11 @@
+# 認領一項 API
+
+## 大綱
+
+API 可以是很好玩的。這裡有[許多公開 API 的清單](https://github.com/public-apis/public-apis)。挑選一項 API，建立一個網頁擴充功能來解決問題。問題可以很小，如找不到足夠的寵物照片，這時你可以嘗試使用[dog CEO API](https://dog.ceo/dog-api/))；或是解決更大問題。好好享受吧！
+
+## 學習評量
+
+| 作業內容 | 優良 | 普通 | 待改進 |
+| -------- | --------------------------------------------- | ------------------------ | ------------ |
+| | 使用上述清單內的 API 建立完整的瀏覽器擴充功能 | 建立部分的瀏覽器擴充功能 | 套件存在問題 |
\ No newline at end of file
diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md
index f2c4db88..f1eaaec7 100644
--- a/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -22,7 +22,7 @@ The Performance tab contains a Profiling tool. Open a web site (try, for example
-✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge
+✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge
> Tip: to get a true reading of your web site's startup time, clear your browser's cache
@@ -133,7 +133,7 @@ function drawIcon(value) {
```
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run, to draw an icon of the proper color using the Canvas API.
-✅ You'll learn more about the Canvas API in the [Space Game lessons](../6-space-game/2-drawing-to-canvas/README.md/drawing-to-canvas/README.md).
+✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md
index ebe74673..6205033c 100644
--- a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md
@@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra
-✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge
+✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge
> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
@@ -133,7 +133,7 @@ function drawIcon(value) {
```
En este código, está agregando un oyente para cualquier mensaje que llegue al administrador de tareas de backend. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un icono del color adecuado usando la API de Canvas.
-✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../space-game/drawing-to-canvas/README.md).
+✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../../6-space-game/2-drawing-to-canvas/translations/README.es.md).
Ahora, reconstruya su extensión (`npm run build`), actualice y ejecute su extensión, y observe el cambio de color. ¿Es un buen momento para hacer un mandado o lavar los platos? ¡Ahora lo sabes!
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md
new file mode 100644
index 00000000..40c787a0
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md
@@ -0,0 +1,161 @@
+# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 3: पृष्ठभूमि कार्य और प्रदर्शन के बारे में जानें
+
+## पूर्व व्याख्यान प्रश्नोत्तरी
+
+[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27?loc=hi)
+
+### परिचय
+
+इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
+
+यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
+
+## वेब प्रदर्शन मूल बातें
+
+> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+सभी प्रकार की स्थितियों में, सभी प्रकार के उपयोगकर्ताओं के लिए, आपकी वेब साइटों को सभी प्रकार के उपकरणों पर तेज़ी से तेज़ बनाने का विषय, बहुत ही विशाल है। यहां कुछ बिंदुओं को ध्यान में रखा जाता है क्योंकि आप या तो एक मानक वेब परियोजना या एक ब्राउज़र एक्सटेंशन का निर्माण करते हैं।
+
+अपनी साइट को कुशलतापूर्वक चलाने के लिए सबसे पहले आपको यह सुनिश्चित करने की आवश्यकता है कि उसके प्रदर्शन के बारे में डेटा इकट्ठा किया जाए। ऐसा करने का पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल में है।. एज में, आप "Settings and more" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools> Developer Tools पर नेविगेट करें और प्रदर्शन टैब खोलें। आप विंडोज पर कीबोर्ड शॉर्टकट `Ctrl` +` शिफ्ट` + `I` या मैक पर डेवलपर विकल्प खोलने के लिए `Option` + `Command` +` I` का भी उपयोग कर सकते हैं।
+
+प्रदर्शन टैब में एक प्रोफ़ाइल उपकरण होता है। एक वेब साइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रीफ़्रेश करें। किसी भी समय रिकॉर्डिंग बंद कर दें, और आप साइट को 'स्क्रिप्ट', 'रेंडर' और 'पेंट' से उत्पन्न रूटीन को देख पाएंगे:
+
+
+
+✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
+
+> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
+
+आपके पृष्ठ लोड होने पर होने वाली घटनाओं को ज़ूम करने के लिए प्रोफ़ाइल समयरेखा के तत्वों का चयन करें।
+
+प्रोफ़ाइल टाइमलाइन के एक भाग का चयन करके और सारांश फलक को देखकर अपने पृष्ठ के प्रदर्शन का एक स्नैपशॉट प्राप्त करें:
+
+
+
+यह देखने के लिए कि क्या कोई घटना 15 ms से अधिक समय की नहीं है, इवेंट लॉग फलक की जाँच करें:
+
+
+
+✅ अपने प्रोफाइलर को जाने! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई अड़चन है। सबसे धीमी गति से लोड होने वाली ऐसेट क्या है? सबसे तेज?
+
+## प्रोफाइल की जाँच
+
+सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
+
+**एसेट आकार**: पिछले कुछ वर्षों में वेब 'भारी' हो गया है, और इस तरह धीमा है। इस वजन का कुछ छवियों के उपयोग के साथ क्या करना है।
+
+✅ पृष्ठ भार और अधिक के ऐतिहासिक दृश्य के लिए [इंटरनेट आर्काइव](https://httparchive.org/reports/page-weight) देखें।
+
+एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियों को अनुकूलित किया जाए, आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन पर वितरित किया जाए।
+
+**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
+
+**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
+
+✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
+
+अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
+
+### रंग की गणना करने के लिए एक फ़ंक्शन बनाएं
+
+`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप DOM तक पहुँच प्राप्त कर सकते हैं:
+
+```JavaScript
+function calculateColor(value) {
+ let co2Scale = [0, 150, 600, 750, 800];
+ let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+ let closestNum = co2Scale.sort((a, b) => {
+ return Math.abs(a - value) - Math.abs(b - value);
+ })[0];
+ console.log(value + ' is closest to ' + closestNum);
+ let num = (element) => element > closestNum;
+ let scaleIndex = co2Scale.findIndex(num);
+
+ let closestColor = colors[scaleIndex];
+ console.log(scaleIndex, closestColor);
+
+ chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
+
+Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
+
+> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
+
+✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
+
+> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
+
+### एक डिफ़ॉल्ट आइकन रंग सेट करें
+
+अब, `init()`फंक्शन में, आइकॉन को फिर से क्रोम के `updateIcon` एक्शन को कॉल करके शुरू करने के लिए जेनेरिक ग्रीन होने के लिए सेट करें:
+
+```JavaScript
+chrome.runtime.sendMessage({
+ action: 'updateIcon',
+ value: {
+ color: 'green',
+ },
+});
+```
+### फ़ंक्शन को कॉल करें, कॉल निष्पादित करें
+
+इसके बाद, उस फ़ंक्शन को कॉल करें जिसे आपने C02Signal API द्वारा दिए गए वादे से जोड़कर बनाया है:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+और अंत में, `/dist/background.js` में, इन बैकग्राउंड एक्शन कॉल के लिए श्रोता जोड़ें:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+ if (msg.action === 'updateIcon') {
+ chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+ }
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+ let canvas = document.createElement('canvas');
+ let context = canvas.getContext('2d');
+
+ context.beginPath();
+ context.fillStyle = value.color;
+ context.arc(100, 100, 50, 0, 2 * Math.PI);
+ context.fill();
+
+ return context.getImageData(50, 50, 100, 100);
+}
+```
+इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
+
+✅ आप [अंतरिक्ष खेल के पाठों](../../../6-space-game/2-drawing-to-canvas/translations/README.hi.md) में कैनवस एपीआई के बारे में अधिक जानेंगे
+
+आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
+
+बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
+
+---
+
+## 🚀 चुनौती
+
+कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
+
+## व्याख्यान उपरांत प्रश्नोत्तरी
+
+[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28?loc=hi)
+
+## समीक्षा और स्व अध्ययन
+
+[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें
+
+कुछ ऐसे तरीकों की जाँच करें जो ब्राउज़र अपने वेब टूल में प्रदर्शन टैब के माध्यम से वेब प्रदर्शन को गेज करते हैं। क्या आपको कोई बड़ा अंतर लगता है?
+
+## असाइनमेंट
+
+[प्रदर्शन के लिए एक साइट का विश्लेषण करें](assignment.hi.md)
+
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
index 78a01c39..fc261155 100644
--- a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
@@ -22,7 +22,7 @@ La scheda Prestazioni contiene uno strumento di profilazione. Aprire un sito web
-✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge
+✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge
> Suggerimento: per ottenere una lettura fedele del tempo di avvio del proprio sito web, svuotare la cache del browser
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md
index 073f8d84..6f88b65c 100644
--- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md
@@ -22,7 +22,7 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고
-✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요
+✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요
> Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md
index 94ee3f38..f90a8f8b 100644
--- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md
@@ -22,7 +22,7 @@ Tab Prestasi mengandungi alat Profil. Buka laman web (cuba, misalnya, https://ww
-✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge
+✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge
> Petua: untuk mendapatkan bacaan sebenar mengenai masa permulaan laman web anda, kosongkan cache penyemak imbas anda
@@ -133,7 +133,7 @@ function drawIcon(value) {
```
Dalam kod ini, anda menambahkan pendengar untuk sebarang mesej yang datang ke pengurus tugas backend. Sekiranya disebut 'updateIcon', maka kod seterusnya dijalankan, untuk menggambar ikon warna yang tepat menggunakan Canvas API.
-✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../space-game/drawing-to-canvas/README.md).
+✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../../6-space-game/2-drawing-to-canvas/translations/README.ms.md).
Sekarang, buat semula pelanjutan anda (`npm run build`), muat semula dan lancarkan peluasan anda, dan perhatikan perubahan warnanya. Adakah masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md
new file mode 100644
index 00000000..ed003e89
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md
@@ -0,0 +1,160 @@
+# 瀏覽器擴充功能專案 Part 1：學習背景工作與效能
+
+## 課前測驗
+
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27?loc=zh_tw)
+
+### 大綱
+
+在前兩堂課程中，你學會如何建立表單、顯示 API 回覆的資料在結果區塊中，這是網頁處理網頁資訊的標準行為。你甚至學會了如何非同步性地抓取資料。你的擴充套件就快完成了。
+
+它只剩管理背景工作：包括刷新套件的圖示顏色，我們來討論瀏覽器是如何處理這類的工作。也讓我們探討你所建立的網頁，瀏覽器會多有效地處理其中的內容。
+
+## 網頁處理效能的基礎
+
+> "網頁處理效能攸關兩件事：網頁多快地載入，與程式多快地執行。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+關於如何讓你的網頁能快速地運作在各類裝置、各個使用者以及各種情況，是一件難以想像的龐大主題。這裡有一些要點確保你在開發網頁或是擴充功能時，銘記在心。
+
+第一件事為確保網頁收集關於網頁效能的資料，在瀏覽器的開發者工具中可以實現它。在 Edge 中，選擇「設定及更多」按鈕(瀏覽器上三個點的圖示)，並選擇更多工具 > 開發人員工具並開啟 Performance 分頁。你也可以使用鍵盤快捷鍵，Windows 上的 `Ctrl` + `Shift` + `I` 與 Mac 上的 `Option` + `Command` + `I` 來開啟開發人員工具。
+
+Performance 分頁包括了效能分析工具。開啟一個網頁，例如 https://www.microsoft.com，點擊 'Record' 按鈕並重新整理網頁。停止錄製後你就能取得網頁的 'script'、'render' 與 'paint' 的過程與資訊：
+
+
+
+✅ 造訪[Microsoft 文件](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)觀看 Edge 的 Performance 分頁資訊
+
+> 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。
+
+選擇一樣網頁在載入時，時間列中出現的事件物件。
+
+觀看它的總覽面板並截圖你的網頁效能。
+
+
+
+檢查 Event Log 面板，是否有網頁事件花超過 15 毫秒：
+
+
+
+✅ 了解你的性能分析工具！在這個網頁中，開啟開發者工具，檢查是否有任何 bottleneck。什麼是載入最久的物件？哪個又是最快的？
+
+## 效能分析
+
+總體而言，每一位網頁開發者一定要注意一些「有問題的地方」，避免在發布作品時有令人意想不到的驚喜。
+
+**資產(Asset)大小**：過去幾年來，網頁「變重」了，也因此變慢了。有些負擔來自於圖片的使用。
+
+✅ 查詢[Internet Archive](https://httparchive.org/reports/page-weight)，看看過去的網頁負擔等資訊。
+
+一個好的習慣是確保你的圖片有做最佳化，呈現合理的檔案大小及解析度影像給你的使用者。
+
+**DOM 查找元素(Traversal)**：瀏覽器必須依照你的程式碼建立 Document Object Model，請確保你的 tags 最小化，網頁只使用必須的功能與造型。另外，過量的網頁 CSS 也可以被最佳化，舉例來說，造型樣板只用在單頁上，而非全域上。
+
+**JavaScript**：每一位 JavaScript 開發者會觀察 'render-blocking' 腳本，它會在 DOM 查找與瀏覽器呈現前被載入好。請考慮使用 `defer` 在你的程式碼中，我們的盆栽盒專案就有實踐這行。
+
+✅ 在[網頁測速網](https://www.webpagetest.org/)上測試一些網頁，學習確認網頁效能的基本檢查。
+
+現在你了解瀏覽器如何呈現你所提供的資產，我們來看看我們的擴充功能最後需要補齊的項目：
+
+### 建立函式計算顏色
+
+編輯 `/src/index.js`，新增函式 `calculateColor()` 在一系列為了 DOM 存取的 `const` 變數之後：
+
+```JavaScript
+function calculateColor(value) {
+ let co2Scale = [0, 150, 600, 750, 800];
+ let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+ let closestNum = co2Scale.sort((a, b) => {
+ return Math.abs(a - value) - Math.abs(b - value);
+ })[0];
+ console.log(value + ' is closest to ' + closestNum);
+ let num = (element) => element > closestNum;
+ let scaleIndex = co2Scale.findIndex(num);
+
+ let closestColor = colors[scaleIndex];
+ console.log(scaleIndex, closestColor);
+
+ chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+發生了什麼事？你傳遞了 API 回傳的二氧化碳濃度數值，計算出它最適合對應的顏色矩陣索引位置。之後，你將這個顏色數值傳給了 chrome runtime。
+
+chrome.runtime 有[一個 API](https://developer.chrome.com/extensions/runtime)處理所有的背景工作，你的擴充套件借助了此功能：
+
+> "在應用程式中，使用 chrome.runtime API 來接收背景頁面，回傳關於 manifest 的資訊，監聽並回應事件。你也可以利用此 API 轉換 URL 的相對路徑成絕對路徑。"
+
+✅ 如果你正打算開發此專案給 Edge 瀏覽器上使用，你會訝異你使用的是 chrome API。新的 Edge 瀏覽器執行在 Chromium browser 引擎上，所以你也能使用這些工具。
+
+> 注意，如果你想要剖析瀏覽器擴充功能，請在擴充套件上執行開發者工具，它與瀏覽器主視窗為不同的個體。
+
+### 設定圖示預設顏色
+
+現在，在函式 `init()` 中，利用呼叫 chrome `updateIcon` 設定圖示顏色為通用綠：
+
+```JavaScript
+chrome.runtime.sendMessage({
+ action: 'updateIcon',
+ value: {
+ color: 'green',
+ },
+});
+```
+### 呼叫函式、執行呼叫
+
+接下來，在 C02Signal API 回傳的 promise 物件下方呼叫函式：
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+最後，在檔案 `/dist/background.js` 中，新增事件監聽者給這些背景行為的呼叫：
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+ if (msg.action === 'updateIcon') {
+ chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+ }
+});
+//參考 energy lollipop extension，很好的程式！
+function drawIcon(value) {
+ let canvas = document.createElement('canvas');
+ let context = canvas.getContext('2d');
+
+ context.beginPath();
+ context.fillStyle = value.color;
+ context.arc(100, 100, 50, 0, 2 * Math.PI);
+ context.fill();
+
+ return context.getImageData(50, 50, 100, 100);
+}
+```
+在此程式中，你建立了事件監聽者給任何前到背景工作管理者的訊息。若 'updateIcon' 被呼叫，則接下來的程式會被執行，利用 Canvas API 繪製出對應顏色的圖示。
+
+✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。
+
+現在，重新建制你的擴充功能(`npm run build`)，刷新並運行你的套件，觀察圖示的顏色變化。現在是時候去跑腿或是洗碗嗎？現在你知道了！
+
+恭喜你，你已經建立了一款實用的瀏覽器擴充功能，並學到更多瀏覽器的運作方式與監測它的效能分析。
+
+---
+
+## 🚀 挑戰
+
+調查一些悠久的開源網站，並根據它們的 GitHub 歷史，你能分辨它們過去幾年以來效能上的調整嗎？什麼它們是共同的痛點？
+
+## 課後測驗
+
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28?loc=zh_tw)
+
+## 複習與自學
+
+請考慮註冊[performance newsletter](https://perf.email/)
+
+調查瀏覽器測量網頁效能的方法，查看開發者工具內的 Performance 分頁。你能找到什麼巨大的差別嗎？
+
+## 作業
+
+[分析網頁效能](assignment.zh-tw.md)
+
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.nl.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.nl.md
new file mode 100644
index 00000000..c59647ac
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.nl.md
@@ -0,0 +1,9 @@
+# Analyseer een site op prestaties
+
+Geef een gedetailleerd rapport van een website, met de gebieden waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat u zou kunnen doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe wat onderzoek naar andere tools die u kunnen helpen bij uw rapportage
+
+## Rubriek
+
+| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+| | Er wordt een rapport gepresenteerd met details die niet alleen uit browsertools zijn gehaald, maar ook uit tools van derden, indien beschikbaar | Er wordt een basisrapport gepresenteerd | Er wordt een minimaal rapport gepresenteerd |
\ No newline at end of file
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md
new file mode 100644
index 00000000..8f733b7e
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md
@@ -0,0 +1,9 @@
+# 分析網頁效能
+
+請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。
+
+## 學習評量
+
+| 作業內容 | 優良 | 普通 | 待改進 |
+| -------- | ---------------------------------- | -------------- | ------------ |
+| | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 |
\ No newline at end of file
diff --git a/5-browser-extension/translations/README.hi.md b/5-browser-extension/translations/README.hi.md
index 125ec6e5..c113f777 100644
--- a/5-browser-extension/translations/README.hi.md
+++ b/5-browser-extension/translations/README.hi.md
@@ -8,9 +8,9 @@
### विषय
-1. [ब्राउज़र के बारे में](../1-about-browsers/README.md)
-2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.md)
-3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.md)
+1. [ब्राउज़र के बारे में](../1-about-browsers/README.hi.md)
+2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.hi.md)
+3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.hi.md)
### क्रेडिट
diff --git a/5-browser-extension/translations/README.nl.md b/5-browser-extension/translations/README.nl.md
new file mode 100644
index 00000000..40ad0080
--- /dev/null
+++ b/5-browser-extension/translations/README.nl.md
@@ -0,0 +1,28 @@
+# Een browserextensie bouwen
+
+Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van uw apps terwijl u een ander type webitem bouwt. Deze module bevat lessen over hoe browsers werken en hoe u een browserextensie implementeert, hoe u een formulier bouwt, een API aanroept en lokale opslag gebruikt, en hoe u de prestaties van uw website peilt en deze verbetert.
+
+U bouwt een browserextensie die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio en geeft een lezing over de ecologische voetafdruk van de regio.
+
+Deze extensie kan door een gebruiker ad-hoc worden genoemd zodra een API-sleutel en regiocode in een formulier zijn ingevoerd om het lokale elektriciteitsverbruik te bepalen en daardoor gegevens te bieden die de elektriciteitsbeslissingen van een gebruiker kunnen beïnvloeden. Het kan bijvoorbeeld de voorkeur hebben om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in uw regio.
+
+### Onderwerpen
+
+1. [Over de browser](../1-about-browsers/translations/README.nl.md)
+2. [Formulieren en lokale opslag](../2-forms-browsers-local-storage/translations/README.nl.md)
+3. [Achtergrondtaken en prestaties](../3-background-tasks-and-performance/translations/README.nl.md)
+
+### Credits
+
+
+
+## Credits
+
+Het idee voor deze web-koolstoftrigger werd aangedragen door Asim Hussain, hoofd bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green).
+
+De structuur van de browserextensie werd beïnvloed door [de COVID-extensie van Adebola Adeniran](https://github.com/onedebos/covtension).
+
+Het concept achter het 'punt'-pictogramsysteem werd gesuggereerd door de pictogramstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor Californische emissies.
+
+Deze lessen zijn geschreven met ♥ door [Jen Looper](https://www.twitter.com/jenlooper)
+
diff --git a/5-browser-extension/translations/README.zh-tw.md b/5-browser-extension/translations/README.zh-tw.md
new file mode 100644
index 00000000..8a0ec8d1
--- /dev/null
+++ b/5-browser-extension/translations/README.zh-tw.md
@@ -0,0 +1,28 @@
+# 建立瀏覽器擴充功能
+
+建立瀏覽器擴充功能是個好玩且有趣的方式來思考應用程式的執行效能，包含各式各樣類型的網頁資產。這堂學習模組介紹了瀏覽器運作方式、如何架設擴充功能、建立表單、呼叫 API、使用 Local Storage 和測量網頁效能的方法並增進它。
+
+你會建立一個支援在 Edge、Chrome 與 Firefox 的瀏覽器擴充功能。這個擴充功能就像小型的網頁，專門滿足特定課題：利用[C02 Signal API](https://www.co2signal.com)檢查地區的電力使用與碳排濃度，回傳地區的碳足跡。
+
+這款特設擴充功能允許使用者在輸入完 API Key 與國家地區代碼到表單後，取得當地電力使用量與其他資訊，決定使用者後續的行為。舉例來說，在地區高電力用量時，你可能會延後烘衣機的使用(增加碳排)。
+
+### 主題
+
+1. [關於瀏覽器](../1-about-browsers/translations/README.zh-tw.md)
+2. [表單與 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md)
+3. [背景工作與效能](../3-background-tasks-and-performance/translations/README.zh-tw.md)
+
+### 成就
+
+
+
+## 參與人員
+
+網頁碳排放追蹤的發想出自於 Asim Hussain，微軟綠能雲端倡導小組的領導人與[Green Principles](https://principles.green/)的作者。這源自於一個[網頁專案](https://github.com/jlooper/green)。
+
+擴充功能的結構受[Adebola Adeniran 的 COVID 擴充功能](https://github.com/onedebos/covtension)啟發。
+
+「點」圖示系統的概念參考[Energy Lollipop](https://energylollipop.com/)的加州排放擴充功能。
+
+這些課程由 [Jen Looper](https://www.twitter.com/jenlooper) 用滿滿的 ♥️ 來編寫。
+