Figma Plugin: Manifest Permission Issues, Syntax Error, and WebSocket Reconnection Problems

Aditi singh — Fri, 28 Feb 2025 18:03:56 +0000

**I am encountering multiple errors while developing a Figma plugin that converts websites into editable Figma designs. The plugin fetches website content, processes HTML and CSS, and transforms it into Figma components while preserving styles, layout, and assets._

🔗 GitHub Repository: https://github.com/aditya-sphereoutsourcing/figma-htmlui

Issue Details
1️⃣ Manifest Errors
When loading the plugin, I receive the following errors:

Invalid permission specified: currentPage
Invalid value for networkAccess. If you want to allow all domains, please add a "reasoning" field to the networkAccess object.
2️⃣ Syntax Error in Vendor Core File
I get a syntax error in a core file:

typescript
Copy
Edit
Syntax error on line 52: Unexpected token .
parsed.textContent = element.textContent?.trim();
^
Possible cause: The ?. (optional chaining) operator might not be supported in the Figma plugin environment.

3️⃣ Multiplayer Session WebSocket Issues
The console logs repeated connection attempts:

csharp
Copy
Edit
[MultiplayerSession] connecting to wss://www.figma.com/api/multiplayer/...
This is followed by multiple reconnection attempts.

🔄 How the Plugin Works & Where the Errors Occur
1️⃣ Initial Request Processing

figma.ui.onmessage listens for messages when the user requests a website conversion.
The plugin fetches website content using fetch(msg.url).
2️⃣ HTML Parsing (src/parsers/htmlParser.ts)

Converts raw HTML into a structured DOM tree.
Extracts properties, styles, and attributes.
Handles special elements like images and SVGs.
3️⃣ CSS Processing (src/parsers/cssParser.ts)

Extracts CSS rules and computes styles.
Resolves shorthand properties and media queries.
4️⃣ Style Conversion (src/utils/styleConverter.ts)

Converts CSS properties to Figma-compatible formats.
Handles unit conversions (px, rem, em).
5️⃣ Figma Node Creation (src/utils/figmaUtils.ts)

Creates corresponding Figma nodes.
Applies styles, layout, and constraints.
🛠️ Steps Taken to Resolve
✔️ Verified manifest.json to ensure correct permissions for currentPage and networkAccess.
✔️ Checked if the optional chaining (?.) is causing compatibility issues with the Figma plugin environment.
✔️ Attempted manual reconnection, but WebSocket disconnections persist.

❓ How Can I Fix These Issues?
Are there alternative permissions for currentPage in the Figma manifest?
Does Figma's runtime lack support for optional chaining (?.), and if so, what is the best workaround?
Could the WebSocket reconnection issue be related to rate-limiting or incorrect authentication?
Any guidance or solutions would be greatly appreciated!

DEV Community: Aditi singh

Figma Plugin: Manifest Permission Issues, Syntax Error, and WebSocket Reconnection Problems