diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension.md b/microsoft-edge/extensions/developer-guide/devtools-extension.md
index 5c988a761d..57018f9f67 100644
--- a/microsoft-edge/extensions/developer-guide/devtools-extension.md
+++ b/microsoft-edge/extensions/developer-guide/devtools-extension.md
@@ -286,44 +286,71 @@ In this step, you will use extension APIs to display memory information in your
Total Memory Capacity:
+
```
+1. Create the following file:
+
+ **panel.js**
+
+ ```javascript
+ let memInterval = null;
+
+ function startMemoryPolling() {
+ if (memInterval) return;
+ const availableEl = document.getElementById('availableMemoryCapacity');
+ const totalEl = document.getElementById('totalMemoryCapacity');
+
+ console.log('panel: startMemoryPolling');
+ memInterval = setInterval(() => {
+ if (chrome.system?.memory?.getInfo) {
+ chrome.system.memory.getInfo((data) => {
+ availableEl && (availableEl.textContent = String(data?.availableCapacity ?? 'n/a'));
+ totalEl && (totalEl.textContent = String(data?.capacity ?? 'n/a'));
+ });
+ } else {
+ console.warn('panel: chrome.system.memory not available');
+ availableEl && (availableEl.textContent = 'API not available in this browser');
+ totalEl && (totalEl.textContent = 'API not available in this browser');
+ }
+ }, 1000);
+ }
+
+ function stopMemoryPolling() {
+ if (memInterval) {
+ clearInterval(memInterval);
+ memInterval = null;
+ console.log('panel: stopMemoryPolling');
+ }
+ }
+
+ document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'visible') startMemoryPolling();
+ else stopMemoryPolling();
+ });
+
+ window.addEventListener('DOMContentLoaded', () => {
+ if (document.visibilityState === 'visible') startMemoryPolling();
+ });
+ ```
**devtools.js:**
1. Update the `devtools.js` file with the following code.
- ```javascript
- let availableMemoryCapacity;
- let totalMemoryCapacity;
-
- chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
- // code invoked on panel creation
- panel.onShown.addListener((extPanelWindow) => {
- availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
- totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
- });
+ ```javascript
+ chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", (panel) => {
+ console.log('devtools: panel created');
+ panel.onShown.addListener(() => console.log('devtools: panel shown'));
+ panel.onHidden.addListener(() => console.log('devtools: panel hidden'));
});
-
- setInterval(() => {
- chrome.system.memory.getInfo((data) => {
- if (availableMemoryCapacity) {
- availableMemoryCapacity.innerHTML = data.availableCapacity;
- }
- if (totalMemoryCapacity) {
- totalMemoryCapacity.innerHTML = data.capacity;
- }
- });
- }, 1000);
```
The above code snippet does the following:
1. Creates a new panel `Sample Panel` in DevTools.
-
-1. When the panel is displayed (`panel.onShown` listener), the `availableMemoryCapacity` and `totalMemoryCapacity` elements are retrieved from the DOM.
-
-1. Sets a timer to run code every second after the panel is shown.
+
+1. When the panel is displayed, `panel.js` sets a timer to run code every second after the panel is shown.
1. When the timer fires, the `chrome.system.memory.getInfo` method is used to retrieve the available and total memory capacity of the device and these values are displayed in the corresponding DOM elements.