[BUG] Development server usually doesn't update the extension or being extremely slow

What happened?

Awesome framework guys 🥳! I enjoyed building stuff in it I will try to contribute on some parts. I experienced some problems though and I have to always manually stopping the dev server and running again to see the changes on my components. I'm aware by reading the docs in some situations it's necessary to do so but my changes has been related to the content ui files which should update as my understanding. I'm not sure how to debug this as well since it successfully builds every time but just doesn't reflect the changes on browser.

I am looking for any suggestions or input how to deal with this problem. I was thinking rm -rf .plasmo build when it gets slower but not sure if that's a good way of solving slowness.

My development setup might cause this issue, I will download chrome try on that as well. Currently using:

Brave
Webstorm

For the extension, these are my deps:

"dependencies": {
"@hookform/resolvers": "^3.1.1",
"@radix-ui/react-alert-dialog": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"class-variance-authority": "^0.6.1",
"clsx": "^1.2.1",
"lucide-react": "^0.258.0",
"plasmo": "0.77.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.45.1",
"tailwind-merge": "^1.13.2",
"tailwindcss": "3.3.2",
"tailwindcss-animate": "^1.0.6",
"zod": "^3.21.4"
},
"devDependencies": {
"@plasmohq/prettier-plugin-sort-imports": "3.6.4",
"@types/chrome": "0.0.239",
"@types/node": "20.3.2",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"autoprefixer": "10.4.14",
"postcss": "8.4.24",
"prettier": "2.8.8",
"typescript": "5.1.6"
}

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

There is no output. Everything seems fine.

(OPTIONAL) Contribution

[ ] I would like to fix this BUG via a PR

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

@suchcodemuchwow can you run dev with --verbose log together with the generated manifest.json file in the dev directory. These would be helpful in pinpointing down where we should look.

I am experiencing similar, here are the logs for an 18s initial compilation, couldn't figure out why it is so much slower than NextJS.

🟡 0      | Running command: dev
🟣 Plasmo v0.73.7
🔴 The Browser Extension Framework
🟠 WARN   | A new version of plasmo is available: v0.77.5
          | Run "yarn add plasmo@0.77.5" to update
