Skip to main content
Solved

External Javascript file for my plugin


Amr_Esam

I am trying to create a plugin with UI
the problem is ui.html file don’t want to load my ui.js tag

thanks for help

Best answer by Gleb

this is the answer

View original
This topic has been closed for comments

15 replies

tank666
  • 4863 replies
  • September 3, 2022

Embed your JavaScript code in HTML.


Amr_Esam
  • Author
  • 5 replies
  • September 3, 2022

and what about accessing external libraries? same problem


tank666
  • 4863 replies
  • September 3, 2022

How did you include the external library?
<script src="https://hostname.com/library.js"></script>? There shouldn’t be any problems with this.


Amr_Esam
  • Author
  • 5 replies
  • September 3, 2022

like that
<script src="ui.js"></script>


tank666
  • 4863 replies
  • September 3, 2022

You have to embed js code in HTML:

<script>
    //your code
</script>

Amr_Esam
  • Author
  • 5 replies
  • September 3, 2022

So i cannot put my UI code in seprate js file?


Amr_Esam
  • Author
  • 5 replies
  • September 3, 2022

It don’t even want to load js files like that:
<script src="https://hostname.com/library.js"></script>


tank666
  • 4863 replies
  • September 3, 2022
figma.com

Sorry, but I can’t confirm this. For example, if I include the jQuery library, then I can access it in code.

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
    // Display the version number of the external library.
    console.log($.fn.jquery)
</script>

Amr_Esam
  • Author
  • 5 replies
  • September 3, 2022

thank you 🙂


What is the difference between loading from CDN and local file? Why you can load via CDN but can’t the local js. What is the difference?


Gleb
  • Power Member
  • 4706 replies
  • March 19, 2023

Figma doesn’t load your whole computer onto their servers when you publish a plugin, it only loads the files that are listed in the manifest: code.js and ui.html. It doesn’t care/know about any other files that exist in your file system and how they can be related to your code.

If you need to use external libraries, you either need to bundle them into one file (using Webpack, ESbuild etc.) or use a CDN.


What is the way to use external library in ut.html via Webpack? If Webpack will create bundle in dist/code.js I can’t use it as . How can I use some node_modules that I want to access in ui.html with using of Webpack?


@Gleb any ideas on what @Yaroslav20 is asking here? I have the same request. Thanks!


Gleb
  • Power Member
  • 4706 replies
  • Answer
  • January 10, 2024

this is the answer


Indeed this (Webpack: see example) works great! Thanks!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings