Adobe Html5 Extension development first experience graphic tutorial

Adobe produces a wide range of multimedia processing software product lines, covering audio and video editing, image processing, graphic design, film and television post-production and other fields. In order to extend the functions of the software, Adobe provides developers with two ways to increase the functions of the software: plug-ins and extensions. Last year, two Premiere plug-ins were developed using the officially provided SDK, which were used to import multimedia files in custom formats and preview video streams. Recently I have experienced the development of Adobe Extension.

Adobe Plugin is generally used to provide functions closer to the underlying level. For efficiency reasons, the official plug-in SDK provided is based on C++ language. Adobe Extension tends to provide extensions for upper-layer applications, which was implemented in the form of Flash in the Adobe CS era.

In the Adobe CC era, HTML5 implementation was provided, which allowed developers to interface with HTML5, CSS3, Javascript and even NodeJS for development. Because Adobe has embedded CEF in Premiere Pro, it can efficiently parse and render HTML5 and run Nodejs programs. Nodejs can realize the call of system functions, which is not too easy! In this article, I roughly summarize the journey of using HTML5 to develop an Adobe extension. The extension we want to make is very simple, as shown in the figure below:

This is a PremierePro extension developed by Pond5, a well-known foreign video material trading website. It allows users to log in to the website in Pro, download preview materials, purchase high-definition materials, automatically import videos or automatically replace videos. This eliminates the need for users to open a browser to log in to the website, which greatly improves the user experience. Similar plugins are developed by shutterstock:

Adobe officially launched an IDE for developing Adobe Html5 Extension based on eclipse. Therefore, we first configure the development environment according to the following process:

Download Eclipse, preferably version 3.6 or higher, and Extension Builder

Install Adobe Premiere Pro CC 2014/2015. Configure the target application and Service Manager of elicpse

Turn on debug mode: add 'PlayerDebugMode' field in registry

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

In the development of Adobe Html5 Extension, the most important file is manifest.xml. This file describes the basic information of this extension so that the Adobe host program can recognize and load it normally. Its general content is as follows:

Among them, BundleName, BundleId, and BundleVersion are determined by the developer, usually based on normal version iteration. The most important thing is the contents of the two tags HostList and RequiredRuntimeList. The HostList determines which host programs this extension supports (such as PremierePro, After Effects, etc.). The following code indicates that multiple host programs can be loaded:

Only Photoshop Extended is supported here, and its Host ID corresponds to PHXS. The Host IDs and versions of other host programs are as follows:

Note that Version uses the form of square brackets [14.0, 14.9], which indicates that this extension supports Photoshop Extended versions 14.0-14.9. Photoshop Extended versions higher than this or lower than this version will not load this extension. However, what if you want to specify that all versions above a certain version are supported? For example, if you want to support PremierePro CC 2014 or above, how to specify this Version? Just write the lowest version number:

In addition, there is the label RequiredRuntimeList. This tag specifies the CEP version of the runtime. The so-called CEP is the abbreviation of Common Extensibility Platform. It provides a core service set to facilitate developers to execute Extendscript code, detect the environment variables of the host program, and process events sent between the extension and the host. Previously, this service set was called Creative Suite Extensible Services, or CSXS for short. Therefore, the abbreviation CSXS can still be seen in some configuration files. The initial version of CEP was 4.x, and it has developed into 5 major versions so far. The latest version is 8.x, which supports the latest Adobe CC 2018 host program.

As shown above, if we want to support the first generation CC version of the host program, the Version of RequiredRuntime must be set to 4.0. Otherwise, the extension cannot be loaded normally. In addition, if you want to access the file system in the extension, you must specify additional parameters:

When we develop, we need to adjust the extension code at any time. The Adobe host program ignores unsigned extensions and does not load them. Therefore, we need to turn on debugging mode so that we do not have to sign the extension during development:

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

Note: If the version of the host program is different, the corresponding files may also be different. For example, in CC2017, you need to change the corresponding part above to CSXS.7

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

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

When specifying debugging Premiere extension, the port is 8089. As shown below:

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

Windows: C:/Users/USERNAME/AppData/Local/Temp/cep_cache/Mac: /Users/USERNAME/Library/Logs/CSXS/cep_cache

Of course, some Adobe developers also say to specify the CEF parameter <Parameter>--disable-application-cache</Parameter> to disable CEF caching, but it doesn't seem to work after I tried it. Extension folder Extension is stored in two locations, system-wide and user-personal. If you install Extension system-wide, the Extension file will be stored in the following location: 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, and its location is as follows:

On Mac: ~/Library/Application Support/Adobe/CEP/extensionsOn Windows: C://AppData/Roaming/Adobe/CEP/extensions Signature packaging

When publishing an Extension, the entire package needs to be signed. You need to use the ZXPSignCmd tool here, which can be downloaded from the official website. First, to sign we need a digital certificate. We can purchase this certificate from a third-party certificate issuing agency, which requires a certain amount of funding. You can also create a self-signed certificate to sign the extension. Let’s go through the process in the latter way:

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

When the ZXPSignCmd tool signs, it will generate a META-INF file in the extension directory, which stores the signature information. Then, the tool will package and compress the entire directory into a *.zxp file. This is the expansion file we ultimately need to publish. ^_^

Routine Analysis of Pond5 and Shutterstock 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 find the loaded extension through Window-Extensions

(2) The Extension script will analyze whether the user is using it for the first time. If it is the first time, let the user select the location where the video material is to be saved. This is usually achieved through a pop-up dialog box. The location information selected by the user is generally persisted in the user's home directory through an xml file. If the user is not using the extension for the first time, the xml file in the home directory will be directly loaded and parsed.

(3) The user clicks on a certain video material to start the download. This process can generally be achieved through nodejs. However, the download callback function must be set up.

(4) After the download is successful, execute the callback function and import the downloaded video file into the host program. This step is implemented by calling the extendscript script. For specific script writing, please refer here. Referring to this routine, we implemented Adobe Extension similar to Pond5 and Shutterstock:

The above is the graphic tutorial for the first experience of Adobe Html5 Extension development introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!