MS Edge api error "browser is not defined"

Question

I am trying to build an extension for new Microsoft Edge browser. After loading the unpacked extension I am getting this error,

Uncaught ReferenceError: browser is not defined

I have read the microsoft edge docs that all extension APIs are under the browser namespace.

I have included storage permission in my manifest.json file. This my code from 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 my javascript file where I am using 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"));
      });
    }
  });
});

what is the problem with my code?

Are you testing on Edge v44 and earlier, or Edge v79 and later? They're very different browsers. (There were no v45-v78.) — T.J. Crowder, Sep 10 '20 at 07:50
@Plaban, I agree with the suggestion given by the Abhinav for replacing the `browser` with `chrome` may help you to fix the issue. Let us know, whether it works for you or not. — Deepak-MSFT, Sep 11 '20 at 02:19

score 2 · Accepted Answer · edited Oct 27 '22 at 14:17

2

Please try with chrome - for chromium-based edge, the browser will support the code below - see https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium

const checkboxes = document.querySelectorAll("input[type='checkbox']");

checkboxes.forEach((checkbox) => {
  return checkbox.addEventListener("change", () => {
    if (checkbox.changed) {
      chrome.storage.local.set({ [checkbox.name]: true }, () => {
        chrome.storage.onChanged.addListener(() => console.log("true"));
      });
    } else {
      chrome.storage.local.set({ [checkbox.name]: false }, () => {
        chrome.storage.onChanged.addListener(() => console.log("changed to false"));
      });
    }
  });
});

edited Oct 27 '22 at 14:17

mikemaccana

110,530
99
389
494

answered Sep 10 '20 at 07:55

Athinarayanan

114
3

why using `chrome` namespace? – Plaban Sep 10 '20 at 08:10
The latest version of Edge will support chromium. Now you can install chrome extension in ms edge browser. I am using Version 85.0.564.44 (Official build) (64-bit). Final recommendation, Please try with "chrome". https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/ – Athinarayanan Sep 10 '20 at 08:14
1

@Abhinav - That information belonged in the answer, not just as a comment on it. – T.J. Crowder Sep 10 '20 at 08:15
Understood. Thanks for your information. I am new for this stock over flow. – Athinarayanan Sep 10 '20 at 08:19

MS Edge api error "browser is not defined"

1 Answers1