🔵 INFO   | Starting the extension development server...
🟡 1      | Creating Manifest Factory...
🟡 2      | Ensure exists: /Users/js/github/timenavi/monorepo/apps/extension/.plasmo
🟡 3      | /Users/js/github/timenavi/monorepo/apps/extension/assets/icon.png found, creating resized icons
🟡 4      | Creating static templates for popup
🟡 5      | Creating static templates for options
🟡 6      | Creating static templates for newtab
🟡 7      | Creating static templates for devtools
🟡 8      | Parsed config: { matches: [ 'https://calendar.google.com/*' ] }
🟡 9      | Adding content script:  /Users/js/github/timenavi/monorepo/apps/extension/contents/day-headers.tsx
🟡 10     | Creating content script mount for contents
🟡 11     | Parsed config: { matches: [ 'https://calendar.google.com/*' ] }
🟡 12     | Adding content script:  /Users/js/github/timenavi/monorepo/apps/extension/contents/event-tags.tsx
🟡 13     | Creating content script mount for contents
🟡 14     | Parsed config: { matches: [ 'https://calendar.google.com/*' ], css: [ 'font.css' ] }
🟡 15     | Adding content script:  /Users/js/github/timenavi/monorepo/apps/extension/contents/sidebar.tsx
🟡 16     | Creating content script mount for contents
🟡 17     | {
  messageHandlerList: [
    {
      importName: 'messagesActivityGroups',
      name: 'activityGroups',
      declaration: '"activityGroups" : {}',
      importCode: 'import { default as messagesActivityGroups } from "~background/messages/activityGroups"'
    },
    {
      importName: 'messagesEvents',
      name: 'events',
      declaration: '"events" : {}',
      importCode: 'import { default as messagesEvents } from "~background/messages/events"'
    },
    {
      importName: 'messagesMe',
      name: 'me',
      declaration: '"me" : {}',
      importCode: 'import { default as messagesMe } from "~background/messages/me"'
    }
  ],
  portHandlerList: []
}
🟡 18     | Creating BGSW entry
🟡 19     | Hash changed, updating manifest
🟡 20     | Watching the following files: Set(117) {
  '/Users/js/github/timenavi/monorepo/apps/extension/package.json',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.chrome.local',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.dev.local',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.development.local',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.local',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.chrome',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.dev',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env.development',
  '/Users/js/github/timenavi/monorepo/apps/extension/.env',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.chrome.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.development.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.chrome.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.development.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/content.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.chrome.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.development.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.chrome.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.development.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/sandbox.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.chrome.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.chrome.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.development.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.development.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.ts',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.chrome.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.chrome.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.development.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.development.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/background/index.js',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.chrome.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.development.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.tsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.chrome.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.development.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.jsx',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/popup/index.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/options/index.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/devtools/index.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.chrome.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.development.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab.html',
  '/Users/js/github/timenavi/monorepo/apps/extension/newtab/index.html'
}
🟡 21     | Starting dev server on 49986, HMR on 1815...
🔵 INFO   | Loaded environment variables from: []
🟡 0      | @plasmohq/parcel-transformer-manifest
🟡 1      | Adding locale en
🟡 2      | Adding icons
🟡 3      | Adding default_icon
🟡 4      | Adding default_popup
🟡 5      | Adding chrome_url_overrides
🟡 6      | Adding page
🟡 7      | Handling background service worker
🟡 0      | @plasmohq/parcel-bundler
🟡 0      | @plasmohq/parcel-runtime
🟡 1      | Injecting << script-runtime >> for day-headers.[hash].js 4a8ed3add5b105c1 /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/contents/day-headers.tsx
🟡 2      | @plasmohq/parcel-runtime
🟡 3      | Injecting << script-runtime >> for sidebar.[hash].js ef2008a8234064db /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/contents/sidebar.tsx
🟡 4      | @plasmohq/parcel-runtime
🟡 5      | Injecting << script-runtime >> for event-tags.[hash].js a1aef5bcd50fa40a /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/contents/event-tags.tsx
🟡 6      | @plasmohq/parcel-runtime
🟡 7      | Injecting << page-runtime >> for popup.[hash].js ce49a94f30f49edf /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/popup.tsx
🟡 8      | @plasmohq/parcel-runtime
🟡 9      | Injecting << page-runtime >> for newtab.[hash].js c0d35f837faf4084 /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/newtab.tsx
🟡 10     | @plasmohq/parcel-runtime
🟡 11     | Injecting << page-runtime >> for options.[hash].js 3355caae77327ce2 /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/options.tsx
🟡 12     | @plasmohq/parcel-runtime
🟡 13     | Injecting << background-service-runtime >> for background.[hash].js d7b9b2f81f818f0b /Users/js/github/timenavi/monorepo/apps/extension/.plasmo/static/background/index.ts
🟡 0      | @plasmohq/parcel-packager
🟡 0      | @plasmohq/parcel-optimizer-encapsulate background.1f818f0b.js background.[hash].js
🟡 0      | @plasmohq/optimizer-es:  background.1f818f0b.js background.[hash].js /Users/js/github/timenavi/monorepo
🟡 1      | optimizer-es: skipped
🟡 0      | @plasmohq/parcel-optimizer-encapsulate options.77327ce2.js options.[hash].js
🟡 1      | @plasmohq/parcel-optimizer-encapsulate build.1fa0c1bc.js build.[hash].js
🟡 2      | @plasmohq/parcel-optimizer-encapsulate day-headers.d5b105c1.js day-headers.[hash].js
🟡 0      | @plasmohq/optimizer-es:  options.77327ce2.js options.[hash].js /Users/js/github/timenavi/monorepo
🟡 1      | @plasmohq/optimizer-es:  build.1fa0c1bc.js build.[hash].js /Users/js/github/timenavi/monorepo
🟡 2      | @plasmohq/optimizer-es:  day-headers.d5b105c1.js day-headers.[hash].js /Users/js/github/timenavi/monorepo
🟡 3      | optimizer-es: skipped
🟡 4      | optimizer-es: skipped
🟡 5      | optimizer-es: skipped
🟡 0      | @plasmohq/parcel-optimizer-encapsulate newtab.7faf4084.js newtab.[hash].js
🟡 1      | @plasmohq/parcel-optimizer-encapsulate sidebar.234064db.js sidebar.[hash].js
🟡 0      | @plasmohq/optimizer-es:  newtab.7faf4084.js newtab.[hash].js /Users/js/github/timenavi/monorepo
🟡 1      | @plasmohq/optimizer-es:  sidebar.234064db.js sidebar.[hash].js /Users/js/github/timenavi/monorepo
🟡 2      | optimizer-es: skipped
🟡 3      | optimizer-es: skipped
🟡 0      | @plasmohq/parcel-optimizer-encapsulate popup.30f49edf.js popup.[hash].js
🟡 1      | @plasmohq/parcel-optimizer-encapsulate event-tags.d50fa40a.js event-tags.[hash].js
🟡 0      | @plasmohq/optimizer-es:  popup.30f49edf.js popup.[hash].js /Users/js/github/timenavi/monorepo
🟡 1      | @plasmohq/optimizer-es:  event-tags.d50fa40a.js event-tags.[hash].js /Users/js/github/timenavi/monorepo
🟡 2      | optimizer-es: skipped
🟡 3      | optimizer-es: skipped
🟢 DONE   | Extension re-packaged in 18607ms! 🚀

