I’m writing an alternative for Chrome’s New Tab Page. Data stored in chrome.storage.local is correctly saved and loaded, as confirmed by logging, but it does not appear in the DevTools > Application > chrome.storage.local tab.
The extension’s permissions include “storage”, and data is being stored under individual keys (name, url).
document.addEventListener('DOMContentLoaded', () => {
// Save data
document.querySelector('.button-done').addEventListener('click', () => {
const name = document.getElementById('name-field').value;
const url = document.getElementById('web-address').value;
chrome.storage.local.set({ name, url }, () => {
console.log('Data saved:', { name, url });
});
});
// Load data
chrome.storage.local.get(["name", "url"], (data) => {
if (data.name && data.url) {
document.getElementById('name-field').value = data.name;
document.getElementById('web-address').value = data.url;
console.log('Data loaded:', data);
}
});
});
Despite successful retrieval and display in the UI, the stored data remains invisible in DevTools. I’ve tried clearing storage, reloading DevTools, and verifying extension context, but the problem persists. This happens both while running the code in Live Preview in VS Code (1.93.1) and when running the extension unpacked in Chrome’s developer mode (128.0.6613.139). Any insights?