How to add additional pages ? How to layout code to share components between pages ?

[stevebeauge]

I'm prototyping plasmo to migrate an extension project from a customized vite build process to something more modern. This is the first time I try this framework, I hope I have not missed some obvious things.

The purpose of my extension is to add a button on top of some html form fields, based on some business rules. When the button is clicked, a modal should open, ask for some user input and inject data in the form field.

Current implementaion have a content.ts script, which tweak the active page DOM to inject the button (vanillla injection, based on document.createElement). The onclick event of the button create an overlay iframe that points to a custom html page packed with the extension (declared in the web_accessible_resources node of the manifest). The extension also contains a popup page which provide UI to authenticate. Both "modal" and popup pages share data using localstorage and react component through a "common" folder.

What is the proper plasmo way to achieve the same?

What I tried:

• migrated my custom modal.html page as a sandbox page (not sure to understand the concept of sandbox pages)
• migrated my popup.html page as popup/index.tsx plasmo page
• copy all common code inside src/common folder.

Unfortunately, it does not works.

• running pnpm run dev works for popup page, and content script, but when trying to reach sandboxes/modal.html, I get some script error (browser-polyfill telling me I'm not in a browser extension
• running pnpm run build does not work at all. It throw errors like this:

> plasmo build "--verbose"

🟡 0      | Running command: build
🟣 Plasmo v0.77.5
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🟡 1      | Creating Manifest Factory...
🟡 2      | Loaded env from .env.production
🟡 3      | Ensure exists: D:\path\to\myextension\.plasmo
🟡 4      | Plasmo version file not found, busting cache...
🟡 5      | D:\path\to\myextension\assets\icon.png found, creating resized icons
🟡 6      | Loaded env from .env.production
🟡 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 page mount template for sandboxes
🟡 12     | Parsed config: { matches: [ '<all_urls>' ], all_frames: true }
🟡 13     | Adding content script:  D:\path\to\myextension\src\contents\TriggerSearchButton.tsx
🟡 14     | Creating content script mount for contents
🟡 15     | { messageHandlerList: [], portHandlerList: [] }
🟡 16     | Hash changed, updating manifest
🔵 INFO   | Loaded environment variables from: [ '.env.production' ]
🟡 0      | Reinitializing remote cache directory
🟡 0      | @plasmohq/parcel-transformer-manifest
🟡 1      | Adding sandbox page: Modal.tsx
🟡 2      | Adding icons
🟡 3      | Adding default_icon
🟡 4      | Adding default_popup
🟡 5      | Handling background scripts
🔴 ERROR  | Failed to resolve '../../src/popup/index.tsx' from './.plasmo/static/popup.tsx'
🟡 17     | undefined
🔴 EXIT   | 👋 Good bye and have a great day!
 ELIFECYCLE  Command failed with exit code 1.

Which is weird, since the ./.plasmo/static/popup.tsx exists and the relative path actually resolves the src file.

Even weirder, when I run a second time the build command, I get a new error:

🟡 4      | Adding default_popup
🟡 5      | Handling background scripts
🔴 ERROR  | Failed to resolve '../common/styles' from './src/sandboxes/Modal.tsx'
🟡 16     | undefined

Seems like everytime I try to build, the compiler is able to advance one more step.

I feel confused. The documentation did not help me to understand:

• how to have another page loadable inside an iframe
• where to place common code
• troubleshoot my issue.

I strongly feel plasmo will have a great value in my project (multiple browser target, hot refresh, ...). But only if I can actually bootstrap my project.

[stevebeauge]

TRied using "tab" page instead of sandbox, but still have compilation issues

[stevebeauge]

Finally rebuilt, step by steps the extension.

This time, everything is working as expected.

Not sure to get exactly what was wrong, but to conclude I had to create a new "Tab" page, declare it in the manifest part inside the package.josn file

[louisgv]

how to have another page loadable inside an iframe

The tab page should be the right thing to use: https://docs.plasmo.com/framework/tab-pages

where to place common code

We should add a "Best practice" for this? This portion is left out because we were still building out the framework and I was hoping that the framework ought to support many variation of code structure. But the higher level gist/limitation is that:

• Shared code should not be inside entry directory (/contents/* or /sandbox/*) OR exported from an entry file
• Put shared code inside a /shared/ directory (or /src/shared). I generally use /core as my own convention, and shared get move into a package in monorepo.

Which is weird, since the ./.plasmo/static/popup.tsx exists and the relative path actually resolves the src file.

Based on the verbose log (thanks for it btw, super helpful), it seems ../common/styles should point to a file? How are you importing it in the actual code? I don't recall us automatically resolving style extension (css/scss), so the error should have shown something like ../common/styles.css :-?....

[stevebeauge]

Thanks for the repo layout advice.

Regarding styles import, because I'm using Microsoft fluentui 9 design system, styling consists in using their home made Griffel css-in-js system. So /common/styles is a actually a TS file, not a CSS or SCSS one.

[louisgv]

Hmm interesting... griffel is a runtime mod so it should work and be picked up as deps of csui. Does all the autoreload works now, or is it still pretty spotty for you still? If we have a simple reprod repo with griffel, that might help triage the original issue if needed :-?

[stevebeauge]

how to have another page loadable inside an iframe

The tab page should be the right thing to use: https://docs.plasmo.com/framework/tab-pages

where to place common code

We should add a "Best practice" for this? This portion is left out because we were still building out the framework and I was hoping that the framework ought to support many variation of code structure. But the higher level gist/limitation is that:

• Shared code should not be inside entry directory (/contents/* or /sandbox/*) OR exported from an entry file
• Put shared code inside a /shared/ directory (or /src/shared). I generally use /core as my own convention, and shared get move into a package in monorepo.

Which is weird, since the ./.plasmo/static/popup.tsx exists and the relative path actually resolves the src file.

Based on the verbose log (thanks for it btw, super helpful), it seems ../common/styles should point to a file? How are you importing it in the actual code? I don't recall us automatically resolving style extension (css/scss), so the error should have shown something like ../common/styles.css :-?....

Thanks for your concern.
But as I said,starting from scratch solved the issue .
I probably miss or mess something with my imports.

I didn't keep my repro, since it was not working