Graphic tutorials for Adobe Html5 Extension development,

Graphic tutorials for Adobe Html5 Extension development,

I. background

Adobe has a wide range of multimedia processing software products, covering audio and video editing, image processing, graphic design, post-video and other fields. To expand the functionality of the software, Adobe provides developers with two ways to add software features: plug-in and Extension ). Last year, two Premiere plug-ins were developed using the official SDK to import custom formats of multimedia files and video stream preview. Recently, I have experienced the development of Adobe Extension.

Adobe Plugin is generally used to provide functions closer to the underlying layer. The official Plug-In SDK is based on the C ++ language for efficiency considerations. While Adobe Extension prefers to Provide extensions for upper-layer applications, which is implemented in the Flash format in the Adobe CS era.

In the Adobe CC era, HTML5 implementation is provided, which allows developers to interface HTML5, CSS3, Javascript and even NodeJS for development. Because Adobe embeds CEF in PremierePro, it can parse and render HTML5 efficiently and run Nodejs programs. Nodejs can call system functions, so it's not too easy! In this article, I will summarize the process of developing an Adobe extension using HTML5. An extension is very simple, as shown in:

 

This is a PremierePro extension developed by Pond5, a well-known foreign video material trading website, it allows users to log on to the website in Pr, download preview materials, purchase HD materials, automatically import videos, or automatically replace videos. This allows users to log on to the website without opening a browser, greatly improving the user experience. There are also plug-ins developed by shutterstock:

2. Development Environment

Adobe officially launched an IDE for developing Adobe Html5 Extension Based on eclipse. Therefore, 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 elicpse's "target application" and "Service Manager"

Enable debug mode: add the 'playerdebugmode' field to the Registry.

The configuration is complete. You can use eclipse to generate the extension template project. The generated template project is very simple, and there is only one default button in the panel:

3. Configure the manifest. xml file for the project

Manifest. xml is the most important file for Adobe Html5 Extension development. This file describes the basic information of this extension, so that the Adobe host program can properly identify the loading. The general content is as follows:

Specifically, BundleName, BundleId, and BundleVersion are determined by the developer, which is generally determined by normal version iterations. The most important is the content of the HostList and RequiredRuntimeList labels. HostList identifies the host programs supported by the extension (such as PremierePro and After Effects ). The following code indicates that multiple host programs can be loaded:

Only Photoshop Extended is supported. The Host ID corresponds to PHXS. The Host ID and version of other Host programs are as follows:

Note that Version uses a square brackets in the form of [14.0, 14.9], which indicates that this extension supports Photoshop Extended versions 14.0-14.9, photoshop Extended Versions later than or later than this version do not load this extension. However, if you want to specify that all versions of a certain version or above can be specified, what should I do? For example, if you want to support more than 2014 of PremierePro CC, how do you specify this Version? Write the lowest version number:

In addition, it is the RequiredRuntimeList label. This label specifies the running CEP version. The so-called CEP is short for Common Extensibility Platform. It provides a core service set that allows developers to execute Extendscript code, probe environment variables of the host Program, and process events sent between extension and host. Previously, this service set was called Creative Suite Extensible Services, or CSXS for short. Therefore, you can still see the abbreviation CSXS in some configuration files. The initial version of CEP is 4.x. up to now, there are five major versions. The latest version is 8.xand supports the latest Adobe CC 2018 Host Program.

For example, if we want to support the host Program of the initial CC Version, we need to set the Version of RequiredRuntime to 4.0. Otherwise, extension cannot be loaded normally. In addition, if you want to access the file system in the extension, you must specify additional parameters:

Disable Signature Verification

During development, we need to adjust the extension code at any time. The Adobe Host Program does not load unsigned extension. Therefore, we need to enable the debugging mode so that we do not need to sign the extension during development:

On mac, open ~ /Library/Preferences/com. adobe. CSXS.6.plist file and add a line with the key name PlayerDebugMode. The type is "String" and the value is set to "1 ". on Windows, open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key-Value Pair named PlayerDebugMode with the type of "String" and a value of "1.

Note: If the version of the Host Program is different, the corresponding files may be different. For example, in CC2017, we need to change the corresponding part above to "CSXS.7"

Chrome debugging

The chrome debugging tool helps you observe the extension output and explore the DOM structure of extension, which is very helpful for debugging. It is also easy to enable the chrome debugging tool. Create a file named. debug in the root directory of the extension folder and write the following content:

This list shows that the ports used for debugging different host programs are different. Taking Pond5 as an example, the content of its. debug file is as follows:

Specify the port 8089 when you debug the extension of Premiere. As shown in:

CEP cache cleanup

During development, you may need to disable CEF from caching web content. You can manually delete the folder corresponding to extension in the following position:

Windows: C: \ Users \ USERNAME \ AppData \ Local \ Temp \ cep_cache \ Mac:/Users/USERNAME/Library/Logs/CSXS/cep_cache
Of course, some Adobe developers also say that the CEF Parameter <Parameter> -- disable-application-cache </Parameter> is specified to disable the CEF cache, but it does not seem to work after I try it. There are two storage locations for the Extension Folder: System-specific and user-specific. If Extension is installed in the system, the Extension file will be stored in the following locations: On Mac,:/Library/Application Support/Adobe/CEP/extensionsOn Windows: C: \ Program Files (x86) \ Common Files \ Adobe \ CEP \ extensions

In this way, all users of the current system can load this Extension. It can also be installed only for the current user. Its location is as follows:

On Mac :~ /Library/Application Support/Adobe/CEP/extensionsOn Windows: C :\\ AppData \ Roaming \ Adobe \ CEP \ extensions signature Packaging

When releasing Extension, you need to sign the entire package. The ZXPSignCmd tool is required here and can be downloaded from the official website. First, we need a digital certificate to sign the certificate. We can purchase this certificate from a third-party certificate issuing authority, which requires a certain amount of money. You can also create a self-signed certificate to sign extension. Let's proceed with the following process:

This will generate a self-signed certificate in the current directory, and then we can use this certificate signature to package:

The ZXPSignCmd tool will generate a META-INF file under the extension directory to store the signature information. The tool then packs the entire directory into a *. zxp file. This is the final extension file to be released. Pai_^

By carefully analyzing the implementation of Pond5 and Shutterstock, We can summarize the general execution logic of this type of extension:

(1) Open the extension panel in the Host Program and click "window-extension" to find the loaded extension.

(2) The Extension script will analyze whether the user is using it for the first time. If this is the first time, let the user select the location where the video clip is to be saved. This is generally achieved through the pop-up dialog box. Location Information selected by the user. It is stored in the user's home directory through xml files persistently. If the extension is not used for the first time, you can directly load the xml file in the home directory for parsing.

(3) The user clicks a video clip to enable download. This process can generally be implemented through nodejs. However, you must set the download callback function.

(4) After the download is successful, run the callback function to import the downloaded video file to the Host Program. This step is implemented by calling the extendscript script. For more information about script writing, see here. With reference to this routine, Adobe Extension similar to Pond5 and Shutterstock is implemented:

Summary

The above is a graphic tutorial on the early development experience of Adobe Html5 Extension. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!