一、背景介紹

Adobe公司出品的多媒體處理軟件產(chǎn)品線較多，涵蓋了音視頻編輯、圖像處理、平面設(shè)計(jì)、影視后期等領(lǐng)域。為了擴(kuò)展軟件的功能，Adobe公司為開(kāi)發(fā)者提供了兩種方式來(lái)增加軟件的功能：分別是插件（Plugin）和擴(kuò)展（Extension）。去年利用官方提供的SDK開(kāi)發(fā)過(guò)兩款Premiere插件，分別用于導(dǎo)入自定義格式的多媒體文件和視頻流預(yù)覽。近來(lái)體驗(yàn)了一下Adobe Extension的開(kāi)發(fā)。

Adobe Plugin一般用于提供更靠近底層的功能。官方出于效率的考慮，提供的插件SDK是基于C++語(yǔ)言的。而Adobe Extension則偏向與提供上層應(yīng)用的擴(kuò)展，在Adobe CS時(shí)代是采用的Flash形式實(shí)現(xiàn)的。

在Adobe CC時(shí)代則提供了HTML5實(shí)現(xiàn)，這使得開(kāi)發(fā)者們可以接口HTML5, CSS3, Javascript甚至是NodeJS來(lái)開(kāi)發(fā)。因?yàn)锳dobe在PremierePro里面嵌入了CEF，可以高效的解析渲染HTML5、運(yùn)行Nodejs程序。而Nodejs則能實(shí)現(xiàn)系統(tǒng)功能的調(diào)用，簡(jiǎn)直不要太叼！在這篇文章中，我大概總結(jié)了一下使用HTML5來(lái)開(kāi)發(fā)一款A(yù)dobe擴(kuò)展的心路歷程。 我們要做的一款擴(kuò)展非常簡(jiǎn)單，如下圖所示：

這是國(guó)外一家知名的視頻素材交易網(wǎng)站Pond5開(kāi)發(fā)的一款PremierePro擴(kuò)展，它可以讓用戶在Pr中登陸網(wǎng)站、下載預(yù)覽素材、購(gòu)買高清素材、自動(dòng)導(dǎo)入視頻或自動(dòng)替換視頻。使得用戶無(wú)需額外打開(kāi)瀏覽器登陸網(wǎng)站操作，極大的提高了用戶的使用體驗(yàn)。類似的還有shutterstock開(kāi)發(fā)的插件：

二、開(kāi)發(fā)環(huán)境

Adobe官方基于eclipse推出了一個(gè)用于開(kāi)發(fā)Adobe Html5 Extension的IDE。因此，我們按如下流程先來(lái)配置下開(kāi)發(fā)環(huán)境：

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

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

打開(kāi)調(diào)試模式：在注冊(cè)表中添加 'PlayerDebugMode'字段

配置結(jié)束，到這里可以利用eclipse生成extension的模板工程了。生成的模板工程非常簡(jiǎn)單，面板里面只有一個(gè)默認(rèn)的按鈕：

三、工程配置manifest.xml文件

Adobe Html5 Extension的開(kāi)發(fā)，最重要的一個(gè)文件就是manifest.xml。這個(gè)文件描述了這個(gè)extension的基本信息，以便Adobe宿主程序能夠正常識(shí)別加載。其大體內(nèi)容如下：

　　其中，BundleName, BundleId, BundleVersion由開(kāi)發(fā)者來(lái)定，一般就是按照正常的版本迭代來(lái)確定。最重要的是HostList和RequiredRuntimeList這兩個(gè)標(biāo)簽的內(nèi)容。HostList里面確定了這個(gè)extension支持哪些宿主程序（如PremierePro, After Effects等等）。下面的代碼指明了多個(gè)宿主程序都可以加載：

　　這里只支持Photoshop Extended，其Host ID對(duì)應(yīng)為PHXS，其他宿主程序的Host ID及版本如下：

注意到Version使用了一個(gè)方括號(hào)的形式[14.0, 14.9]，這表明這個(gè)extension支持版本14.0-14.9的Photoshop Extended ，高于這個(gè)版本或者低于這個(gè)版本的Photoshop Extended是不會(huì)加載這個(gè)extension的。但是，如果要指定某版本以上的所有版本都支持該如何指定？比如要支持2014以上的PremierePro CC，如何指定這個(gè)Version呢？只寫(xiě)上最低版本號(hào)即可：

　　另外，就是RequiredRuntimeList這個(gè)標(biāo)簽了。這個(gè)標(biāo)簽指定了運(yùn)行時(shí)的CEP版本。所謂的CEP是Common Extensibility Platform的簡(jiǎn)稱，它提供了一個(gè)核心服務(wù)集，便于開(kāi)發(fā)者執(zhí)行Extendscript代碼、探查宿主程序的環(huán)境變量、處理extension與host之間發(fā)送的事件。在之前這個(gè)服務(wù)集叫做Creative Suite Extensible Services，簡(jiǎn)稱CSXS。因此，在一些配置文件中仍然可以看到CSXS這個(gè)縮寫(xiě)。CEP最初版本為4.x，發(fā)展至今已經(jīng)有5個(gè)大版本了，最新的版本為8.x，支持最新的Adobe CC 2018宿主程序。

如上圖，如果我們要支持初代CC版本的宿主程序的話，RequiredRuntime的Version就要設(shè)置為4.0。否則是無(wú)法正常加載extension的。此外，如果想在擴(kuò)展中訪問(wèn)文件系統(tǒng)的話，還得指定額外一些參數(shù)：

禁用簽名驗(yàn)證