manifest.json

{
  "icons": {
    "16": "icon16.plasmo.a6488653.png",
    "32": "icon32.plasmo.6d942ce0.png",
    "48": "icon48.plasmo.3e8f0114.png",
    "64": "icon64.plasmo.b8637390.png",
    "128": "icon128.plasmo.b852798d.png"
  },
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "16": "icon16.plasmo.a6488653.png",
      "32": "icon32.plasmo.6d942ce0.png",
      "48": "icon48.plasmo.3e8f0114.png",
      "64": "icon64.plasmo.b8637390.png",
      "128": "icon128.plasmo.b852798d.png"
    },
    "default_popup": "popup.html"
  },
  "version": "0.0.1",
  "author": "",
  "name": "__MSG_extensionName__",
  "description": "A basic Plasmo extension.",
  "background": { "service_worker": "background.1f818f0b.js" },
  "options_ui": { "page": "options.html", "open_in_tab": true },
  "chrome_url_overrides": { "newtab": "newtab.html" },
  "permissions": ["storage", "tabs", "identity"],
  "content_scripts": [
    { "matches": ["https://calendar.google.com/*"], "js": ["day-headers.d5b105c1.js"], "css": [] },
    {
      "matches": ["https://calendar.google.com/*"],
      "js": ["sidebar.234064db.js"],
      "css": ["font.522a3ddd.css"]
    },
    { "matches": ["https://calendar.google.com/*"], "js": ["event-tags.d50fa40a.js"], "css": [] }
  ],
  "default_locale": "en",
  "host_permissions": ["https://*/*", "http://*/*"],
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8dkCx1HKo7itG8i/GsXsoINEUskXEPQQFhzbIYvg4HXDx6IeE4i6hPNR+mf9wqO6l7aUhy7STL3TMofVN3dOwpjq9dyVBFA1Ccob2vHlxlXbQaaoaBaUH5Yw2zS6tRu7gyMl33z0j/dUNrNCrOnWl9s6ZGOlO/SqF16Khnjesq9o8Di6ZkSY0Mvl8vLvH7hud186Di4taeNw6yIzkPXS1V3Qr0a3WI9uwAimhAfhHaNixSZENZHFogKpMCrIG7oeKr76wpXvaAczLbjRd5bbYxEn3Wywcuc3m42qK+dPMwtWBWmxq3NEeTq187Xpa1jiMrprxGltl4+OuvQG+fZQ8QIDAQAB",
  "oauth2": {
    "client_id": "740252141311-ao9q0lqcqsimupqu1shsurqtf25i89ba.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  },
  "content_security_policy": { "extension_pages": "script-src 'self' http://localhost;object-src 'self';" },
  "web_accessible_resources": [
    { "matches": ["https://calendar.google.com/*"], "resources": ["day-headers.382b0d5e.css"] },
    { "matches": ["https://calendar.google.com/*"], "resources": ["day-headers.382b0d5e.css"] },
    {
      "matches": ["https://calendar.google.com/*"],
      "resources": ["build.1fa0c1bc.js", "day-headers.382b0d5e.css"]
    },
    { "matches": ["<all_urls>"], "resources": ["__plasmo_hmr_proxy__"] }
  ]
}

