Getting Started with CEP Extensions

Mar 11, 2023 | Programming

Welcome to the wonderful world of Adobe Creative Cloud Extensions! This guide is designed to help you quickly get started building a CEP (Common Extensibility Platform) extension that will allow users to customize their experience in Creative Cloud applications like Photoshop, Illustrator, InDesign, and After Effects. By the end of this guide, we will be creating a simple CEP extension that opens a new document from the user’s local folder.

Example extension: opening a new file in Photoshop

Contents

Technology Used

The supported host applications for our extensions include Adobe Photoshop and other Creative Cloud applications. The libraries, frameworks, and APIs utilized are:

Prerequisites

Before we jump in, you should possess a basic knowledge of HTML, CSS, and JavaScript.

Development Steps

1. Decide the folder structure

Just like setting up a new department in an office, you need a clear folder structure for your extension. You can save your extension code at the root level or the user level, depending on who will access it. The minimum required folder is the CSXS folder which should contain a manifest.xml file. A suggested structure is:

  • CSXS – Contains manifest.xml configuration.
  • client – Holds HTML, JavaScript, CSS, and the required CSInterface.js.
  • host – Contains ExtendScript files used to access host functionalities.

2. Configure Your Extension in manifest.xml

Your manifest file is like a recipe that tells the host application how to cook your extension. Here are some essential ingredients for a minimal setup:

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest ExtensionBundleId="com.my.test"
  ExtensionBundleVersion="1.0.0"
  Version="7.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  
  <ExtensionList>
    <Extension Id="com.my.test.panel" Version="1.0.0">
    </Extension>
  </ExtensionList>

  <ExecutionEnvironment>
    <HostList>
      <Host Name="PHSP" Version="19">
      </Host>
    </HostList>
  
    <LocaleList>
      <Locale Code="All"/>
    </LocaleList>
    
    <RequiredRuntimeList>
      <RequiredRuntime Name="CSXS" Version="7.0"/>
    </RequiredRuntimeList>
  
  </ExecutionEnvironment>
  
  <DispatchInfoList>
    <Extension Id="com.my.test.panel">
      <DispatchInfo>
        <Resources>
          <MainPath>./client/index.html</MainPath>
          <ScriptPath>./host/index.jsx</ScriptPath>
          <Lifecycle>
            <AutoVisible>true</AutoVisible>
          </Lifecycle>
          <UI>
            <Type>Panel</Type>
            <Menu>My First Panel</Menu>
            <Geometry>
              <Size>
                <Height>500</Height>
                <Width>350</Width>
              </Size>
            </Geometry>
          </UI>
        </Resources>
      </DispatchInfo>
    </Extension>
  </DispatchInfoList>

</ExtensionManifest>

3. Download CSInterface.js

This library is like the translator that enables your extension to communicate with the host application. Download the latest version of CSInterface.js and place it in your client folder.

4. Write Your Front-end Code

Time to unleash your creativity! For the front-end coding, create an index.html in your client folder:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Your First Panel</title>
</head>
<body>
  <h1>Your first panel</h1>
  <button id="open-button">Open</button>
  <script type="text/javascript" src="CSInterface.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

5. Write Your ExtendScript Code

Time for a different flavor! We will write a function in index.jsx that opens a file:

function openDocument() {
  var fileRef = new File("~/Downloads/myFile.jpg");
  var docRef = app.open(fileRef);
}

This function interacts directly with Photoshop, allowing us to open a specific file.

6. Launch your extension in the host app

To see your extension in action, navigate to Window → Extensions → My First Panel in Photoshop. If you encounter an alert about unsigned extensions, follow the instructions in the Client-side Debugging guide.

Next Steps

Now that you’ve laid the groundwork, consider diving deeper! Check out these resources for more advanced topics:

Other Resources

Troubleshooting

If you face any challenges while building your CEP extension, consider checking the following:

  • Ensure your file paths in manifest.xml and index.jsx are correct.
  • Verify that you’ve included all necessary library scripts.
  • Check if the host application supports your extension configuration.
  • If you get an error about unsigned extensions, consult the Client-side Debugging guide mentioned earlier.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox

Let’s Build Success Together