我們?cè)陂_(kāi)發(fā)的時(shí)候，需要隨時(shí)調(diào)整extension的代碼。而Adobe宿主程序?qū)τ谀切](méi)有簽名的extension，是置之不理不會(huì)加載的。因此，我們需要把調(diào)試模式打開(kāi)，這樣開(kāi)發(fā)的時(shí)候就不必對(duì)擴(kuò)展進(jìn)行簽名了：

在mac上，打開(kāi)~/Library/Preferences/com.adobe.CSXS.6.plist這個(gè)文件并增加一行，鍵名為PlayerDebugMode，類型為 "String",值設(shè)置為"1".在Windows上， 打開(kāi)注冊(cè)表項(xiàng)：HKEY_CURRENT_USER/Software/Adobe/CSXS.6，增加一項(xiàng)名為PlayerDebugMode, 類型為 "String", 值為 "1"的鍵值對(duì).

注意：如果宿主程序的版本不同，對(duì)應(yīng)的文件可能也不同。比如CC2017,就要把上面對(duì)應(yīng)部分改成 "CSXS.7"

chrome調(diào)試

chrome調(diào)試工具有助于觀察extension的輸出、探查extension的DOM結(jié)構(gòu)，對(duì)于調(diào)試起著非常大的幫助。啟用chrome調(diào)試工具也很簡(jiǎn)單，在extension文件夾的根目錄創(chuàng)建一個(gè)名為.debug的文件，寫(xiě)入下述內(nèi)容：

　　這個(gè)列表說(shuō)明了調(diào)試不同的宿主程序時(shí)用的端口不一樣。以Pond5為例，其.debug文件內(nèi)容如下：

　　指定調(diào)試Premiere的extension時(shí)，端口為8089。如下圖所示：

CEP緩存清理

開(kāi)發(fā)的時(shí)候，有可能需要禁止CEF對(duì)web內(nèi)容緩存，可以直接手動(dòng)刪除掉如下位置中extension對(duì)應(yīng)的文件夾：

Windows: C:\Users\USERNAME\AppData\Local\Temp\cep_cache\Mac: /Users/USERNAME/Library/Logs/CSXS/cep_cache
當(dāng)然，也有Adobe的開(kāi)發(fā)者說(shuō)指定CEF參數(shù)<Parameter>--disable-application-cache</Parameter>來(lái)禁用CEF緩存，不過(guò)我嘗試過(guò)好像不起作用。Extension文件夾 Extension存放的位置有分兩種，系統(tǒng)范圍的和用戶個(gè)人的。系統(tǒng)范圍安裝Extension的話，Extension文件會(huì)存放在如下位置：On Mac,:/Library/Application Support/Adobe/CEP/extensionsOn Windows:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

這樣，當(dāng)前系統(tǒng)的所有用戶都可以加載這個(gè)Extension了。也可以僅僅安裝給當(dāng)前用戶使用，其位置如下：

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

發(fā)布Extension的時(shí)候，需要對(duì)整個(gè)包進(jìn)行簽名。這里需要用到ZXPSignCmd這個(gè)工具，在官方網(wǎng)站上可以下載。首先，要進(jìn)行簽名我們需要一個(gè)數(shù)字證書(shū)。這個(gè)證書(shū)我們可以從第三方證書(shū)簽發(fā)機(jī)構(gòu)購(gòu)買，這需要一定的經(jīng)費(fèi)。也可以做一個(gè)自簽名的證書(shū)，對(duì)extension進(jìn)行簽名。我們就按照后面一種方式來(lái)走個(gè)流程：

　　這樣會(huì)在當(dāng)前目錄下生成一個(gè)自簽名證書(shū)，然后我們可以用這個(gè)證書(shū)簽名打包了：

　　ZXPSignCmd工具簽名時(shí)會(huì)在extension目錄下生成一個(gè)META-INF文件，里面存放這次簽名的信息。然后，工具會(huì)將整個(gè)目錄打包壓縮成一個(gè)*.zxp文件。這就是我們最終需要發(fā)布的擴(kuò)展文件了。^_^

Pond5和Shutterstock的套路分析通過(guò)仔細(xì)分析Pond5和shutterstock的實(shí)現(xiàn)，我們可以總結(jié)下這種類型的擴(kuò)展的一般執(zhí)行邏輯：

（1）在宿主程序中打開(kāi)extension面板，通過(guò)”窗口-擴(kuò)展“可以找到已加載的擴(kuò)展

（2）Extension的腳本會(huì)分析用戶是否是第一次使用。如果是第一次，讓用戶選擇視頻素材要保存的位置，這個(gè)一般通過(guò)彈出對(duì)話框?qū)崿F(xiàn)。用戶選擇的位置信息，一般通過(guò)xml文件持久化存在用戶家目錄中。用戶如果不是第一次使用擴(kuò)展的話，就直接加載家目錄中的xml文件解析了。

（3）用戶點(diǎn)擊了某個(gè)視頻素材，開(kāi)啟下載。這個(gè)過(guò)程一般可通過(guò)nodejs實(shí)現(xiàn)。不過(guò)，要設(shè)置好下載回調(diào)函數(shù)。

（4）下載成功后執(zhí)行回調(diào)函數(shù)，把下載好的視頻文件導(dǎo)入到宿主程序中。這個(gè)步驟則是調(diào)用extendscript腳本實(shí)現(xiàn)。具體腳本編寫(xiě)可以參考這里。參考這個(gè)套路，實(shí)現(xiàn)了類似Pond5和Shutterstock的Adobe Extension：

總結(jié)

以上所述是小編給大家介紹的Adobe Html5 Extension開(kāi)發(fā)初體驗(yàn)圖文教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！