couldn't figure out why it is so much slower than NextJS

Can you make a bench between plasmo's bundling and NextJS's static export with similar complexity to see if there's a huge diff? Plasmo is based on Parcel which uses SWC, so it's the same compiler as Next.

The key diff we would find IMO, is that NextJS can leverage more server-side resource to deliver the output so it doesn't have to bundle everything, whereas for extension, Plasmo has to create a static bundle for the browser to load. So there's more stuffs being resolved and added into the final bundle compared to a SSR web app.

Also one aspect to think about (we should add a best-practice section somewhere in the docs maybe), is that it might be beneficial to reduce the complexity of each CSUI. Unlike web app where the dev server can deliver small piece for the browser to evaluate, extension must include everything in its bundle.

I've been meaning to raise a similar issue - there are two problems noted here that I'm also having 1) the slowness and 2) the fact that the new code is often not successfully loaded after changes. (@suchcodemuchwow, if it helps, you may not need to restart the server; I find it works to save the file to trigger an additional compilation then reload the extension manually in Chrome.)

(2) has gotten much more frequent as my extension has gotten bigger and recompilation slower. I think it is actually composed of two sub-issues: (2a) is that when the cli reports 'Extension repackaged' it does not always have the latest version of the file I'm working on. After it has repackaged once I need to save the file again to catch the latest change. (2b) is that after I have done this the extension is not always reloaded in Chrome so Chrome doesn't have the latest code.

To give you an idea it currently takes me 40-50secs to start the dev server. The extension is fairly small (--verbose reports 117 files which includes 4 content scripts). Repackaging is usually around 3-5 secs. However, if there was an error like invalid JSX this goes up to 20-30 secs. It's hard to compare complexity with my Next.js site but that takes 1-2 secs and has more frontend components and overall files. Would be great to improve the speed, but I'm more bothered by the failure to reload since it means I am compiling twice and constantly manually reloading and refreshing.

It might be beneficial to reduce the complexity of each CSUI

Would you be able to elaborate on that? Do you mean if we split one CSUI into two we'll see faster compilation?

CLARIFICATION: the Next.js site is 1-2secs for the dev server to start, 20-25secs for static export (next build). That's doing a prod build though.

Hello folks 👋 Sorry giving late response, I just wanted to experiment and see if the issues will continue after changing the browser. Luckily most of my issues are resolved by changing the browser to chrome from brave which both browsers only used in clean state without any profiles/extensions/history etc. As I know both of them are using the same architecture but under the hood things are different I suppose.

There is weird bug occurring from time to time and just because I forgot --verbose flag most of the time. It's hard to understand without being able to reproduce it, but I will try my best to remember --verbose. So the bug happens in this way If I am doing bunch of different changes in my source files and save multiple times after certain period, there is a mismatch happening in saved state and extension. If I explain it by giving an example:

