Are there any @types available for browser extension objects that are interoperable?

I am in the process of developing a browser extension that would work seamlessly on Edge, Chrome, and Firefox by utilizing Typescript.

After coming across an article discussing interoperable browser extensions, I stumbled upon a code snippet:

window.browser = (function () {
  return window.msBrowser ||
    window.browser ||
    window.chrome;
})();

This inspired me to consider creating a Browser class and setting a property based on the user's browser. Here's a draft of what I have in mind:

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;
    }
}

While I successfully integrated @types/chrome for Chrome definition to prevent exceptions, I ran into a roadblock with finding type definitions for the browser and msBrowser objects in TypeScript. Are there any solutions or suggestions to handle this without encountering errors?

Thus, my query is whether there are any suitable type definitions available to support the browser or msBrowser objects?

typescripttypescross-browserbrowser-extension

Answer №1

WebExtensions appear to be the top choice for creating extensions that work across different web browsers. For a reliable source of WebExtensions API, check out https://github.com/kelseasy/web-ext-types. I hope this information proves useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for obtaining a subset of `keyof T` where the value, T[K], refers to callable functions in Typescript

Is there a way to filter keyof T based on the type of T[keyof T]? This is how it should function: type KeyOfType<T, U> = ... KeyOfType<{a: 1, b: '', c: 0, d: () => 1}, number> === 'a' | 'c' KeyOfType<{a: ...

typescript

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

htmlangulartypescript

Pausing repetitive HTTP requests in an Angular 6 project within a do while loop

While waiting for the completion of one API call, I am recursively consuming an external API. The http calls are being made using import {HttpClient} from '@angular/common/http' As a newcomer to the framework, there may be something wrong in the ...

javascriptangulartypescriptangular-servicesangular-http

What steps should I take to choose esNext from the typescript menu within visual studio 2017?

When utilizing dynamic import with TypeScript in Visual Studio 2017, I encountered the following error: TS1323(TS) Dynamic imports are only supported when the '--module' flag is set to 'commonjs' or 'esNext'. I attempted to c ...

typescriptasp.net-corevisual-studio-2017

Using *ngFor to populate an array in an ion-list within Ionic 2

Hi there, I'm currently learning Ionic 2 and I recently created an array that I want to loop through in an ion-list. This is my produk.ts import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angul ...

angulartypescriptionic2

I'm unsure how to utilize the generic type in this particular scenario. It's a bit confusing to me

Recently, I delved into TypeScript generics and applied them in specific scenarios. However, I encountered some challenges. While working with two different interfaces, I faced a need for flexibility. For instance, I needed to make server requests. func ...

javascriptreactjstypescriptgenericstypes

What is the process for converting a .ts file to a .js file within a Next.js project for Web worker implementation?

I am currently working on a TypeScript Next.js project: "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint& ...

typescriptnext.jsweb-workertsconfig

Angular - handling Observable<T> responses when using Http.post

One issue I encountered was when trying to implement a method that returns an Observable. Within this method, I utilized http.post to send a request to the backend. My goal was to store the JSON object response in an Observable variable and return it. Howe ...

angulartypescriptrxjsobservablerxjs6

Hold off on utilizing information from a single observable until a later time

In my Angular component, I am working with the following code: @Component({...}) export class ComponentOne implements OnDestroy, OnChanges { readonly myBehaviourSub = new BehaviorSubject<Observable<MY_CUSTOM_INTERFACE>>(NEVER); constructo ...

angulartypescriptrxjsobservablerxjs-observables

Testing onClick using Jest when it is not a callback function in props

I have discovered various ways to utilize mock functions in jest for spying on callback functions passed down to a component, but I have not found any information on testing a simple onClick function defined within the same component. Here is an example f ...

reactjstypescriptunit-testingjestjs

Exploring the power of Node JS with Promise.all and forEach within a nested array

When working on a Node app with typescript, I encountered the need to iterate through an array while calling an asynchronous function inside the loop to fetch information about related items for each item in the array. The function is called for each relat ...

node.jstypescriptnpmpromise

Exploring Node Stream.Writable Extension in Typescript 4.8

I'm attempting to craft a basic class that implements Node stream.Writable, but it seems like I can't quite grasp the correct syntax - the compiler keeps throwing errors: https://i.stack.imgur.com/UT5Mt.png https://i.stack.imgur.com/Z81eX.png ...

node.jstypescriptstream

Utilizing Typescript with tfjs-node to effectively integrate the node-gpu version with regular node functionalities

I am facing challenges while running my Tensorflow.js node application with and without the GPU library. In vanilla JavaScript, examples show using require() for either @tensorflow/tfjs-node or @tensorflow/tfjs-node-gpu. However, in my TypeScript setup, I ...

typescripttensorflow.jstfjs-node

When converting an object into a specific type, the setter of the target type is not invoked

Imagine a scenario with a class structured like this: class Individual { private _name: string; get Name(): string { return this._name; } set Name(name: string) { this._name = name; } } Upon invoking HttpClient.get<Individual>(), it retrieve ...

typescript

The specified property is not present on the given type

I am receiving data from an API, and I have defined its structure like this interface DailyData { dt: number; sunrise: number; sunset: number; moonrise: number; moonset: number; moon_phase: number; temp: {day: number, eve: number, max: number ...

jsontypescript

What steps should be taken to trigger an API call once 3 characters have been entered into a field

In my current project, I am dealing with a parent and child component setup. The child component includes an input field that will emit the user-entered value to the parent component using the following syntax: <parent-component (sendInputValue)="g ...

javascriptangulartypescriptrxjs

Utilizing TypeORM to selectively choose data in OneToMany relationships

I am looking to create a TypeORM query that pulls data from the database. Specifically, I want to retrieve all clients who have made a purchase but have not initiated a return. Here is the structure of the database: Clients: Id (Int, primary column) Purc ...

javascriptsqlsql-servertypescripttypeorm

Error: Trying to access property '2' of a null value

I’ve been working on a project using Next.js with TypeScript, focusing on encryption and decryption. Specifically, I’m utilizing the 'crypto' module of Node.js (@types/nodejs). However, I encountered an error while attempting to employ the &a ...

node.jstypescriptencryptionnext.jsnode-modules

React typescript: When defining an interface in RouterProps, it is important to remember that it can only extend an object type or a combination of object types

For my React project, I decided to implement Typescript. After seeking assistance from Chatgpt, I was able to obtain this code snippet: import React from "react"; import { Route, Navigate, RouteProps } from "react-router-dom"; import { ...

reactjstypescriptreact-router-dom

Are there type declarations in TypeScript for the InputEvent?

Wondering if there is a @types/* module that offers type definitions for the InputEvent object? For more information about InputEvent, you can visit this link. ...

typescript