Adobe Html5 Extension開發初體驗

本文轉載自查看原文 2017-11-14 15:35 1405 Web/ Misc/ Tools

一、背景介紹

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：

四、參考鏈接

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 mui框架移動開發初體驗華為鴻蒙系統開發初體驗 Android in Mono開發初體驗之DataBase Android in Mono開發初體驗之ListAdapter MEF 插件式開發之 DotNetCore 初體驗使用Python開發鴻蒙設備程序（0-初體驗） Taro開發微信小程序的初體驗 Blazor（一）：運行初體驗，全新的.net web的開發 QT程序員搬到macOS平台的開發初體驗 Windows 8開發初體驗 - C#版菜譜