Skip to content

Add export files feature to DevTools extension #31231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: devtools
Choose a base branch
from

Conversation

RuthySheffi
Copy link

@RuthySheffi RuthySheffi commented Jun 5, 2025

This pull request introduces an export files feature to the DevTools extension.

Key updates include:

  • Added export-handler logic to enable exporting scenes and assets directly from the DevTools panel.
  • Integrated new UI elements and icons for export actions.
  • Updated content script and panel logic to support export requests and communication.
  • Added devtools in utils to copy build files and GLTFExporter to the extension folder.
  • Updated the manifest for to run devtools.
  • This feature streamlines the workflow for developers working with Three.js by making it easier to export and share assets during development.

Please review and let me know if any changes are needed!

Copy link

github-actions bot commented Jun 5, 2025

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 337.4
78.67
336.49
78.38
-908 B
-297 B
WebGPU 553.89
153.48
542.52
150.29
-11.38 kB
-3.19 kB
WebGPU Nodes 553.24
153.32
541.87
150.13
-11.38 kB
-3.19 kB

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Before After Diff
WebGL 468.59
113.33
465.42
112.22
-3.17 kB
-1.1 kB
WebGPU 628.86
170.19
615.29
166.29
-13.57 kB
-3.89 kB
WebGPU Nodes 583.72
159.53
570.17
155.68
-13.55 kB
-3.85 kB

@mrdoob
Copy link
Owner

mrdoob commented Jun 6, 2025

That's quite a change...
It's going to take me quite a while to go through all the code.

Some quick notes:

  1. Why was the build process introduced (build-devtools.js)?
  2. I understand why the new permission "download" is needed, but why is the new permission "scripting" needed?
  3. The CSS indentation style seems to have changed.

I don't think copying the files is a good idea...
Instead, I would import from jsdelivr instead and use import maps.

Also, can you add to the thread a screenshot or video of the feature?

Fixed CSS indent
Added import map for Three.js (not working due to  Chrome Extension CSP)
@RuthySheffi
Copy link
Author

RuthySheffi commented Jun 6, 2025

Thank you for reviewing this PR and sharing your notes!

Why add the build process (build-devtools.js)?
The build process automates copying and adjusting files (like GLTFExporter) to ensure the DevTools panel uses the correct Three.js modules in the required formats (e.g., UMD). I'm open to refactoring if there's a better way to avoid file copying.

Why the new "scripting" permission?
Upon review, this permission isn't actually needed for the current implementation. I'll remove it in the next update.

CSS indentation style change:
Sorry for the inconsistency! I'll revert the CSS indentation to match the project's tabs.

Copying files vs. CDN/import maps:
Files were copied due to Chrome Extension CSP restrictions that limit using CDNs or import maps in DevTools panels. If there's a CSP-compliant approach available, I'd be glad to use it. Otherwise, local copies are necessary.

video:
https://github.com/user-attachments/assets/9bc437ad-0f9e-4f15-af27-5e6dc770e341

Thanks again! Let me know if you have any other suggestions or preferences.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants