[RFC] @plasmohq/devtools

[ColdSauce]

How do you envision this feature/change to look/work like?

We have DevTools support, but we need to think about how to best integrate the sub-components like Panels, etc.

What is the purpose of this change/feature? Why?

Right now, DevTools isn't supported very well with Plasmo.

(OPTIONAL) Example implementations

TODO

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

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

[ptim]

Thanks for Plasmo!

FYI for some reason when I relocate the with-devtools example into src/ following https://docs.plasmo.com/customization#using-the-src-directory-for-source-code, then I get the following build error:

🔴 ERROR  | Failed to resolve 'url:\~/panels/font-picker/index.html' from './src/devtools.tsx'
          | import fontPickerHTML from "url:~/panels/font-picker/index.html"

which is resolved by using a relative rather than aliased import path like:

import fontPickerHTML from "url:./panels/font-picker/index.html"

I wonder if this has to do with the "url:" prefix, which I haven't gotten to the bottom of yet...

[louisgv]

@ptim thanks for the report - I will update the example to use relative import rather than tilde resolve!

To read more about the scheme and the tilde import, please take a look at https://docs.plasmo.com/browser-extension/import#tilde-

Basically, since it wasn't a source import (ts/tsx), to use tilde, you would have to do ~/src/panels/etc.... For this case, relative import makes most sense tho!

[louisgv]

Since the advent of #231, I'm not sure if we need to focus on this anymore - we can perhaps refactor devtools example to use the tabs feature and it should just work with minimal configuration.