--- 15 hours of work 🤯---

<p>Tired emoji</p>
// Save the file
// Hot reload happens
// Tired emoji doesn't show up 😥

// To verify what's wrong change source code to
<p>Confused emoji</p>
// Magically "Tired emoji" shows up but it's 1 state before 🤷🏻‍♂️

Can also confirm I’ve experienced the bug described above. I then need to save it one more time before getting the latest update.

Haven’t found steps to reproduce yet, probably worth another issue.

On Tue, 11 Jul 2023 at 21:56, Baturalp Gurdin @.***> wrote:

Hello folks 👋 Sorry giving late response, I just wanted to experiment and see if the issues will continue after changing the browser. Luckily most of my issues are resolved by changing the browser to chrome from brave which both browsers only used in clean state without any profiles/extensions/history etc. As I know both of them are using the same architecture but under the hood things are different I suppose.

There is weird bug occurring from time to time and just because I forgot --verbose flag most of the time. It's hard to understand without being able to reproduce it, but I will try my best to remember --verbose. So the bug happens in this way If I am doing bunch of different changes in my source files and save multiple times after certain period, there is a mismatch happening in saved state and extension. If I explain it by giving an example:

--- 15 hours of work 🤯---

Tired emoji

// Save the file // Hot reload happens // Tired emoji doesn't show up 😥

// To verify what's wrong change source code to

Confused emoji

// Magically "Tired emoji" shows up but it's 1 state before 🤷🏻‍♂️

— Reply to this email directly, view it on GitHub https://github.com/PlasmoHQ/plasmo/issues/664#issuecomment-1631497882, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWOFHBOOVWQGYJ6GISL2ELXPW4X5ANCNFSM6AAAAAA2AETXQI . You are receiving this because you commented.Message ID: @.***>

Here's what I'm seeing with --verbose when there is a persistent failure to reload. Instead of "On Build Repackaged" it should be printing 'On HMR Update', 'On source changed' and 'reloading CS', but it's getting stuck.

Screenshot 2023-07-27 at 11 21 22

Is work still ongoing on this? Massive issue for me - I can only see my changes if I either: A) delete the build folder every change B) "empty" save package.json with no actual changes to trigger "package.json changed, updating manifest overides. You might need to restart the dev server". This is annoying to do, because it crashes the extension window every time and I have to open a new tab to keep developing the extension page.

Other things I tried: running with pnpm run dev, using the lab experimental mode (made things worse & threw a bunch of other errors).

I'm building a 1-page extension with barely any dependencies, pure Plasmo & tailwind, I just started development yesterday and have very few components.

Love Plasmo, this should probably be #1 priority bug to fix.

Edit:

I suspect it could also be something to do with incorrectly named file imports. I was importing a file called tasks.tsx into my newtab/index.tsx file, but I was importing it as import Tasks from "./Tasks" with a capital T. This doesn't throw console errors at build time but when I changed to import Tasks from "./tasks auto-reload/HMR started working again.

Also noticed something interesting with hot reloading & tailwind - if you add a class e.g. "bg-red-200", save, then remove that class and add another e.g. "bg-green-200", save, then inspect the element in Chrome, both classes will be there instead of just one, and one will take precedence over the other.

Running into this issue as well. It's making it really hard to debug knowing some of my changes may or may not be there.

Any progress made on this bug? Any potential suspects of what the issue can be?

I am running this issue as well, every time I need to stop pnpm run dev and rerun it and then I can see my changes reflects.

Actually I noticed exact same symptoms and the issue (stale content) on pages, not Content Scripts. I am wondering if there is a way to directly influence parcel config and thus disable caching, maybe that would be slower but would instead work...

Also noticing very very long build times now that I have implemented tailwindcss.

Here is my --verbose output:

