batman12340
batman12340
PostsComments
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
No description
15 replies
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
Hey @JoeLeo sure So basically let's start with the root. - tsconfig So basically t make this work we need a seperate toconfig for plasmo. This one needs to disculde everything expect the files relate to plasmo. So as you can see below, you can configure it to inlcude your nx libs as well which is pretty neat. tsconfig.json - the one used to build plasmo 
{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "tmp",
    "node_modules",
    "dist",
    "migrations",
    ".dockerignore",
    "tsconfig.base.json",
    ... // all apps except plasmo one
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./apps/spark-extension/**/*.ts",
    "./apps/spark-extension/**/*.tsx",
    "./libs/**/*.ts",
    "./libs/**/*.tsx",
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
     },
    "baseUrl": "./",
    "rootDir": "./",
    "verbatimModuleSyntax": false,
  },
}
{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "tmp",
    "node_modules",
    "dist",
    "migrations",
    ".dockerignore",
    "tsconfig.base.json",
    ... // all apps except plasmo one
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./apps/spark-extension/**/*.ts",
    "./apps/spark-extension/**/*.tsx",
    "./libs/**/*.ts",
    "./libs/**/*.tsx",
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
     },
    "baseUrl": "./",
    "rootDir": "./",
    "verbatimModuleSyntax": false,
  },
}
With this you're all set, no need to make changes in the base config. - paackage.json Inside here is where you put all you're stuff related to the extnsion -- displayName Required, and is from here where the extension name is set for the extension -- manifest Everything you need to add/override in the manifest can be found here. --- key So first is the key, now this is only used for development. For Iframes, you need to know the extension ID to be able to connect to the extension. And the only way to keep the ID persistent when installing extensions is to have the KEY inside the manifest. For market place production, google automatically adds the key so no need for it. Just save the ID in the production env. --- host_permissions I believe this was requied to tell which API endpoints were accessable to the extension backkground service. --- externally_connectable: [matches] used to tell which websites could use the url to connect to the extension
15 replies
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
Here is an a snipt of my project.json as well. Hope it helps and if you have any improvement suggesstions, please do share with me as well. 
{
  "name": "spark-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/spark-extension/src",
  "projectType": "application",
  "targets": {
    "build": {
      "cache": false,
      "defaultConfiguration": "production",
      "command": "plasmo build",
      "configurations": {
        "local": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.development"
        },
        "market-place": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.production && node scripts/extension-marketplace-build.js"
        }
      }
    },
    "serve": {
      "command": "plasmo dev",
      "defaultConfiguration": "local",
      "configurations": {
        "local-verbose": {
          "command": "plasmo dev --verbose --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.local"
        }
      }
    }
  },
  "tags": []
}
{
  "name": "spark-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/spark-extension/src",
  "projectType": "application",
  "targets": {
    "build": {
      "cache": false,
      "defaultConfiguration": "production",
      "command": "plasmo build",
      "configurations": {
        "local": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.development"
        },
        "market-place": {
          "command": "node scripts/delete-files.js chrome-mv3-prod && plasmo build --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.production && node scripts/extension-marketplace-build.js"
        }
      }
    },
    "serve": {
      "command": "plasmo dev",
      "defaultConfiguration": "local",
      "configurations": {
        "local-verbose": {
          "command": "plasmo dev --verbose --build-path=dist/apps/spark-extension --src-path=apps/spark-extension/src --env=apps/spark-extension/.env.local"
        }
      }
    }
  },
  "tags": []
}
15 replies
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
Hello @Amix You can use the --build-path= & --src-path= & --env= to define custom paths for the following. You'll still need to create a seperate tsconfig where you specify the exact path of your files. Also assests folder will also have to remain in the root of your project where the tsconfig is specified. Hope this helps, it was pretty tedious to make this work in NX and especially setting up a proper project structure.
15 replies
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
No description
15 replies
PD🧩 Plasmo Developers
Created by batman12340 on 1/29/2024 in #👟framework
Plasmo setup with NX console
No description
15 replies