Adobe Html5 Extension开发初体验

一、背景介绍

Adobe公司出品的多媒体处理软件产品线较多，涵盖了音视频编辑、图像处理、平面设计、影视后期等领域。为了扩展软件的功能，Adobe公司为开发者提供了两种方式来增加软件的功能：分别是插件（Plugin）和扩展（Extension）。去年利用官方提供的SDK开发过两款Premiere插件，分别用于导入自定义格式的多媒体文件和视频流预览。近来体验了一下Adobe Extension的开发。

Adobe Plugin一般用于提供更靠近底层的功能。官方出于效率的考虑，提供的插件SDK是基于C++语言的。而Adobe Extension则偏向与提供上层应用的扩展，在Adobe CS时代是采用的Flash形式实现的。在Adobe CC时代则提供了HTML5实现，这使得开发者们可以接口HTML5, CSS3, Javascript甚至是NodeJS来开发。因为Adobe在PremierePro里面嵌入了CEF，可以高效的解析渲染HTML5、运行Nodejs程序。而Nodejs则能实现系统功能的调用，简直不要太叼！在这篇文章中，我大概总结了一下使用HTML5来开发一款Adobe扩展的心路历程。

我们要做的一款扩展非常简单，如下图所示：

这是国外一家知名的视频素材交易网站Pond5开发的一款PremierePro扩展，它可以让用户在Pr中登陆网站、下载预览素材、购买高清素材、自动导入视频或自动替换视频。使得用户无需额外打开浏览器登陆网站操作，极大的提高了用户的使用体验。类似的还有shutterstock开发的插件：

二、开发环境

Adobe官方基于eclipse推出了一个用于开发Adobe Html5 Extension的IDE。因此，我们按如下流程先来配置下开发环境：

  • 下载 Eclipse，最好是3.6或更高版本，以及Extension Builder

  • 安装Adobe Premiere Pro CC 2014/2015.
  • 配置elicpse的“target application”和"Service Manager"

  • 打开调试模式：在注册表中添加 ‘PlayerDebugMode‘字段

配置结束，到这里可以利用eclipse生成extension的模板工程了。生成的模板工程非常简单，面板里面只有一个默认的按钮：

三、工程配置

manifest.xml文件

Adobe Html5 Extension的开发，最重要的一个文件就是manifest.xml。这个文件描述了这个extension的基本信息，以便Adobe宿主程序能够正常识别加载。其大体内容如下：

<?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>
      <Host Name="PHXS" Version="[14.0,14.9]"/>
    </HostList>
    <LocaleList>
      <Locale Code="All"/>
    </LocaleList>
    <RequiredRuntimeList>
      <RequiredRuntime Name="CSXS" Version="4.0"/>
    </RequiredRuntimeList>
  </ExecutionEnvironment>
  <DispatchInfoList>
    <Extension Id="com.example.helloworld.extension">
      <DispatchInfo>
        <Resources>
          <MainPath>./index.html</MainPath>
        </Resources>
        <UI>
          <Type>Panel</Type>
          <Menu>Hello world</Menu>
          <Geometry>
            <Size>
              <Height>400</Height>
              <Width>400</Width>
            </Size>
          </Geometry>
        </UI>
      </DispatchInfo>
    </Extension>
  </DispatchInfoList>
</ExtensionManifest>

　　其中，BundleName, BundleId, BundleVersion由开发者来定，一般就是按照正常的版本迭代来确定。最重要的是HostList和RequiredRuntimeList这两个标签的内容。HostList里面确定了这个extension支持哪些宿主程序（如PremierePro, After Effects等等）。下面的代码指明了多个宿主程序都可以加载：

<HostList>
	<Host Name="PPRO" Version="[7.0, 10.0]" />
	<Host Name="PHSP" Version="[14.0, 16.0]" />
	<Host Name="PHXS" Version="[14.0, 14.9]" />
</HostList>

　　这里只支持Photoshop Extended，其Host ID对应为PHXS，其他宿主程序的Host ID及版本如下：

注意到Version使用了一个方括号的形式[14.0, 14.9]，这表明这个extension支持版本14.0-14.9的Photoshop Extended ，高于这个版本或者低于这个版本的Photoshop Extended是不会加载这个extension的。但是，如果要指定某版本以上的所有版本都支持该如何指定？比如要支持2014以上的PremierePro CC，如何指定这个Version呢？只写上最低版本号即可：

<HostList>
	<Host Name="PPRO" Version="7.0" />
	<Host Name="PHSP" Version="14.0" />
	<Host Name="PHXS" Version="14.0" />
	<Host Name="IDSN" Version="9.0"/>
	<Host Name="ILST" Version="17.0" />
</HostList>

　　另外，就是RequiredRuntimeList这个标签了。这个标签指定了运行时的CEP版本。所谓的CEP是Common Extensibility Platform的简称，它提供了一个核心服务集，便于开发者执行Extendscript代码、探查宿主程序的环境变量、处理extension与host之间发送的事件。在之前这个服务集叫做 Creative Suite Extensible Services，简称CSXS。因此，在一些配置文件中仍然可以看到CSXS这个缩写。CEP最初版本为4.x，发展至今已经有5个大版本了，最新的版本为8.x，支持最新的Adobe CC 2018宿主程序。

