The initial experience of Adobe HTML5 extension development

First, the background of the Adobe company produced a number of multimedia processing software product line, covering the audio and video editing, image processing, graphic design, video and other fields. To extend the functionality of the software, Adobe offers developers two ways to add functionality to the software: plug-ins, respectively ( Plugin) and Extensions ( Extension）。 Last year, two premiere plugins were developed using the Official SDK to import multimedia files and video stream previews in a custom format.      Recently experienced the development of Adobe extension. Adobe plugin is typically used to provide functionality closer to the bottom. The official Plugin SDK is based on the C + + language for efficiency reasons. Adobe extension, however, is biased towards providing an extension of upper-level applications, which was used in the Adobe CS era Flashform of implementation. In the Adobe cc ERA, HTML5 implementations were provided, which enabled developers to interface HTML5, CSS3, JavascriptEven the NodeJSto develop. Because Adobe embedded the premierepro inside the CEF, can efficiently parse rendering HTML5, run Nodejs program. And Nodejs can realize the system function of call, simply don't too diao!      In this article, I've probably summed up the mental journey of using HTML5 to develop an adobe extension. One of the extensions we're going to make is very simple, as shown in: This is a well-known foreign video material trading site Pond5Developed a premierepro extension that allows users to log in to the site in PR, download preview footage, buy HD footage, import videos automatically, or automatically replace videos. So that users do not have to open a browser to log on the site operation, greatly improving the user experience. Similarly, there are ShutterstockDevelopment of plug-ins: second, development environment

Adobe officially launched an IDE for the development of Adobe HTML5 extension based on Eclipse. Therefore, we will first configure the development environment as follows:

• Download Eclipse, preferably version 3.6 or later, and extension Builder

• Install adobe Premiere Pro CC 2014/2015.
• Configure the Elicpse "target Application" and "Service Manager"

• Open Debug mode: Add ' playerdebugmode ' field to the registry

The configuration is over, and you can use eclipse to generate a template project for extension. The resulting template project is very simple and there is only one default button in the panel:

Third, the project configuration manifest.xml file

The most important document for the development of Adobe HTML5 extension is manifest.xml. This file describes the basic information of this extension so that the Adobe host program can correctly identify the load. Its general content is as follows:

<?xml version= "1.0" encoding= "UTF-8" standalone= "no"? ><extensionmanifest extensionbundleid= " Com.example.helloworld "Extensionbundlename=" Hello World "extensionbundleversion=" 1.0 "version=" 4.0 "> <  extensionlist> <extension id= "com.example.helloworld.extension" version= "1.0"/> </ExtensionList>     <ExecutionEnvironment> <HostList> 
Among them,bundlename, bundleid, bundleversion is determined by the developer, generally in accordance with the normal version of the iteration to determine. The most important are the contents of the two tags, HostList and requiredruntimelist . HostList determines which host programs the extension supports (such as premierepro, after effects, and so on). The following code indicates that multiple host programs can be loaded:
This only supports Photoshop Extended, whose host ID corresponds to phxs, and the host ID and version of the other host programs are as follows:
Note that version uses a form of square brackets [14.0, 14.9], which indicates that this extension supports version 14.0-14.9 of Photoshop Extended, Photoshop extended, which is above this version or below this version, will not load this extension. However, if you want to specify that all versions above a certain version support how to specify? For example, to support more than 2014 Premierepro CC, how to specify this version? Write only the minimum version number:
In addition, it is requiredruntimelist this label. This tag specifies the CEP version of the runtime. The so-called CEP is the abbreviation for Common extensibility Platform , which provides a core set of services that enable developers to execute extendscript code, probe the host program's environment variables, Handles the events sent between extension and host. Before this service set was called  Creative Suite Extensible Services, referred to as Csxs. Therefore, you can still see the csxs abbreviation in some configuration files. The CEP was originally version 4.x and has been developed to 5 large versions, with the latest version being 8.x and supporting the latest Adobe CC 2018 hosting program. 
For example, if we want to support the first generation CC version of the host program, Requiredruntime's version will be set to 4.0. Otherwise, the extension cannot be loaded properly. In addition, if you want to access the file system in the extension, you have to specify additional parameters:
<cefcommandline><parameter>--allow-file-access</parameter><parameter>-- allow-file-access-from-files</parameter><parameter>--enable-nodejs</parameter></ Cefcommandline>
Disabling signature Verification
When we develop, we need to adjust the extension code at any time. The Adobe host program, for those unsigned extension, is ignored and will not be loaded. Therefore, we need to open the debug mode so that we do not have to sign the extension at the time of development:

 
   

  
    
 
     
On Mac, open ~/library/preferences/com.adobe.csxs.6.plist This file and add a line with the key named playerdebugmode, type "String" , the value is set to "1".
 
     
On Windows, open the registry key:hkey_current_user/software/adobe/csxs.6, add an entry named Playerdebugmode, type "String", The value is a key-value pair of "1".
 
    
 
   
Note: If the host program has a different version, the corresponding file may also be different. such as CC2017, the corresponding part of the above is changed to "csxs.7"
Chrome debugging
The Chrome debugging tool helps to observe the output of extension and probe the extension DOM structure, which is very helpful for debugging. It is also easy to enable the Chrome debugging tool by creating a file named. Debug in the root directory of the extension folder and writing the following:
<?xml version= "1.0" encoding= "UTF-8"?><extensionlist> <extension    id= "Com.pond5.marketplace" >        <HostList>            
This list shows the different ports that are used to debug various host programs. Take Pond5 as an example, the contents of the. debug file are as follows:
<?xml version= "1.0" encoding= "UTF-8"?> <ExtensionList>    <extension id= "Com.pond5.ppro" >        <HostList>            <!--Premiere--            
When you specify extension for debug premiere, the Port is 8089. As shown in the following:
CEP Cache cleanup
Development, it may be necessary to prohibit CEF on the Web content cache, you can manually delete the following location in the extension corresponding folder:

 
     

  
      
 
       
Windows:c:\users\username\appdata\local\temp\cep_cache\  
 
       
MAC:/users/username/library/logs/csxs/cep_cache
 
      
 
     
Of course, there are also adobe developers who say that specifying CEF parameters<Parameter>--disable-application-cache</Parameter>To disable the CEF cache, but I tried it as if it didn't work. Extension folder extension storage location is divided into two kinds, system-wide and user personal. System-wide installation extension, the extension file will be stored in the following location:
 
     

  
      
 
       
On Mac,: /library/application support/adobe/cep/extensions 
 
       
On Windows: C:\Program Files (x86) \common Files\adobe\cep\extensions 
 
      
 
     
In this way, all users of the current system can load the extension. It can also be installed only to the current user, with the following location:

 
     

  
      
 
       
On Mac: ~/library/application support/adobe/cep/extensions
 
       
On Windows:c:\\appdata\roaming\adobe\cep\extensions
 
      
 
     
Signature Packaging
When publishing extension, the entire package needs to be signed. You need to use the zxpsigncmd tool, which can be downloaded on the official website. First, to sign we need a digital certificate. This certificate can be purchased from a third-party certificate authority, which requires a certain amount of money. You can also make a self-signed certificate to sign the extension. Let's go through the process in one of the following ways:
./zxpsigncmd-selfsignedcert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputpath.p12>./zxpsigncmd-selfsignedcert US Washington myorganization "John Smith" MyPassword MYCERTIFICATE.P12
This will generate a self-signed certificate in the current directory, which we can then package with this certificate signature:
./zxpsigncmd-sign <inputDirectory> <outputZxp> <p12> <p12password>./zxpsigncmd-sign HELLOWORLD/HELLOWORLD.ZXP MYCERTIFICATE.P12 MyPassword
　　When the zxpsigncmd tool is signed, a meta-inf file is generated in the extension directory containing the information for this signature. The tool then packs the entire directory into a *.zxp file. This is the extension file that we eventually need to publish. ^_^
Routine analysis of Pond5 and Shutterstock by carefully analyzing the implementations of Pond5 and Shutterstock, we can summarize the general execution logic for this type of extension: (1) Open the extension panel in the host program, through the Windows-extensions You can find the loaded extension (2) The extension script will analyze whether the user is the first time to use. If this is the first time, let the user choose where to save the video footage, which is usually done by a popup dialog. User-selected location information, typically persisted through the XML file in the user's home directory. If the user does not use the extension for the first time, the XML file in the home directory will be directly loaded and parsed. (3) The user clicked on a video material and opened the download. This process can generally be achieved through NODEJS. However, to set the download callback function. (4) After the successful download, execute the callback function and import the downloaded video file into the host program. This step is to invoke the Extendscript script implementation. Specific scripting can be consulted here. Refer to this routine to achieve a similarPond5AndShutterstockAdobe Extension: Iv. reference Links
 
     

  
      
 
       
http://labs.adobe.com/technologies/extensionbuilder3/
 
       
http://davidderaedt.github.io/CC-Extension-Builder-for-Brackets/
 
       
https://www.adobe.com/exchange/em_download/
 
       
Https://github.com/Adobe-CEP/Samples
 
       
https://forums.adobe.com/thread/2010424
 
       
https://forums.adobe.com/message/8133214#8133214
 
       
Https://blogs.adobe.com/cssdk/2014/06/adobe-extension-builder-and-creative-cloud-2014.html
 
       
Http://www.adobe.com/devnet/creativesuite/samples.html
 
       
Http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/cs-extension-builder/pdfs/CC_Extension_SDK.pdf
 
       
Http://www.adobe.com/devnet/creativesuite/articles/a-short-guide-to-HTML5-extensions.html
 
       
Http://www.adobe.com/devnet/creativesuite/articles/hybrid-extensions.html
 
       
Http://labs.adobe.com/downloads/extensionbuilder3.html
 
      
 
     
The initial experience of Adobe HTML5 extension development