Skip to main content
Known Participant
April 3, 2025
Question

Button in plugin running JSX action

  • April 3, 2025
  • 2 replies
  • 465 views

I im making simple plugin with buttons which can run photoshop actions, (removeBgBtn) works correct but two another button wont run, there is no error in logs. I have folder scripts and inside I have two jsx scripts. They works correct when I use classic action panel.

 

document.addEventListener("DOMContentLoaded", () => {
    const removeBgBtn = document.getElementById("remove-bg-btn");
    const smartBtn = document.getElementById("smartBtn");
    const classicBtn = document.getElementById("classicBtn");

    if (removeBgBtn) {
        removeBgBtn.addEventListener("click", async () => {
            console.log("Button clicked! Starting background removal process...");

            try {
                await remove_background();
                alert("Background removed successfully!");
                console.log("✅ Background removed successfully!");
            } catch (error) {
                console.error("❌ Error removing background:", error);
                alert("Failed to remove background: " + (error.message || "Unknown error"));
            }
        });
    }

    if (smartBtn) {
        smartBtn.addEventListener("click", async () => {
            await runJSXScript("scripts/smart.jsx");  // Ensure the correct script path is used
        });
    }

    if (classicBtn) {
        classicBtn.addEventListener("click", async () => {
            await runJSXScript("scripts/classic.jsx");  // Ensure the correct script path is used
        });
    }
});

2 replies

Inspiring
April 4, 2025

@sttk3

 

I found this script that calls a jsx file by inserting the file path

/**
  * @File Execute ExtendScript from UXP Script
  * https://forums.creativeclouddeveloper.com/t/how-to-call-a-jsx-file-from-a-psjs-file/
  * https://community.adobe.com/t5/photoshop-ecosystem-discussions/how-to-call-a-jsx-file-from-a-psjs-file/td-p/15193966
  * @3653945.0.0
  * @7111211 sttk3.com
*/

const { localFileSystem } = require('uxp').storage ;
const { app, core, action } = require('photoshop') ;

const jsxFile = await localFileSystem.getEntryWithUrl('/Users/username/Desktop/alert.jsx') ;
const token = await localFileSystem.createSessionToken(jsxFile) ;

try {
  await core.executeAsModal(async () =>
    {
      await action.batchPlay(
        [
          {
            _obj: 'AdobeScriptAutomation Scripts',
            javascript: {
              _kind: 'local',
              _path: token
            },
          }
        ], 
        
        {}
      ) ;
    }, 
    
    {
      commandName: 'ExtendScript', 
      interactive: true, 
    }
  ) ;
} catch(e) {
  await app.showAlert(e) ;
}

 

 

Inspiring
April 3, 2025

Unfortunately Adobe is limiting the use of jsx, Keep in mind that to use jsx you have to set the manifest 4 and remove api 2. You could do it like this; Create an action that calls the jsx file, Then create another action that calls the previously created action. Create a button in the uxp panel that calls the action and it should work. That said, keep in mind that Adobe should soon stop supporting jsx, so I would go straight to uxp.

Known Participant
April 3, 2025

So soon actions in JSX will stop working? Wtf? I have most important automatisation scripts there 😮 

Inspiring
April 3, 2025

I tried to advise you,
but know that adobe has been thinking for a long time about removing jsx from photoshop,
so all cep and jsx panels will no longer be supported.
there is no certain date, but this is what he said to do.

my advice is to use the effort to convert your jsx scripts to uxp.