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

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.

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

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.

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.

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) => {
    ...
  });
}

A consolidated list for type definition referencing

There's a few posts here on SO for chrome object typing issues, actually a lot of good information on the subject, but the approach will vary by your environment and need, a good post to look into: How to use chrome-app.d.ts type in angular-cli 1.0.1 app?

For the love of god, just gimme them TYPES!

I've had success with all 3 of these approaches in various projects; however, more people than I care to admit ask me about types, specifically the chrome extension API object... So, stumbled upon this post and am just sharing a few, they're all rather common but easy to forget so here's a refresher!

If there are others ways I do not encapsulate here, please reach out so I can include them

1. Automatic type acquisition

This automatically acquires the necessary type definitions and includes the references in your project without a /// <reference types="..." /> call.

This approach is more beneficial in vanilla Javascript projects (with or without a tsconfig) where types may not be easily reached from the terminal using npm since it may not be used in the project. Either way, it's a neat approach.

// jsconfig.json

{
  "typeAcquisition": {
    "include": ["chrome"]
  }
} 

2. Type definition compilation

Here, tsc explicitly includes the type definitions by referencing them from node_modules once the below snippet is implemented, making the types available globally in your project.

This approach requires that you install npm i -d @types/chrome in your project.

// tsconfig.json

{
  "compilerOptions": { 
    "types": ["chrome"]
  }
}

2b. A quick note for the Angular-specific approach...

As notated here: Cannot find namespace/name chrome—basically, Angular is special, it is the same as the above only specific to Angular, for reasons.

{
  "angularCompilerOptions": {
    "types": ["chrome"]
  }
}

3. Manually download, reference, local type definition files

This approach seems to work the best for me and my local IDE configurations, but that will vary from person to person, it does not require a tsconfig or jsconfig file to implement either.

sw.js (or background.js) is probably the safest place to put this for chrome extension development, but I haven't had issues so long as it is included somewhere at least once (even if it is referenced in deferred scripts it seems to work fine)

This is a triple-slash directive XML reference approach that seems random yet it simply works. The other approaches I have to run commands or reload my IDE, they dismount randomly, etc. With this, I had type definitions before I even saved the file.

//! sw.js

/// <reference types="~/dev/@types/chrome.d.ts" />

Referencing the raw github file directly here, sadly, does not work. (e.g. https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/refs/heads/master/types/chrome/index.d.ts). I also cannot locate any CDN sources for these definitions either… SO, to proceed, you need to download the above d.ts file, save it locally (probably in your project), and reference the file with a relative path with the following comment tag.

And that's that, if you see anything wrong or have a better way to articulate something, as always, feel free to edit and update or comment. I was tired of searching for bookmarks on all these approaches when devs asked me about it, so consolidated them here.