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.