{"id":588,"date":"2019-09-30T18:32:36","date_gmt":"2019-09-30T18:32:36","guid":{"rendered":"https:\/\/www.nleby.com\/longform\/?p=588"},"modified":"2021-08-14T17:38:11","modified_gmt":"2021-08-14T17:38:11","slug":"adobe-photoshop-cc-extension-panel-html-javascript","status":"publish","type":"post","link":"https:\/\/www.nleby.com\/longform\/2019\/09\/30\/adobe-photoshop-cc-extension-panel-html-javascript\/","title":{"rendered":"Adobe Photoshop CC Extension &#8211; Panel"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Photoshop CC Extension Panel  (HTML, JavaScript)\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/AB7SMv4peXM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Video overview of a Photoshop extension I built to help with some common workflows for our photo studio folks at work. Built entirely in HTML\/JavaScript using any code editor of your choice (e.g. not using eclipse and that adobe provided tooling) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the resource below to get started. Some key callouts I learned in development: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>add a debug refresh button to reload your extension&#8217;s content when updating html\/js file<\/li><li>when making changes to the .jsx file, disable\/enable the extension to see changes reflected<\/li><li>use defaults write com.adobe.CSXS.8 PlayerDebugMode 1 to side load an unsigned extension (make sure you restart\/log out\/or kill process for changes to take effect)<\/li><li>put your extension dir in \/Users\/$user\/Library\/Application Support\/Adobe\/CEP\/extensions\/ &#8211; if this path doesn&#8217;t exist you can create it<\/li><li>watch out for ruler units &#8211; ensure your logic considers the user&#8217;s ruler units before doing arithmetic. Some sample code I&#8217;ve seen and have used suggest doing:<ol><li>origRulerUnitPrefs = app.preferences.rulerUnits; \/\/save original<\/li><li>app.preferences.rulerUnits = Units.PIXELS; \/\/set<\/li><li>\/\/do logic<\/li><li>app.preferences.rulerUnits = origRulerUnitPrefs; \/\/restore original<\/li><\/ol><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Resources:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/Adobe-CEP\/Getting-Started-guides\/tree\/master\/Client-side%20Debugging\">https:\/\/github.com\/Adobe-CEP\/Getting-Started-guides\/tree\/master\/Client-side%20Debugging<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.adobe.com\/content\/dam\/acom\/en\/devnet\/photoshop\/scripting\/photoshop-cc-scripting-guide.pdf\">https:\/\/www.adobe.com\/content\/dam\/acom\/en\/devnet\/photoshop\/scripting\/photoshop-cc-scripting-guide.pdf<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Video overview of a Photoshop extension I built to help with some common workflows for our photo studio folks at work. Built entirely in HTML\/JavaScript using any code editor of&hellip;<\/p>\n<p> <a class=\"more-link\" href=\"https:\/\/www.nleby.com\/longform\/2019\/09\/30\/adobe-photoshop-cc-extension-panel-html-javascript\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":945,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[33],"class_list":["post-588","post","type-post","status-publish","format-standard","has-post-thumbnail","category-ulta","tag-website"],"_links":{"self":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":6,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":937,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/588\/revisions\/937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media\/945"}],"wp:attachment":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}