Framework
Customization
Use src Directory

Using the src directory for source code

Instead of having your source codes in the root directory, you can put them in a child src directory.

--with-src

Creating a Plasmo project with an src directory setup is as simple as:

pnpm create plasmo --with-src

The command above utilizes Plasmo's example template feature.

💡

Please ensure that ALL source files including Plasmo's entry files such as popup.tsx, options.tsx, background.ts, contents/* etc. are in the src directory. Otherwise, Plasmo WILL NOT know where to find the entry files, resulting in an empty extension!

This customization only resolves ~ to /src for source code modules. Please see this note about tilde import resolution.

Manual Setup

First, copy all your source code files into the src directory. Then, for TypeScript to work correctly, you will need to point the resolved paths for the ~* prefix in the tsconfig.json file to "./src/*".

The new configuration looks like this:

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "~*": ["./src/*"]
    },
    "baseUrl": "."
  }
}

See with-src (opens in a new tab) for a full example.

Manifest OverrideReplace the HTML