PlasmoHQ · louisgv · Oct 18, 2022 · Oct 15, 2022 · Oct 15, 2022 · Oct 15, 2022
diff --git a/cli/create-plasmo/package.json b/cli/create-plasmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-plasmo",
-  "version": "0.57.0-alpha.1",
+  "version": "0.57.0-alpha.2",
   "description": "Create Plasmo Framework Browser Extension",
   "main": "dist/index.js",
   "bin": "dist/index.js",

diff --git a/cli/plasmo/package.json b/cli/plasmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plasmo",
-  "version": "0.57.0-alpha.1",
+  "version": "0.57.0-alpha.2",
   "description": "The Plasmo Platform CLI",
   "main": "dist/index.js",
   "types": "dist/type.d.ts",

diff --git a/cli/plasmo/src/features/extension-devtools/project-path.ts b/cli/plasmo/src/features/extension-devtools/project-path.ts
@@ -16,18 +16,23 @@ export enum WatchReason {
 
   BackgroundIndex,
 
-  ContentsIndex,
-  ContentsDirectory,
+  ContentScriptIndex,
+  ContentScriptsDirectory,
 
   NewtabIndex,
+  NewtabHtml,
+
   DevtoolsIndex,
+  DevtoolsHtml,
+
   PopupIndex,
+  PopupHtml,
+
   OptionsIndex,
+  OptionsHtml,
 
-  NewtabHtml,
-  DevtoolsHtml,
-  PopupHtml,
-  OptionsHtml
+  SandboxIndex,
+  SandboxesDirectory
 }
 
 type DirectoryWatchTuple = [WatchReason, string]
