A lightweight TypeScript-friendly library to inject CSS into browser extensions (Manifest V2 & V3)
npm install @addon-core/inject-css



A lightweight, TypeScript-ready library for injecting CSS into browser extension pages.
Automatically detects Chrome Extension Manifest V2 and V3 and delegates to the appropriate API via @addon-core/browser.
- Installation
- Usage
- Injecting CSS Code
- Injecting CSS Files
- Updating Options
- API
- Options
- Examples
- License
``bash`
npm install @addon-core/inject-css
`bash`
pnpm add @addon-core/inject-css
`bash`
yarn add @addon-core/inject-css
`ts
import injectCss, {InjectCssOptions} from "@addon-core/inject-css";
// Initialize an injector with a target tab ID
const injector = injectCss({tabId: 123});
// Inject raw CSS code into the page
await injector.insert("body { background-color: #f0f0f0; }");
// Inject one or more CSS files (paths relative to extension)
await injector.file("styles/main.css");
await injector.file(["styles/reset.css", "styles/theme.css"]);
// Update options dynamically and reuse the injector
injector.options({frameId: true, origin: "USER"});
await injector.insert("p { color: red; }");
`
Use the insert(css: string) method to inject raw CSS code.
Use the file(files: string | string[]) method to inject CSS file(s).
Use the options(opts: Partial method to merge or override options on an existing injector instance.
Creates a new CSS injector instance. Detects the manifest version (V2 or V3) via @addon-core/browser and delegates to the appropriate implementation.
#### InjectCssContract
- insert(css: string): Promise — Inject raw CSS code.file(files: string | string[]): Promise
- — Inject one or more CSS files.options(opts: Partial
- — Update injector options.
The injector accepts the following options (passed to injectCss(options) and/or injector.options(opts)):
| Option | Type | Description |
| --------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| tabId | number | Required. Target browser tab ID. |
| frameId | boolean \| number \| number[] | Optional. Select frames to inject into: true for all frames; number or array for specific. |about:blank
| matchAboutBlank | boolean | Optional. (V2 only) Include and similar subframes. Defaults to true. |runAt
| runAt | 'document_start' \| 'document_end' \| 'document_idle' | Optional. (V2 only) Injection timing, matches Chrome's in insertCSS. |cssOrigin
| documentId | string \| string[] | Optional. (V3 only) Document IDs for scripting targets. |
| origin | 'AUTHOR' \| 'USER' | Optional. CSS origin matching Chrome's API ( in V2, origin in V3). |
`ts
import injectCss from "@addon-core/inject-css";
// Initialize with a mix of options
const injector = injectCss({
tabId: 123,
frameId: [1, 2], // (V2 & V3)
runAt: "document_end", // (V2 only)
documentId: "main-doc-id", // (V3 only)
origin: "AUTHOR", // 'AUTHOR' or 'USER'
});
// Inject raw CSS code
await injector.insert("body { background-color: #fafafa; }");
// Inject one or more CSS files
await injector.file(["styles/reset.css", "styles/theme.css"]);
``
MIT © Addon Stack