Cep Extension Panel is blank in lower CC Versions

[Simon Henke]

Hi,

I recently started creating CEP extensions and a client said that one of my extensions doesn't work in Photoshop CC 2017.

He said the panel is simply blank / empty after opening.

I develop on PS 2019 and everything is working fine for me. I'm quite sure that I didn't include any newer photoshop functions, so it should also work with lower versions.

Here's the manifest.xml:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ExtensionBundleId="shadowify" ExtensionBundleName="Shadowify" ExtensionBundleVersion="1.0.0" Version="6.0">

  <ExtensionList>

   <Extension Id="shadowify" Version="1.0.0"/>

  </ExtensionList>

  <ExecutionEnvironment>

   <HostList>

   <Host Name="PHXS" Version="16.0" />

   <Host Name="PHSP" Version="16.0" />

   </HostList>

   <LocaleList>

   <Locale Code="All"/>

   </LocaleList>

   <RequiredRuntimeList>

   <RequiredRuntime Name="CSXS" Version="6.0"/>

   </RequiredRuntimeList>

  </ExecutionEnvironment>

  <DispatchInfoList>

   <Extension Id="shadowify">

   <DispatchInfo>

   <Resources>

   <MainPath>./index.html</MainPath>

   <CEFCommandLine>

   <Parameter>--allow-file-access-from-files</Parameter>

   <Parameter>--allow-file-access</Parameter>

   <Parameter>--enable-nodejs</Parameter>

   <Parameter>--mixed-context</Parameter>

   </CEFCommandLine>

   </Resources>

   <Lifecycle>

   <AutoVisible>true</AutoVisible>

   </Lifecycle>

   <UI>

   <Type>Panel</Type>

   <Menu>Shadowify</Menu>

   <Geometry>

   <Size>

   <Height>500</Height>

   <Width>237</Width>

   </Size>

   </Geometry>

   <Icons>

   <Icon Type="Normal">./assets/icon_dark.png</Icon>

   <Icon Type="RollOver">./assets/icon_dark.png</Icon>

   <Icon Type="DarkNormal">./assets/icon.png</Icon>

   <Icon Type="DarkRollOver">./assets/icon.png</Icon>

   </Icons>

   </UI>

   </DispatchInfo>

   </Extension>

  </DispatchInfoList>

</ExtensionManifest>

Maybe I oversaw any false versions in there.

Does anyone have any idea?

[Ten A]

Did you make zxp package for your client?

[Simon Henke]

Yes, I sign and bundle everything into a .zxp

[Justin Taylor-Hyper Brew · Accepted solution]

CC 2017 is ES5, CC 2018 and above is ES6. If you're distributing your panel as compatible with previous versions, you'll want to test on those older versions yourself to make sure they work.

Open your panel in the older version, and check the Chrome Dev Tools console, you're probably using syntax, features, or packages that aren't compatible in older versions of CEP and it's causing your panel to throw errors before building the UI, in which case you'll need to use polyfills or older syntax to maintain compatibility.

[Simon Henke]

You were right, thanks alot I didn't know that I could simply install older versions of Photoshop CC.

Today I was able to run my development inside CC 2017 and it immediately showed the error.

In my case it was the Array.includes which is missing in ES5 and needed to be polyfilled.

Also, I realised that CSS Grid isn't included in the older browser which CC 2017 uses under the hood, so my layout was completely messed up. It was easily fixed though by providing fallback css with flexbox instead of grid.