I'm creating a browser extension that would be compatible in Edge, Chrome, and Firefox using Typescript.
I have found an article that discusses interopable browser extension that has a sample of this code:
window.browser = (function () {
return window.msBrowser ||
window.browser ||
window.chrome;
})();
So I was planning to create a Browser class and initialize a property depending what browser the extension is sitting. Something like the below codes:
export class Browser {
constructor() {}
public _browser: object = null;
get browser() : object {
if (typeof window.chrome !== 'undefined') {
this._browser = window.chrome;
}
if (typeof window.browser !== 'undefined') {
this._browser = window.browser;
}
return this._browser;
}
}
I was able to add @types/chrome for chrome definition so that I would not throw an exception, however, I could not find any types for browser
and msBrowser
object definition. Or any suggestion I can use to do this without getting an error in Typescript.
So my question is there any type definitions I can use to support the browser
or msBrowser
object?
WebExtensions seem like the best choice for cross-browser extension development. The most popular type file I can find for the WebExtensions API seems to be https://github.com/kelseasy/web-ext-types. I hope that's helpful.