I'm currently in the process of developing an extension for the new Microsoft Edge browser. Upon loading the unpacked extension, I encountered the following error:
Uncaught ReferenceError: browser is not defined
According to the Microsoft Edge documentation, all extension APIs are accessed under the browser namespace.
I have ensured that I included storage permission in my manifest.json file. Here is the code from my manifest.json file:
{
"manifest_version": 2,
"name": "Demo",
"author": "Plaban Kumar Mondal",
"description": "Demo",
"version": "1.0.0",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": {
"48": "icon48.png",
"16": "icon16.png"
},
"default_popup": "popup.html"
},
"options_page": "options/options.html",
"permissions": ["activeTab", "storage"]
}
This is the javascript file in which I am utilizing the browser namespace:
const checkboxes = document.querySelectorAll("input[type='checkbox']");
checkboxes.forEach((checkbox) => {
return checkbox.addEventListener("change", () => {
if (checkbox.changed) {
browser.storage.local.set({ [checkbox.name]: true }, () => {
browser.storage.onChanged.addListener(() => console.log("true"));
});
} else {
browser.storage.local.set({ [checkbox.name]: false }, () => {
browser.storage.onChanged.addListener(() => console.log("changed to false"));
});
}
});
});
Can you identify any issues with my code?