pnpm dev --verbose

> any-dice@0.0.1 dev /home/daniel/Projects/any-dice
> plasmo dev "--verbose"

🟡 0      | Running command: dev
🟣 Plasmo v0.84.1
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🟡 1      | Starting dev server on localhost:40659, HMR on localhost:1815...
🟡 2      | Creating Manifest Factory...
🟡 3      | Loaded env from .env.development
🟡 4      | Ensure exists: /home/daniel/Projects/any-dice/.plasmo
🟡 5      | /home/daniel/Projects/any-dice/assets/icon.png found, creating resized icons
🟡 6      | Loaded env from .env.development
🟡 7      | Creating static templates for popup
🟡 8      | Creating static templates for options
🟡 9      | Creating static templates for newtab
🟡 10     | Creating static templates for devtools
🟡 11     | Creating static templates for sidepanel
🟡 12     | { messageHandlerList: [], portHandlerList: [] }
🟡 13     | Creating BGSW entry
🟡 14     | Hash changed, updating manifest
🟡 15     | Watching the following files: Set(99) {
  '/home/daniel/Projects/any-dice/package.json',
  '/home/daniel/Projects/any-dice/.env.chrome.local',
  '/home/daniel/Projects/any-dice/.env.dev.local',
  '/home/daniel/Projects/any-dice/.env.development.local',
  '/home/daniel/Projects/any-dice/.env.local',
  '/home/daniel/Projects/any-dice/.env.chrome',
  '/home/daniel/Projects/any-dice/.env.dev',
  '/home/daniel/Projects/any-dice/.env.development',
  '/home/daniel/Projects/any-dice/.env',
  '/home/daniel/Projects/any-dice/content.chrome.ts',
  '/home/daniel/Projects/any-dice/content.development.ts',
  '/home/daniel/Projects/any-dice/content.ts',
  '/home/daniel/Projects/any-dice/content.chrome.svelte',
  '/home/daniel/Projects/any-dice/content.development.svelte',
  '/home/daniel/Projects/any-dice/content.svelte',
  '/home/daniel/Projects/any-dice/content.chrome.js',
  '/home/daniel/Projects/any-dice/content.development.js',
  '/home/daniel/Projects/any-dice/content.js',
  '/home/daniel/Projects/any-dice/sandbox.chrome.ts',
  '/home/daniel/Projects/any-dice/sandbox.development.ts',
  '/home/daniel/Projects/any-dice/sandbox.ts',
  '/home/daniel/Projects/any-dice/sandbox.chrome.svelte',
  '/home/daniel/Projects/any-dice/sandbox.development.svelte',
  '/home/daniel/Projects/any-dice/sandbox.svelte',
  '/home/daniel/Projects/any-dice/sandbox.chrome.js',
  '/home/daniel/Projects/any-dice/sandbox.development.js',
  '/home/daniel/Projects/any-dice/sandbox.js',
  '/home/daniel/Projects/any-dice/background.chrome.ts',
  '/home/daniel/Projects/any-dice/background/index.chrome.ts',
  '/home/daniel/Projects/any-dice/background.development.ts',
  '/home/daniel/Projects/any-dice/background/index.development.ts',
  '/home/daniel/Projects/any-dice/background.ts',
  '/home/daniel/Projects/any-dice/background/index.ts',
  '/home/daniel/Projects/any-dice/background.chrome.js',
  '/home/daniel/Projects/any-dice/background/index.chrome.js',
  '/home/daniel/Projects/any-dice/background.development.js',
  '/home/daniel/Projects/any-dice/background/index.development.js',
  '/home/daniel/Projects/any-dice/background.js',
  '/home/daniel/Projects/any-dice/background/index.js',
  '/home/daniel/Projects/any-dice/popup.chrome.svelte',
  '/home/daniel/Projects/any-dice/popup/index.chrome.svelte',
  '/home/daniel/Projects/any-dice/popup.development.svelte',
  '/home/daniel/Projects/any-dice/popup/index.development.svelte',
  '/home/daniel/Projects/any-dice/popup.svelte',
  '/home/daniel/Projects/any-dice/popup/index.svelte',
  '/home/daniel/Projects/any-dice/options.chrome.svelte',
  '/home/daniel/Projects/any-dice/options/index.chrome.svelte',
  '/home/daniel/Projects/any-dice/options.development.svelte',
  '/home/daniel/Projects/any-dice/options/index.development.svelte',
  '/home/daniel/Projects/any-dice/options.svelte',
  '/home/daniel/Projects/any-dice/options/index.svelte',
  '/home/daniel/Projects/any-dice/devtools.chrome.svelte',
  '/home/daniel/Projects/any-dice/devtools/index.chrome.svelte',
  '/home/daniel/Projects/any-dice/devtools.development.svelte',
  '/home/daniel/Projects/any-dice/devtools/index.development.svelte',
  '/home/daniel/Projects/any-dice/devtools.svelte',
  '/home/daniel/Projects/any-dice/devtools/index.svelte',
  '/home/daniel/Projects/any-dice/newtab.chrome.svelte',
  '/home/daniel/Projects/any-dice/newtab/index.chrome.svelte',
  '/home/daniel/Projects/any-dice/newtab.development.svelte',
  '/home/daniel/Projects/any-dice/newtab/index.development.svelte',
  '/home/daniel/Projects/any-dice/newtab.svelte',
  '/home/daniel/Projects/any-dice/newtab/index.svelte',
  '/home/daniel/Projects/any-dice/sidepanel.chrome.svelte',
  '/home/daniel/Projects/any-dice/sidepanel/index.chrome.svelte',
  '/home/daniel/Projects/any-dice/sidepanel.development.svelte',
  '/home/daniel/Projects/any-dice/sidepanel/index.development.svelte',
  '/home/daniel/Projects/any-dice/sidepanel.svelte',
  '/home/daniel/Projects/any-dice/sidepanel/index.svelte',
  '/home/daniel/Projects/any-dice/popup.chrome.html',
  '/home/daniel/Projects/any-dice/popup/index.chrome.html',
  '/home/daniel/Projects/any-dice/popup.development.html',
  '/home/daniel/Projects/any-dice/popup/index.development.html',
  '/home/daniel/Projects/any-dice/popup.html',
  '/home/daniel/Projects/any-dice/popup/index.html',
  '/home/daniel/Projects/any-dice/options.chrome.html',
  '/home/daniel/Projects/any-dice/options/index.chrome.html',
  '/home/daniel/Projects/any-dice/options.development.html',
  '/home/daniel/Projects/any-dice/options/index.development.html',
  '/home/daniel/Projects/any-dice/options.html',
  '/home/daniel/Projects/any-dice/options/index.html',
  '/home/daniel/Projects/any-dice/devtools.chrome.html',
  '/home/daniel/Projects/any-dice/devtools/index.chrome.html',
  '/home/daniel/Projects/any-dice/devtools.development.html',
  '/home/daniel/Projects/any-dice/devtools/index.development.html',
  '/home/daniel/Projects/any-dice/devtools.html',
  '/home/daniel/Projects/any-dice/devtools/index.html',
  '/home/daniel/Projects/any-dice/newtab.chrome.html',
  '/home/daniel/Projects/any-dice/newtab/index.chrome.html',
  '/home/daniel/Projects/any-dice/newtab.development.html',
  '/home/daniel/Projects/any-dice/newtab/index.development.html',
  '/home/daniel/Projects/any-dice/newtab.html',
  '/home/daniel/Projects/any-dice/newtab/index.html',
  '/home/daniel/Projects/any-dice/sidepanel.chrome.html',
  '/home/daniel/Projects/any-dice/sidepanel/index.chrome.html',
  '/home/daniel/Projects/any-dice/sidepanel.development.html',
  '/home/daniel/Projects/any-dice/sidepanel/index.development.html',
  '/home/daniel/Projects/any-dice/sidepanel.html',
  '/home/daniel/Projects/any-dice/sidepanel/index.html'
}
🔵 INFO   | Loaded environment variables from: [ '.env.development' ]
🟡 0      | @plasmohq/parcel-transformer-manifest
🟡 1      | Adding icons
🟡 2      | Adding default_icon
🟡 3      | Adding default_popup
🟡 4      | Handling background scripts
🟡 5      | Handling background service worker
🟡 0      | @plasmohq/parcel-bundler
🟡 0      | @plasmohq/parcel-runtime Injecting << page-runtime >> for popup.[hash].js 8e90d8397e394c8b /home/daniel/Projects/any-dice/.plasmo/static/popup.ts
🟡 1      | @plasmohq/parcel-runtime Injecting << background-service-runtime >> for static/background/index.js c338908e704c91f1 /home/daniel/Projects/any-dice/.plasmo/static/background/index.ts
🟡 0      | @plasmohq/parcel-packager
🟡 0      | @plasmohq/parcel-optimizer-encapsulate popup.7e394c8b.js popup.[hash].js
🟡 1      | @plasmohq/parcel-optimizer-encapsulate static/background/index.js static/background/index.js
🟡 0      | @plasmohq/optimizer-es:  popup.7e394c8b.js popup.[hash].js /home/daniel/Projects/any-dice
🟡 1      | @plasmohq/optimizer-es:  static/background/index.js static/background/index.js /home/daniel/Projects/any-dice
🟡 2      | optimizer-es: skipped
🟡 3      | optimizer-es: skipped
🟢 DONE   | Extension re-packaged in 158685ms! 🚀

