Framework
Customization
Use src Directory

ソースコード用のsrcディレクトリの使用

ソースコードをルートディレクトリに配置する代わりに、子ディレクトリであるsrcディレクトリに配置できます。

--with-src

srcディレクトリを設定したPlasmoプロジェクトの作成は、次のコマンドで簡単に行えます。

pnpm create plasmo --with-src

上記のコマンドは、Plasmoの例テンプレート機能を利用しています。

💡

assetsディレクトリは、srcディレクトリではなくprojectディレクトリに配置してください。

popup.tsx、options.tsx、background.ts、contents/*など、Plasmoのエントリファイルを含むすべてのソースファイルをsrcディレクトリに配置してください。配置しないと、Plasmoはエントリファイルの場所を認識できず、拡張機能が空の状態になります！

このカスタマイズは、ソースコードモジュールについて~を/srcに解決するのみです。チルダインポート解決に関するこの注意事項を参照してください。

手動設定

まず、すべてのソースコードファイルをsrcディレクトリにコピーします。次に、TypeScriptが正しく動作するように、tsconfig.jsonファイルで~*プレフィックスの解決済みpathsを"./src/*"に設定する必要があります。

新しい設定は以下のようになります。

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

完全な例については、with-src (opens in a new tab)を参照してください。

Manifest OverrideReplace the HTML