I am currently working on developing a TypeScript extension that is compatible with all major browsers. I have come across the package https://www.npmjs.com/package/web-ext-types which I have integrated into my package.json file.
While coding in TypeScript, I can see browser-related intellisense features, but when I test it in Chrome, I encounter the following exception:
Uncaught (in promise) ReferenceError: browser is not defined.
Here is a snippet of my code:
browser.webNavigation.onHistoryStateUpdated.addListener((e) => {
console.log("webNavigation onHistoryStateUpdated");
console.log(e);
// do something here
});
Being new to TypeScript and browser extensions, I found an article at proposing a solution to support multiple browsers by adding the following code:
window.browser = (function () {
return window.msBrowser ||
window.browser ||
window.chrome;
})();
My primary question is whether this adjustment should be necessary or if the web-ext-types package should handle it automatically. Additionally, whenever I attempt to integrate this code within my TypeScript files, I receive the error:
"Property browser does not exist on type window." Along with including the "@types/chrome": "~0.0.63", declaration, I also utilize chrome.declarativeContent.onPageChanged, which appears to differ from the behavior of browser API.
Any advice or guidance would be greatly appreciated. Thanks!