Adobe CEP Resources

repository·master·Indexed 23 days ago

https://github.com/adobe-cep/cep-resources

Resources, SDKs, and documentation for building HTML5/JavaScript-based extensions for Adobe Creative Cloud applications using the Common Extensibility Platform (CEP). Includes HTML Extension Cookbooks for CEP versions 8.0 through 12.0, guidance on using the VSCode ExtendScript Debugger, and a comprehensive UXP Migration Guide for transitioning from CEP to the UXP plugin model.

Tokens
60.3K
Snippets
119
Records
276
Agent score
72%

What's inside adobe-cep-cep-resources

  1. Overview of Common Extensibility Platform (CEP)

    master

    The Common Extensibility Platform (CEP) allows developers to create extensions for Adobe Creative Cloud applications using an HTML5 and JavaScript interface model. This replaces the deprecated Flash/ActionScript model.

    To build and distribute extensions, you will typically use:

    • CEP JavaScript libraries: For communicating with the operating system, the Extension Manager, the host application, and other extensions.
    • ZXP Packager: A command-line utility used to package extensions into .zxp files. These files are required for extensions to be recognized and loaded by the Extension Manager.
    • Distribution: Extensions can be distributed as free or paid products via Adobe Exchange, the Add-ins website, or the Creative Cloud desktop app by uploading the single .zxp file.
  2. CEP developer resources and support

    master

    For questions, bug reports, or feature requests, use the following resources:

    To contribute to extension development, submit Pull Requests to the Adobe-CEP GitHub organization.

  3. Understand UXP plugin sizing constraints

    master

    Unlike CEP, which allowed programmatic resizing via window.__adobe_cep__.resizeContent(), UXP plugins have strict sizing rules:

    • Manifest Constraints: Plugins are restricted to the min/max sizes defined in the manifest.json.
    • No Programmatic Resizing: Plugins cannot control the size of their panels programmatically.
    • Responsive Design: Developers must design UIs to be responsive.
    • Multi-panel approach: If your UI requires different sizes (e.g., multiple accordions), consider shipping multiple panels that the user can group, resize, or reorder as they prefer.
  4. Understand CEP extension folder locations and loading priority

    master

    CEP searches for extensions in three specific locations in a defined order. If multiple extensions share the same bundle ID, CEP follows specific versioning and modification rules to decide which one to load.

    Extension Folder Types

    1. Product extension folder: Used by host application installers. Path varies by product (e.g., ${PP}/CEP/extensions). Third-party extensions cannot be installed here.
    2. System extension folder:
      • Windows (x64): C:\Program Files (x86)\Common Files\Adobe\CEP\extensions and C:\Program Files\Common Files\Adobe\CEP\extensions (since CEP 6.1)
      • macOS: /Library/Application Support/Adobe/CEP/extensions
    3. Per-user extension folder:
      • Windows: C:\Users\<USERNAME>\AppData\Roaming\Adobe\CEP\extensions
      • macOS: ~/Library/Application Support/Adobe/CEP/extensions

    Loading Priority Logic

    CEP determines which extension to load using these rules:

    1. Search Order: Product folder $\rightarrow$ System folder $\rightarrow$ Per-user folder.
    2. Filtering: Extensions without a matching host application ID and version are ignored.
    3. Version Conflict: If bundle IDs match, the one with the higher version is loaded.
    4. Modification Date Conflict: If bundle IDs and versions match, the one with the latest manifest modification date is loaded.
    5. Tie-breaker: If all the above match, the first one found is loaded.

    Important Constraints

    • Character Restriction: The character # is not allowed in extension folder paths on Windows or macOS because CEF treats it as a delimiter.
  5. Configure HostList and Versioning in Manifest

    master

    The HostList defines which Adobe applications and versions your extension supports.

    Version Range Syntax

    • Inclusive range: [15.0,15.9] supports version 15.0 up to and including 15.9.
    • Exclusive range: [15.0,15.9) supports version 15.0 up to but not including 15.9.

    Default vs. Per-Extension HostList

    • Default HostList: Defined under <ExecutionEnvironment>. It applies to all extensions in the bundle.
    • Per-Extension HostList: Defined under <DispatchInfoList> -> <Extension Id="...">. This overrides the default HostList for that specific extension.
    • Note: Adding a HostList with no child nodes effectively disables that extension for all host applications.
    • Warning: Do not use both HostList tags and the Host attribute in DispatchInfo tags; use HostList for new extensions.
    <!-- Inclusive range example -->
    <HostList>
        <Host Name="PHXS" Version="[15.0,15.9]"/>
        <Host Name="PHSP" Version="[15.0,15.9]"/>
    </HostList>
    
    <!-- Per-extension override example -->
    <DispatchInfoList>
      <Extension Id="com.adobe.CEPHTMLTEST.Panel1">
        <HostList>
          <Host Name="PHXS" />
        </HostList>
      </Extension>
    </DispatchInfoList>
  6. Understand the CEP Multi-process Architecture

    master

    CEP and Chromium use a multi-process architecture. Each CEP extension runs in its own CEP HTML Engine, which typically consists of three processes: one main/browser process, one renderer process, and one GPU process.

    Process Naming:

    • macOS: The main process is named CEPHtmlEngine. The renderer and GPU processes are named CEPHtmlEngine Helper.
    • Windows: All three processes are named CEPHtmlEngine.exe.

    Identifying Processes via Command Line: You can identify which extension a process belongs to by inspecting its command line parameters:

    • Browser process: Does not contain the --type flag.
    • Renderer process: Contains --type=renderer.
    • GPU process: Contains --type=gpu-process.

    How to check command line parameters:

    • macOS: Run ps -ef | grep CEPHtmlEngine in a terminal.
    • Windows: Use system tools to inspect the command line arguments of running programs.
    ps -ef | grep CEPHtmlEngine
  7. Configure Separate Context Mode (Node.js)

    master

    To enable Node.js in Separate Context Mode, use the --enable-nodejs command line switch without passing --mixed-context.

    In this mode:

    • cep_node is a global symbol available across all frames. Modifications to cep_node are reflected in all frames.
    • Node globals (e.g., process, require) are available only in the main frame. They are not available in iframes.
  8. CEP Version Compatibility and Integration

    master

    CEP versions are tied to specific Creative Cloud releases. Use the following guide to determine which version to use based on your target application:

    • CEP 12: For the latest versions of Creative Cloud Applications.
    • CEP 11: For recent versions of Creative Cloud Applications.
    • CEP 10: For recent versions of Creative Cloud Applications.
    • CEP 9: For Creative Cloud 2019 products.

    Detailed integration tables for each version can be found in their respective HTML Extension Cookbooks within the repository.

  9. Supported CEP Extension Types

    master

    CEP extensions are defined by their type in the manifest.xml file. The following types are supported:

    • Panel: Behaves like a standard application panel. It can be docked, participate in workspaces, have fly-out menus, and can be set to re-open automatically if it was open when the application shut down.
    • ModalDialog: Opens a new window that forces the user to interact with the extension before they can return to the host application.
    • Modeless: Opens a new window that does not prevent the user from interacting with the host application.
    • Custom (Available since CEP 5.0): Used for invisible extensions that remain hidden throughout their entire lifecycle.
  10. Understand CEP extension loading and installation

    master

    CEP searches for extensions in a specific order:

    1. Product extension folder
    2. System extension folder
    3. Per-user extension folder.

    Conflict Resolution:

    • Extensions must have an appropriate host application ID and version to be loaded.
    • If multiple extensions share the same extension bundle ID:
      • The one with the higher version is loaded.
      • If versions are identical, the one with the latest manifest.xml modification date is loaded.
      • If modification dates are also identical, the first one found is loaded.

    Installation Best Practices:

    • Host application installers should use the product extension folder.
    • Extensions installed via creative.adobe.com/addons should use the system or per-user extension folder.

    Constraint: The character # is not allowed in extension folder paths on Windows or macOS because the Chromium Embedded Framework (CEF) treats it as a delimiter.

  11. Access HTML DOM from ExtendScript via CSXS Events

    master

    There is no direct way for ExtendScript to access the HTML extension's DOM. Instead, you must use CEP's event-based communication system using CSXSEvent and the PlugPlugExternalObject library.

    1. ExtendScript Side: Dispatching an Event

    First, create an instance of ExternalObject using the PlugPlugExternalObject library. Then, create and dispatch a CSXSEvent.

    var externalObjectName = "PlugPlugExternalObject"; 
    var mylib = new ExternalObject( "lib:" + externalObjectName );
    var eventObj = new CSXSEvent(); 
    eventObj.type="documentCreated"; 
    eventObj.data="blahblah"; 
    eventObj.dispatch();

    2. HTML Extension Side: Listening for the Event

    In your HTML extension, use CSInterface.addEventListener to listen for the specific event type dispatched by the host application.

    var cs = new CSInterface();
    
    cs.addEventListener("documentCreated", function(event){
      alert('Cool!' + event.data);
    });
    
    var extendScript = 'var externalObjectName = "PlugPlugExternalObject"; var mylib = new ExternalObject( "lib:" + externalObjectName ); app.document.add(); var eventObj = new CSXSEvent(); eventObj.type="documentCreated"; eventObj.data="blahblah"; eventObj.dispatch();'
    cs.evalScript(extendScript);
  12. Understand CEP Contexts

    master

    CEP operates using several distinct execution contexts:

    1. Browser Context: The default JavaScript context for the CEP browser engine. Accesses Browser objects and CEP's file system APIs.
    2. Native Context: An extended context via the cep object, providing file system access through CSInterface.js.
    3. Node Context: Enabled via the --enable-nodejs command line switch. It can operate in two modes:
      • Separate Context: Created without --mixed-context. The cep_node symbol is global across all frames, but Node.js globals (like process) are only available in the main frame. Modifications to cep_node in one frame are reflected in others.
      • Mixed Context: Created with --enable-nodejs and --mixed-context. The cep_node symbol is local to each frame (modifications do not propagate), and Node.js globals are available uniquely within every frame.
    4. Host App Context: The context accessed via the evalscript API to interact with the host application.