如上图，如果我们要支持初代CC版本的宿主程序的话，RequiredRuntime的Version就要设置为4.0。否则是无法正常加载extension的。此外，如果想在扩展中访问文件系统的话，还得指定额外一些参数：

<CEFCommandLine>
	<Parameter>--allow-file-access</Parameter>
	<Parameter>--allow-file-access-from-files</Parameter>
	<Parameter>--enable-nodejs</Parameter>
</CEFCommandLine>

禁用签名验证

我们在开发的时候，需要随时调整extension的代码。而Adobe宿主程序对于那些没有签名的extension，是置之不理不会加载的。因此，我们需要把调试模式打开，这样开发的时候就不必对扩展进行签名了：

  • 在mac上，打开~/Library/Preferences/com.adobe.CSXS.6.plist这个文件并增加一行，键名为PlayerDebugMode，类型为 "String",值设置为"1".
  • 在Windows上， 打开注册表项：HKEY_CURRENT_USER/Software/Adobe/CSXS.6，增加一项名为PlayerDebugMode, 类型为 "String", 值为 "1"的键值对.

注意：如果宿主程序的版本不同，对应的文件可能也不同。比如CC2017,就要把上面对应部分改成 "CSXS.7"

chrome调试

chrome调试工具有助于观察extension的输出、探查extension的DOM结构，对于调试起着非常大的帮助。启用chrome调试工具也很简单，在extension文件夹的根目录创建一个名为.debug的文件，写入下述内容：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <Extension Id="com.pond5.marketplace">
        <HostList>
            <Host Name="PHXS" Port="8000"/>
            <Host Name="IDSN" Port="8001"/>
            <Host Name="AICY" Port="8002"/>
            <Host Name="ILST" Port="8003"/>
            <Host Name="PPRO" Port="8004"/>
            <Host Name="PRLD" Port="8005"/>
            <Host Name="FLPR" Port="8006"/>
            <Host Name="AUDT" Port="8007"/>
        </HostList>
    </Extension>
</ExtensionList>

　　这个列表说明了调试不同的宿主程序时用的端口不一样。以Pond5为例，其.debug文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <Extension Id="com.pond5.ppro">
        <HostList>
            <!-- Premiere -->
            <Host Name="PPRO" Port="8089" />
        </HostList>
    </Extension>
</ExtensionList>

　　指定调试Premiere的extension时，端口为8089。如下图所示：

CEP缓存清理

开发的时候，有可能需要禁止CEF对web内容缓存，可以直接手动删除掉如下位置中extension对应的文件夹：

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

当然，也有Adobe的开发者说指定CEF参数<Parameter>--disable-application-cache</Parameter>来禁用CEF缓存，不过我尝试过好像不起作用。

Extension文件夹

Extension存放的位置有分两种，系统范围的和用户个人的。系统范围安装Extension的话，Extension文件会存放在如下位置：

  • On Mac,: /Library/Application Support/Adobe/CEP/extensions
  • On Windows: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

这样，当前系统的所有用户都可以加载这个Extension了。也可以仅仅安装给当前用户使用，其位置如下：

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

签名打包

发布Extension的时候，需要对整个包进行签名。这里需要用到ZXPSignCmd这个工具，在官方网站上可以下载。首先，要进行签名我们需要一个数字证书。这个证书我们可以从第三方证书签发机构购买，这需要一定的经费。也可以做一个自签名的证书，对extension进行签名。我们就按照后面一种方式来走个流程：

./ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12>
./ZXPSignCmd -selfSignedCert US Washington myOrganization "John Smith" myPassword myCertificate.p12

　　这样会在当前目录下生成一个自签名证书，然后我们可以用这个证书签名打包了：

./ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password>
./ZXPSignCmd -sign HelloWorld/ HelloWorld.zxp myCertificate.p12 myPassword

　　ZXPSignCmd工具签名时会在extension目录下生成一个META-INF文件，里面存放这次签名的信息。然后，工具会将整个目录打包压缩成一个*.zxp文件。这就是我们最终需要发布的扩展文件了。^_^

Pond5和Shutterstock的套路分析

通过仔细分析Pond5和shutterstock的实现，我们可以总结下这种类型的扩展的一般执行逻辑：

（1）在宿主程序中打开extension面板，通过”窗口-扩展“可以找到已加载的扩展

（2）Extension的脚本会分析用户是否是第一次使用。如果是第一次，让用户选择视频素材要保存的位置，这个一般通过弹出对话框实现。用户选择的位置信息，一般通过xml文件持久化存在用户家目录中。用户如果不是第一次使用扩展的话，就直接加载家目录中的xml文件解析了。

（3）用户点击了某个视频素材，开启下载。这个过程一般可通过nodejs实现。不过，要设置好下载回调函数。

（4）下载成功后执行回调函数，把下载好的视频文件导入到宿主程序中。这个步骤则是调用extendscript脚本实现。具体脚本编写可以参考这里。

参考这个套路，实现了类似Pond5和Shutterstock的Adobe Extension：

