Someone will no doubt correct me if I am wrong, but I don’t think you can have a plugin without a single javascript file.
If I take out these lines that you have in your manifest:
"panel": {
"mainPath": "index.html"
}
And add this line at the top level:
"main": "index.html",
Then it does get past the Uncaught Error: Cannot resolve module: main.js error, but throws this error:
Uncaught UxpRuntimeError: Refusing to load inline script tag as executable code. Code generation is disabled in plugins.
Which makes me think you can’t do inline scripting as you are trying to.
If I comment out the script tag that you have in your index.html file, then the plugin does load showing the panel and button . . . but, of course, the click of the button isn’t handled.
If I were setting this up, I would change the manifest as above and remove that script tag from the index.html file.
I would then create a javascript file in my folder. It can be named “main.js”, or ‘index.js” as @AnthonyK (above) does, or whatever.
It needs to be linked to from the index.html file, so in the head tag of the index.html file, goes the line @AnthonyK offered:
<script src="index.js"></script>
In this index.js file (the primary javascript file) there are certain things you need. You need to require entrypoints and you need an entrypoints.setup() function as the first function. I would be inclined to copy the sample code from here:
https://developer.adobe.com/photoshop/uxp/2022/guides/uxp_guide/uxp-misc/manifest-v5/#entrypointssetup-using-promises
You’ll just need to modify it for your plugin. In particular, (1)
Change the first line from
import { entrypoints } from "uxp";
To:
const { entrypoints } = require("uxp");
(2) where it has
panels: {
panelA:
You will have the id of your panel:
panels: {
minimalTestPanel:
(3) You can take out the commands section from that sample code, the reference to panelB and invokeMenu and menuItems (unless you are planning to use the panel flyout menu).
Finally, hooking up the click event listener . . .
I would often add that in the plugin create lifecycle hook. So you could just add the code you currently have in your script tag there. Your entrypoints.setup() function would look like this:
entrypoints.setup({
plugin: {
create() {
console.log("Plugin has been loaded, plugin.create has been triggered.");
document.getElementById("btnTest").addEventListener("click", function() {
document.getElementById("output").textContent = "✅ Plugin works!";
});
},
That will work, but I would normally separate out the function I am calling on click.
So my entrypoints.setup() function would look like this:
entrypoints.setup({
plugin: {
create() {
console.log("Plugin has been loaded, plugin.create has been triggered.");
document.getElementById("btnTest").addEventListener("click", handleClick);
},
And at the bottom of my file I would have:
function handleClick(theEvent) {
document.getElementById("output").textContent = "✅ Plugin works!";
}
Hope all that helps
Philip
[UXPMinimalPlugin.zip]