---
# System prepended metadata

title: PID-1023

---

To use import/export in a TypeScript Chrome extension, we need to use the `content_scripts` field in the `manifest.json` file to specify the content script file(s) that will be injected into the web page [1][2]. Then, we can use the `import` and `export` statements in the content script file(s) to load and export modules respectively.

Here's an example of how to use import/export in a TypeScript Chrome extension:

1. Create a TypeScript file for the content script, e.g., `content.ts`, and add the `export` statement for the function that you want to use in the background script:

```typescript
export function myFunction() {
  console.log(""Hello from content script!"");
}
```

2. In the `manifest.json` file, add the following code to the `content_scripts` field:

```json
""content_scripts"": [
  {
    ""matches"": [""<all_urls>""],
    ""js"": [""content.js""],
    ""run_at"": ""document_end""
  }
]
```

This code specifies that the content script file `content.js` will be injected into all URLs and run at the end of the document.

3. In the `content.js` file, use the `import` statement to load the module from the TypeScript file:

```javascript
import { myFunction } from ""./content.js"";
```

4. Call the exported function in the `content.js` file:

```javascript
myFunction();
```

5. Compile the TypeScript file(s) to JavaScript using the TypeScript compiler:

```bash
tsc content.ts
```

This will generate a JavaScript file `content.js` that can be used in the Chrome extension.

6. Load the unpacked extension into Chrome by following these steps:

- Open Chrome and go to `chrome://extensions/`.
- Enable ""Developer mode"" by toggling the switch in the top right corner.
- Click ""Load unpacked"" and select the directory containing the extension files.

Now, when you load a web page, the content script will be injected into the page and the exported function will be called.

Note that in order to use `import` and `export` statements in a TypeScript file, you need to set the `module` compiler option to `""es6""` or `""es2015""` in the `tsconfig.json` file [3].