Adobe Html5 Extension开发初体验图文教程

时间:2017-12-05

我们在开发的时候,需要随时调整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的文件,写入下述内容:

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

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

Adobe Html5 Extension开发初体验图文教程

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/extensionsOn Windows:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

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

On Mac: ~/Library/Application Support/Adobe/CEP/extensionsOn Windows: C:\\AppData\Roaming\Adobe\CEP\extensions 签名打包

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

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

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

Adobe Html5 Extension开发初体验图文教程

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

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

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

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

(4)下载成功后执行回调函数,把下载好的视频文件导入到宿主程序中。这个步骤则是调用extendscript脚本实现。具体脚本编写可以参考这里。参考这个套路,实现了类似Pond5和Shutterstock的Adobe Extension:

Adobe Html5 Extension开发初体验图文教程

总结

以上所述是小编给大家介绍的Adobe Html5 Extension开发初体验图文教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:基于HTML5的WebGL经典3D虚拟机房漫游动画 下一篇:html5中canvas图表实现柱状图的示例

    相关文章

    最新文章