Extension Builder blank panel

[Milesk8]

Hello everyone, saw that we could create our own extensions in Creative Cloud ! Well I tried with a little knowledge in coding. But there is some little problem, I created my first panel in Illustrator, it appeared in the Extensions Window but I when i click on it it completly empty ! I knew that I needed to write some code to change the UI for example, did a first test, just added some text in the index.html file and it's not working... It's been almost 2 weeks that I'm trying this and i'm not gonna give up ! Got some screenshots here, working with Eclipse. If you need more screenshots just ask.

Help here would be highly appreciated.

Virgile

[Inventsable]

Hi @Milesk8,

First step I'd make is to create a .debug file (like the one here) in your panel's root folder, then open a CEF client and go to localhost:#### for the debugging port for this particular app and extension. This is where you'll likely be able to see a runtime error in the Console tab by hitting the escape key -- I suspect it would be something like a missing file or an error thrown instead of a manifest.xml or CEP error since the panel does show in menus and looks functional.

[Milesk8]

Hey @Inventsable

First of all thanks for that quick answer really appreciated it ! Got a few questions now : how can i create that .debug file ? And how does this works ? Tried in the terminal with " touch .debug " but no success, then i downloaded the CEF client.

[Inventsable]

This is what they claim in the cookbook. Personally I've never had to create this via command line, and manually creating a file with the name .debug and proper XML syntax (like the file I linked before) has always worked for me at least on Windows.

All you really need is the Extension ID parameter to match between your manifest.xml file and your .debug file. Then the Port parameter in the debug file per host becomes available to use at http://localhost:9912 for example, if we use the debug file linked for Illustrator. You'd need to relaunch Illustrator, open the panel, then open CEF and go to this localhost URL. On clicking into the web contents link that shows, you'll get a dated version of Chrome Devtools.

This may not solve your original problem but it's a big step in being able to debug clientside code for any panel. If you have issues, you can always clone one of my own panels on my profile (tons of open source ones and even CEP tools there) and copy/paste the debug into your own panel, then adjust the ExtensionID to match your own manifest. It's rough starting out! Especially if you're teaching yourself to code specifically to make Adobe panels -- but most Adobe devs started that way, including myself. Never learned to code until I was interested in CEP, so I took about two months to learn HTML via a codecademy class and started playing with Adobe panels along the way until I'm at the point I am now.

[Milesk8]

Hi @Inventsable

It's getting more and more clear here but HOW can get that .debug file ? Is it invisible ? Do you create it in Eclipse ? Do you fill that file with XML code ? I tried to associate the port of my host application in this case Illustrator to match with my extension ID but again no success...