Cannot find namespace/name chrome

Question

I'm trying to develop google extension, but found that I can't reference the chrome object without generating:

ERROR in E:/ChromeExtensions/.../node_modules/chrome-promise/chrome-promise.d.ts (2160,66): Cannot find namespace 'chrome'.

or

ERROR in E:/ChromeExtensions/.../src/app/chrome-tabs.servi ce.ts (14,7): Cannot find name 'chrome'.

I have added chrome typings npm install --save @types/chrome but it doesn't resolve build errors.

Any suggestions?

Cadel

as a temporary fix is to use window['chrome'] – Delogu

Same issue here. Did you find a solution? – Catalectic

Nope, still using the temporary solution – Delogu

Im keen to know a typed solution too :( – Electrometallurgy

answered here: #43655606 – Electrometallurgy

Answer 1

Based on How to use chrome-app.d.ts type in angular-cli 1.0.1 app?

1. I added @types/chrome to package.json
2. I added /// <reference types="chrome"/> to the top of my ts file

Megasporangium

Adding the second line in the file worked for me. Weird thing is that this error doesn't show up in a .jsx file. – Ambie

Answer 2

Update for 2019:

There's no need to use /// <reference types="chrome"/> anymore. npm i -D @types/chrome (and reopening the project in VScode) should be enough.

This sometimes happens when you clone a repo that already has a @types library installed. npm i doesn't get it done, but if you install the @types library again, it should work.

Tramline

If VSCode is still complaining after installing the types, try restarting it. – Specular

Answer 3

I am in the same case. I am creating a Chrome extension with Angular:

Package	Version
@angular	14.0.4
@types/chrome	0.0.193

I installed the Chrome types as shown in the documentation (https://www.npmjs.com/package/@types/chrome):

npm install --save @types/chrome

And I added chrome to the types in the tsconfig.app.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["chrome"]
  },
  "...": "..."
}

After that, my code editor (PHPStorm) took the chrome keyword into account in my codes.

You can have several workspaces for a single project open in your code editor (https://angular.io/guide/file-structure), and you can configure the types needed for each workspace (in the tsconfig.app.json file). In this situation, your code editor will only take the types into account in the files of the relevant and configured workspace.

Update 2023:

Here is the project on which I tested this configuration: https://github.com/jprivet-dev/chrome-extension-angular-starter-kit.

Daniels

This is the most up-to-date answer – Deathless

This also works for react, vite apps! – Prepossession

Answer 4

1. Install the chrome types using npm. npm install --save @types/chrome

2. Update your TypeScript configuration (usually found in tsconfig.app.json) by adding "chrome" to the "types" array:

     {
          "extends": "./tsconfig.json",
          "compilerOptions": {
            "outDir": "./out-tsc/app",
            "types": ["chrome"]
          },
          "files": "...",
          "include": "..."
        }

By adding "chrome" to the "types" array, you are instructing TypeScript to include typings for the Chrome API in your project. Save your changes and try rebuilding your TypeScript project. This should resolve any type-related issues you were facing when using Chrome-specific APIs.

Tunnage

Answer 5

It would nice to have a code snippet for context.

However, when I ran into this, it was because I was passing chrome into my function as an argument. It's silly to do that, however, since chrome is a global variable, and thus accessible from any file. Not only that, but since JavaScript objects are pass-by-reference, there's no need to pass around globals (you're editing the same object regardless).

TL;DR: Add types/chrome to package.json, and just access globals (i.e., chrome or window) from the file you're working in rather than passing it as an argument.

Passing chrome as argument (bad / unnecessary):

export function getItem(key: string, chromeStore: chrome): string {
  chromeStore.storage.local.get(key, (items: any) => {
    ...
  });
}

Using chrome as global (good):

export function getItem(key: string): string {
  chrome.storage.local.get(key, (items: any) => {
    ...
  });
}

Satan

Hi! Thanks for your answer, just a question, I am also passing it as an argument to a (factory) function, it feels more explicit to me. Could you elaborate on why this is bad practice? To be a bit more specific, I've got two different chrome objects I'm working with, one is in the nested scope of a callback . – Anastassia

Why do you have more than one chrome objects you're working w/? Also, since chrome is used as a singleton global object, how does that work to communicate between tabs or use chrome.storage? – Satan