四、参考链接

时间： 2024-10-07 03:06:30

Adobe Html5 Extension开发初体验的相关文章

Xamarin.iOS开发初体验

Xamarin是一个跨平台开发框架,这一框架的特点是支持用C#开发IOS.Android.Windows Phone和Mac应用,这套框架底层是用Mono实现的. Mono是一款基于.NET框架的开源工程,包含C#语言编译器.CLR运行时和一组类库,能运行于Windows.Linux.Unix.Mac OS和Solaris.对于.NET程序员来说,Xamarin是走向安卓.iOS.Mac跨平台开发的神器,不仅能用熟悉的C#来开发,还能使用Visual Studio作为IDE.本文内容是Xamar

Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储

在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件设置.Azure IoT Hub的连接.程序的编译.下载和调试.PowerBI数据的展现.在这篇文章中,将会详细讲述Cloud to Device的消息反馈控制以及如何通过Stream Analytics将数据存储到Azure Storage Table,以方便数据后期的利用. 1. 反馈控制 上一篇文章中,

程序开发初体验

程序开发初体验 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 20 10 ? Estimate ? 估计这个任务需要多少时间 20 10 Development 开发 370 380 ? Analysis ? 需求分析 (包括学习新技术) 30 20 ? Design Spec ? 生成设计文档 60 20 ? Design Review ? 设计复审 10 10 ? Coding St

linux 驱动模块开发初体验

2020-02-09 关键字: 在嵌入式 Linux 开发中,驱动程序通常都是用 C语言 来编写的,并经编译后生成为目标文件,即 '.o' 文件.随后又可在编译系统时以两种形式打包成系统镜像文件: 1.uImage 即内核的二进制文件.这种形式是直接将内核驱动程序打包进系统文件中.这种形式的驱动程序将会在内核加载时运行,即随系统启动而运行.这种形式的驱动预置在一定程度上会影响系统的开机耗时. 2.ko 文件 即 kernel object,这种形式是将驱动程序以独立的模块文件存在于系统中.这种形

Microsoft IoT Starter Kit 开发初体验

1. 引子 今年6月底,在上海举办的中国国际物联网大会上,微软中国面向中国物联网社区推出了Microsoft IoT Starter Kit ,并且免费开放1000套的申请.申请地址为:http://aka.ms/iotkits,目前仍然有效.当时一开放申请,我就在线填写了申请表,接下来就是长长的等待.相信很多朋友都是一样,在经过几个月的等待之后,终于拿到了这个开发套件,而有些朋友估计还在等待中.因为官方是一个月处理并邮寄一批,速度不是很快.但是,在经过了一段时间使用以后,我可以说,如果朋友们期

Hybird App ( 混合模式移动应用)开发初体验

最近1,2个月一直都尝试开发一款hybird app,遇到了很多问题,谈谈自己的体会. Hybird app (混合模式移动应用),它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开发的移动应用, 好处显而易见,由于内嵌的是Html5, 所以跨平台,扩展性,开发成本都是很不错的优势. Hybird App拥有很多从开发工具到打包发布的解决方案,比较出名的是来自Adobe的phonegap, 国内有AppCan,这2种解决方案都有比较好的工具平台.这次我采用的的是Appcan,

Visual Studio 2015 移动跨平台开发初体验

微软换了新 CEO 后变化很大,对我们团队最有利的消息就是 Visual Studio 2015 支持移动应用跨平台开发. 还记不记得很早之前,Xamarin 宣布与微软成为合作伙伴的消息.显然,Xamarin 得到了来自微软的大力支持,而微软则直接将 Xamain 融合进 Visual Studio 2015,以扭转它在移动领域的颓势. 也许你还担心这里面是否有大坑,是否还不够成熟,我现在还无法回答你,不过我相信微软和 Xamarin 会很快解决这些问题,尤其是微软,它有足够的动机去让 Vis

移动VR开发初体验

自从google收购oculus开始,VR的概念越来越火.Unite 2015简直就成了半个VR展,而仅仅1年之前UNITE 2014上还仅有一个oculus的一个极其简陋的展示. 最近体验了一下三星的Gear VR,很不错.只要漫游的速度不是很快,保证帧率的情况下,几乎没有明显的眩晕感.比之前体验的oculus dk1强太多了.Gear VR自带的应用也比较丰富,有全景照片,全景视频,3d电影(就是在虚拟的环境里有个屏幕,在上面看3d电影,挺有意思的),以及各种小游戏,小demo.最重要的是O

前端开发初体验

决定成为一名优秀的前端工程师,已经有三个月时间了.在这三个月的时间里我零零散散的看着书,并没有自己做一个项目,工作中我主要负责服务器端的代码,所以基本上很少接触前端代码,只是用一些JQuery和html,都是很简单的实现.所以对前端开发并没有切身的体验. 在大学期间,自己做项目时,前段后台都是自己写,感觉前端没有难度,就是写html,css布局嘛,偶尔用js实现一下提示信息的显示什么的.主要精力都是放在Java开发上.可是工作之后感觉其实前端并没有那么简单,前端直接决定用户的体验,甚至影响用户是