@@ -43,6 +48,19 @@ export const getProjectPath = (
   browserTarget: string,
   uiExt: SupportedUiExt
 ) => {
+  /**
+   * only pointing to 1 particular file path
+   */
+  const getModuleList = (moduleName: string) => [
+    resolve(sourceDirectory, `${moduleName}.ts`),
+    resolve(sourceDirectory, `${moduleName}.${browserTarget}.ts`),
+    resolve(sourceDirectory, `${moduleName}${uiExt}`),
+    resolve(sourceDirectory, `${moduleName}.${browserTarget}${uiExt}`)
+  ]
+
+  /**
+   * crawl index, and only care about one extension
+   */
   const getIndexList = (moduleName: string, ext = ".ts") => [
     resolve(sourceDirectory, `${moduleName}.${browserTarget}${ext}`),
     resolve(sourceDirectory, moduleName, `index.${browserTarget}${ext}`),
@@ -67,20 +85,19 @@ export const getProjectPath = (
     resolve(sourceDirectory, ".env.development.local")
   ]
 
-  const contentIndexList = [
-    resolve(sourceDirectory, "content.ts"),
-    resolve(sourceDirectory, `content.${browserTarget}.ts`),
-    resolve(sourceDirectory, `content${uiExt}`),
-    resolve(sourceDirectory, `content.${browserTarget}${uiExt}`)
-  ]
-
   const backgroundIndexList = getIndexList("background")
 
+  const contentIndexList = getModuleList("content")
+  const sandboxIndexList = getModuleList("sandbox")
+
   const watchPathReasonMap = {
     [packageFilePath]: WatchReason.PackageJson,
 
     ...getWatchReasonMap(envFileList, WatchReason.EnvFile),
-    ...getWatchReasonMap(contentIndexList, WatchReason.ContentsIndex),
+
+    ...getWatchReasonMap(contentIndexList, WatchReason.ContentScriptIndex),
+    ...getWatchReasonMap(sandboxIndexList, WatchReason.SandboxIndex),
+
     ...getWatchReasonMap(backgroundIndexList, WatchReason.BackgroundIndex),
 
     ...getWatchReasonMap(popupIndexList, WatchReason.PopupIndex),
@@ -95,31 +112,39 @@ export const getProjectPath = (
   }
 
   const contentsDirectory = resolve(sourceDirectory, "contents")
+  const sandboxesDirectory = resolve(sourceDirectory, "sandboxes")
   const tabsDirectory = resolve(sourceDirectory, "tabs")
 
   const watchDirectoryEntries = [
+    [WatchReason.SandboxesDirectory, sandboxesDirectory],
     [WatchReason.TabsDirectory, tabsDirectory],
-    [WatchReason.ContentsDirectory, contentsDirectory],
+    [WatchReason.ContentScriptsDirectory, contentsDirectory],
     [WatchReason.AssetsDirectory, assetsDirectory]
   ] as Array<DirectoryWatchTuple>
 
   const knownPathSet = new Set(Object.keys(watchPathReasonMap))
 
   return {
     popupIndexList,
-    optionsIndexList,
-    devtoolsIndexList,
-    newtabIndexList,
-
     popupHtmlList,
+
+    optionsIndexList,
     optionsHtmlList,
+
+    devtoolsIndexList,
     devtoolsHtmlList,
+
+    newtabIndexList,
     newtabHtmlList,
 
     backgroundIndexList,
+
     contentIndexList,
     contentsDirectory,
 
+    sandboxIndexList,
+    sandboxesDirectory,
+
     tabsDirectory,
 
     watchPathReasonMap,

diff --git a/cli/plasmo/src/features/extension-devtools/project-watcher.ts b/cli/plasmo/src/features/extension-devtools/project-watcher.ts
@@ -95,14 +95,16 @@ export const handleProjectFile = async (
       plasmoManifest.toggleBackground(path, isEnabled)
       return
     }
-    case WatchReason.ContentsIndex:
-    case WatchReason.ContentsDirectory: {
+    case WatchReason.ContentScriptIndex:
+    case WatchReason.ContentScriptsDirectory: {
       await plasmoManifest.toggleContentScript(path, isEnabled)
       return
     }
 
+    case WatchReason.SandboxIndex:
+    case WatchReason.SandboxesDirectory:
     case WatchReason.TabsDirectory: {
-      await plasmoManifest.toggleTab(path, isEnabled)
+      await plasmoManifest.togglePage(path, isEnabled)
       return
     }
 

diff --git a/cli/plasmo/src/features/manifest-factory/base.ts b/cli/plasmo/src/features/manifest-factory/base.ts
@@ -357,7 +357,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
   addDirectory = async (
     path: string,
-    toggleDynamicPath = this.toggleContentScript
+    toggleDynamicPath: typeof this.toggleContentScript
   ) => {
     if (!existsSync(path)) {
       return false
@@ -377,9 +377,9 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
   addContentScriptsDirectory = async (
     contentsDirectory = this.projectPath.contentsDirectory
-  ) => this.addDirectory(contentsDirectory)
+  ) => this.addDirectory(contentsDirectory, this.toggleContentScript)
 
-  toggleTab = async (path?: string, enable = false) => {
+  togglePage = async (path?: string, enable = false) => {
     if (this.isPathInvalid(path)) {
       return false
     }
@@ -391,14 +391,16 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
       const parsedModulePath = parse(modulePath)
 
-      await this.#scaffolder.createTabMount(parsedModulePath)
+      await this.#scaffolder.createPageMount(parsedModulePath)
     }
 
+    this.#hash = ""
+
     return enable
   }
 
-  addTabsDirectory = async (tabsDirectory = this.projectPath.tabsDirectory) =>
-    this.addDirectory(tabsDirectory, this.toggleTab)
+  addPagesDirectory = async (directory: string) =>
+    this.addDirectory(directory, this.togglePage)
 
   write = (force = false) => {
     this.#prevHash = this.#hash

diff --git a/cli/plasmo/src/features/manifest-factory/create-manifest.ts b/cli/plasmo/src/features/manifest-factory/create-manifest.ts
@@ -16,7 +16,12 @@ export async function createManifest(bundleConfig: PlasmoBundleConfig) {
 
   await plasmoManifest.startup()
 
-  const { contentIndexList, backgroundIndexList } = plasmoManifest.projectPath
+  const {
+    contentIndexList,
+    backgroundIndexList,
+    tabsDirectory,
+    sandboxesDirectory
+  } = plasmoManifest.projectPath
 
   const contentIndex = contentIndexList.find(existsSync)
   const backgroundIndex = backgroundIndexList.find(existsSync)
@@ -26,7 +31,9 @@ export async function createManifest(bundleConfig: PlasmoBundleConfig) {
     plasmoManifest.toggleContentScript(contentIndex, true),
     plasmoManifest.toggleBackground(backgroundIndex, true),
     plasmoManifest.addContentScriptsDirectory(),
-    plasmoManifest.addTabsDirectory()
+
+    plasmoManifest.addPagesDirectory(tabsDirectory),
+    plasmoManifest.addPagesDirectory(sandboxesDirectory)
   ])
 
   const hasEntrypoints = initResults.flat()

diff --git a/cli/plasmo/src/features/manifest-factory/scaffolder.ts b/cli/plasmo/src/features/manifest-factory/scaffolder.ts
@@ -8,6 +8,7 @@ import { vLog } from "@plasmo/utils"
 import { toPosix } from "~features/helpers/path"
 
 import type { BaseFactory } from "./base"
+import { isSupportedUiExt } from "./ui-library"
 
 type ExtensionUIPage = "popup" | "options" | "devtools" | "newtab"
 
@@ -126,26 +127,38 @@ export class Scaffolder {
     return this.generateHtml(outputHtmlPath, scriptMountPath, htmlFile)
   }
 
-  createTabMount = async (module: ParsedPath) => {
-    vLog(`Creating tab mount template for ${module.dir}`)
+  createPageMount = async (module: ParsedPath) => {
+    vLog(`Creating page mount template for ${module.dir}`)
     const { dotPlasmoDirectory } = this.commonPath
 
     const staticModulePath = resolve(dotPlasmoDirectory, module.dir)
+    const htmlPath = resolve(staticModulePath, `${module.name}.html`)
     await ensureDir(staticModulePath)
 
-    const tabScriptPath = resolve(
-      staticModulePath,
-      `${module.name}${this.mountExt}`
-    )
+    const isUiExt = isSupportedUiExt(module.ext)
 
-    const tabHtmlPath = resolve(staticModulePath, `${module.name}.html`)
+    if (isUiExt) {
+      const scriptPath = resolve(
+        staticModulePath,
+        `${module.name}${this.mountExt}`
+      )
 
-    await Promise.all([
-      this.#cachedGenerate(`index${this.mountExt}`, tabScriptPath, {
-        __plasmo_import_module__: `~${toPosix(join(module.dir, module.name))}`
-      }),
-      this.generateHtml(tabHtmlPath, `./${module.name}${this.mountExt}`)
-    ])
+      await Promise.all([
+        this.#cachedGenerate(`index${this.mountExt}`, scriptPath, {
+          __plasmo_import_module__: `~${toPosix(join(module.dir, module.name))}`
+        }),
+        this.generateHtml(htmlPath, `./${module.name}${this.mountExt}`)
+      ])
+    } else {
+      await Promise.all([
+        this.generateHtml(
+          htmlPath,
+          `~${toPosix(join(module.dir, module.name))}${module.ext}`
+        )
+      ])
+    }
+
+    return htmlPath
   }
 
   createContentScriptMount = async (module: ParsedPath) => {

diff --git a/cli/plasmo/src/features/manifest-factory/ui-library.ts b/cli/plasmo/src/features/manifest-factory/ui-library.ts
@@ -11,10 +11,15 @@ const supportedUiLibraries = ["react", "svelte", "vue", "vanilla"] as const
 
 type SupportedUiLibraryName = typeof supportedUiLibraries[number]
 
-const supportedUiExt = [".ts", ".tsx", ".svelte", ".vue"] as const
+const supportedUiExt = [".tsx", ".svelte", ".vue"] as const
 
 export type SupportedUiExt = typeof supportedUiExt[number]
 
+const supportedUiExtSet = new Set(supportedUiExt)
+
+export const isSupportedUiExt = (ext: string): ext is SupportedUiExt =>
+  supportedUiExtSet.has(ext as SupportedUiExt)
+
 export type UiLibrary = {
   name: SupportedUiLibraryName
   path: `${SupportedUiLibraryName}${number | ""}`
@@ -27,7 +32,7 @@ export type ScaffolderMountExt = typeof supportedMountExt[number]
 
 export type UiExtMap = {
   uiExt: SupportedUiExt
-  mountExt: SupportedUiExt
+  mountExt: ScaffolderMountExt
 }
 
 const uiLibraryError = `No supported UI library found.  You can file an RFC for a new UI Library here: https://github.com/PlasmoHQ/plasmo/issues`
@@ -117,7 +122,7 @@ export const getUiExtMap = (
       }
     case "vanilla":
       return {
-        uiExt: ".ts",
+        uiExt: ".tsx",
         mountExt: ".ts"
       }
     default:

diff --git a/packages/parcel-config/package.json b/packages/parcel-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-config",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/packages/parcel-resolver/package.json b/packages/parcel-resolver/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-resolver",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Plasmo Parcel Resolver",
   "files": [
     "dist"
@@ -30,7 +30,6 @@
     "@parcel/types": "2.7.0",
     "@parcel/hash": "2.7.0",
     "@parcel/plugin": "2.7.0",
-    "@parcel/types": "2.7.0",
     "got": "12.5.2"
   }
 }
diff --git a/packages/parcel-runtime/package.json b/packages/parcel-runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-runtime",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Plasmo Parcel Runtime",
   "files": [
     "dist"

diff --git a/packages/parcel-runtime/src/runtimes/script-runtime.ts b/packages/parcel-runtime/src/runtimes/script-runtime.ts
@@ -25,7 +25,7 @@ if (!parent || !parent.isParcelRequire) {
         hmrAcceptCheck(module.bundle.root, asset.id, asset.depsByBundle)
     )
     // script-runtime cannot HMR, skipping this update cycle
-    if (canHmr || document.hidden) {
+    if (canHmr) {
       return
     }
 

diff --git a/packages/parcel-transformer-manifest/package.json b/packages/parcel-transformer-manifest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-transformer-manifest",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Plasmo Parcel Transformer for Web Extension Manifest",
   "files": [
     "dist",

diff --git a/packages/parcel-transformer-manifest/src/handle-deep-loc.ts b/packages/parcel-transformer-manifest/src/handle-deep-loc.ts
@@ -17,7 +17,6 @@ const DEEP_LOCS = [
   ["chrome_url_overrides"],
   ["devtools_page"],
   ["options_ui", "page"],
-  ["sandbox", "pages"],
   ["sidebar_action", "default_icon"],
   ["sidebar_action", "default_panel"],
   ["storage", "managed_schema"],