The parcel Bundler step is what took almost all of the time.

I'm experiencing this as well. To reliably have changes show up in a content script in Chrome, I have to save a file, add a space to the file, save it again, then the page refreshes a second time and has my updated content. I'm on v0.84.1

Experiencing the same slowness, it takes a while a while to reload.

I've been secretly wondering that someone will write one using https://bun.sh/docs/bundler :)

Plasmo uses Parcel 2.

Bumping this thread so the issue gets looked at, really high build times on my end as well. Startup takes anywhere between 30 - 75s and the updates are anywhere from 7 - 30s

Unfortunately Louis is very busy with his project so bumping won't do much. Perhaps if we could find an expert with JS/Parcel we could organize a contribution to debug it. I am in the process rewriting everything from Vue to React hoping this would help.

I had a similar issue, and found a fix. I'm using React with Plasmo, and whenever I changed a content script, I had to make an extra change (like adding a space) after the first save, and it would then actually update the UI on the second save. Another issue was that content scripts wouldn't even load until I edited them at least once first. A fix I found was to move all content scripts directly under the contents folder, and removing any subfolders I previously had. Now my HMR is working properly.

I had to make an extra change (like adding a space) after the first save, and it would then actually update the UI on the second save. Another issue was that content scripts wouldn't even load until I edited them at least once first.

I’m having the same issue and will give your solution a try!

Is the "Save, add space, save again" currently the best workaround for this issue?

Update on my end, adding a custom .parcelrc with the following has increased development speeds by a lot. Bundling the worker still takes time as I am working on a complex app, but rendering JSX has become super fast. Try it out if it helps, maybe some options like reporters, optimizers are unnecessary, but still give it a try. I also pass the --no-minify flag while running the plasmo command. Hope it helps!

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": [
    "@plasmohq/parcel-config"
  ],
  "reporters": [],
  "optimizers": {
    "*.js": [],
    "*.ts": [],
    "*.svg": [],
    "*.png": []
  },
  "bundler": "@parcel/bundler-experimental"
}

The same for me, everything in the thread didn't help

PlasmoHQ / plasmo