Tutorial gráfico da primeira experiência de desenvolvimento da extensão Adobe Html5

A Adobe produz uma ampla gama de linhas de produtos de software de processamento multimídia, abrangendo edição de áudio e vídeo, processamento de imagens, design gráfico, pós-produção de filmes e televisão e outras áreas. Para ampliar as funções do software, a Adobe oferece aos desenvolvedores duas maneiras de aumentar as funções do software: plug-ins e extensões. No ano passado, dois plug-ins Premiere foram desenvolvidos usando o SDK fornecido oficialmente, que foi usado para importar arquivos multimídia em formatos personalizados e visualizar streams de vídeo. Recentemente experimentei o desenvolvimento da Adobe Extension.

O plug-in Adobe geralmente é usado para fornecer funções mais próximas do nível subjacente. Por razões de eficiência, o plug-in SDK oficial fornecido é baseado na linguagem C++. A extensão Adobe tende a fornecer extensões para aplicativos de camada superior, que foram implementados na forma de Flash na era Adobe CS.

Na era Adobe CC, foi fornecida a implementação de HTML5, que permitiu aos desenvolvedores fazer interface com HTML5, CSS3, Javascript e até mesmo NodeJS para desenvolvimento. Como a Adobe incorporou o CEF no Premiere Pro, ela pode analisar e renderizar HTML5 com eficiência e executar programas Nodejs. Nodejs pode realizar chamadas de funções do sistema, o que não é muito fácil! Neste artigo, resumirei aproximadamente a jornada de uso do HTML5 para desenvolver uma extensão da Adobe. A extensão que queremos fazer é muito simples, conforme mostra a figura abaixo:

Esta é uma extensão PremierePro desenvolvida por Pond5, um conhecido site de comércio de material de vídeo estrangeiro. Ela permite aos usuários fazer login no site no Pro, baixar materiais de visualização, comprar materiais de alta definição, importar vídeos automaticamente ou substituir vídeos automaticamente. Isso elimina a necessidade dos usuários abrirem um navegador para fazer login no site, o que melhora muito a experiência do usuário. Plug-ins semelhantes são desenvolvidos pela shutterstock:

A Adobe lançou oficialmente um IDE para desenvolver a extensão Adobe Html5 baseada no Eclipse. Portanto, primeiro configuramos o ambiente de desenvolvimento de acordo com o seguinte processo:

Baixe o Eclipse, de preferência versão 3.6 ou superior, e o Extension Builder

Instale o Adobe Premiere Pro CC 2014/2015 Configure o aplicativo de destino e o Service Manager do elicpse.

Ative o modo de depuração: adicione o campo 'PlayerDebugMode' no registro

A configuração está completa e agora você pode usar o Eclipse para gerar o projeto de modelo de extensão. O projeto modelo gerado é muito simples, com apenas um botão padrão no painel:

No desenvolvimento da extensão Adobe Html5, o arquivo mais importante é manifest.xml. Este arquivo descreve as informações básicas desta extensão para que o programa host da Adobe possa reconhecê-la e carregá-la normalmente. Seu conteúdo geral é o seguinte:

Entre eles, BundleName, BundleId e BundleVersion são determinados pelo desenvolvedor, geralmente com base na iteração normal da versão. O mais importante é o conteúdo das duas tags HostList e RequiredRuntimeList. O HostList determina quais programas host esta extensão suporta (como PremierePro, After Effects, etc.). O código a seguir indica que vários programas host podem ser carregados:

Somente o Photoshop Extended é suportado aqui, e seu ID de host corresponde a PHXS. Os IDs de host e as versões de outros programas host são os seguintes:

Observe que Versão usa colchetes [14.0, 14.9], o que indica que esta extensão oferece suporte às versões 14.0-14.9 do Photoshop Extended. Versões do Photoshop Extended superiores a esta ou inferiores a esta versão não carregarão esta extensão. No entanto, e se você quiser especificar que todas as versões acima de uma determinada versão são suportadas? Por exemplo, se você deseja oferecer suporte ao PremierePro CC 2014 ou superior, como especificar esta versão? Basta escrever o número de versão mais baixo:

Além disso, existe o rótulo RequiredRuntimeList. Esta tag especifica a versão CEP do tempo de execução. O chamado CEP é a abreviatura de Common Extensibility Platform. Ele fornece um conjunto de serviços básicos para facilitar aos desenvolvedores a execução de código Extendscript, detectar as variáveis ​​​​de ambiente do programa host e processar eventos enviados entre a extensão e o host. Anteriormente, esse conjunto de serviços era chamado de Creative Suite Extensible Services ou, abreviadamente, CSXS. Portanto, a abreviatura CSXS ainda pode ser vista em alguns arquivos de configuração. A versão inicial do CEP era 4.x e se desenvolveu em 5 versões principais até agora. A versão mais recente é 8.x, que oferece suporte ao programa host Adobe CC 2018 mais recente.

Conforme mostrado acima, se quisermos oferecer suporte à versão CC de primeira geração do programa host, a versão de RequiredRuntime deve ser definida como 4.0. Caso contrário, a extensão não poderá ser carregada normalmente. Além disso, se desejar acessar o sistema de arquivos na extensão, você deverá especificar parâmetros adicionais:

Quando desenvolvemos, precisamos ajustar o código de extensão a qualquer momento. O programa host da Adobe ignora extensões não assinadas e não as carrega. Portanto, precisamos ativar o modo de depuração para não precisarmos assinar a extensão durante o desenvolvimento:

Em um Mac, abra o arquivo ~/Library/Preferences/com.adobe.CSXS.6.plist e adicione uma linha com o nome da chave PlayerDebugMode, digite String e valor definido como 1. No Windows, abra a chave de registro: HKEY_CURRENT_USER /Software/Adobe/CSXS.6, adicione um par de valores-chave chamado PlayerDebugMode, tipo String, valor 1.

Nota: Se a versão do programa host for diferente, os arquivos correspondentes também poderão ser diferentes. Por exemplo, no CC2017, você precisa alterar a parte correspondente acima para CSXS.7

A ferramenta de depuração do Chrome ajuda a observar a saída da extensão e a explorar a estrutura DOM da extensão, o que é muito útil para depuração. Habilitar a ferramenta de depuração do Chrome também é muito simples. Crie um arquivo chamado .debug no diretório raiz da pasta de extensão e escreva o seguinte conteúdo:

Esta lista ilustra as diferentes portas usadas ao depurar diferentes programas host. Tomando Pond5 como exemplo, o conteúdo de seu arquivo .debug é o seguinte:

Ao especificar a extensão de depuração do Premiere, a porta é 8089. Conforme mostrado abaixo:

Durante o desenvolvimento, pode ser necessário desabilitar o CEF de armazenar conteúdo da web em cache. Você pode excluir manualmente diretamente a pasta correspondente à extensão no seguinte local:

Windows: C:/Users/NOME DE USUÁRIO/AppData/Local/Temp/cep_cache/Mac: /Users/NOME DE USUÁRIO/Library/Logs/CSXS/cep_cache

Claro, alguns desenvolvedores da Adobe também dizem para especificar o parâmetro CEF <Parameter>--disable-application-cache</Parameter> para desabilitar o cache CEF, mas parece não funcionar depois que tentei. Pasta de extensão A extensão é armazenada em dois locais, em todo o sistema e no pessoal do usuário. Se você instalar a extensão em todo o sistema, o arquivo de extensão será armazenado no seguinte local: No Mac,:/Library/Application Support/Adobe/CEP/extensionsNo Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/extensões

Desta forma, todos os usuários do sistema atual poderão carregar esta Extensão. Também pode ser instalado apenas para o usuário atual e sua localização é a seguinte:

No Mac: ~/Library/Application Support/Adobe/CEP/extensionsNo Windows: C://AppData/Roaming/Adobe/CEP/extensions Pacote de assinatura

Ao publicar uma extensão, todo o pacote precisa ser assinado. Você precisa usar a ferramenta ZXPSignCmd aqui, que pode ser baixada do site oficial. Primeiro, para assinar precisamos de um certificado digital. Podemos adquirir este certificado de uma agência emissora de certificados terceirizada, o que requer uma certa quantia de financiamento. Você também pode criar um certificado autoassinado para assinar a extensão. Vamos passar pelo processo da última maneira:

Isso irá gerar um certificado autoassinado no diretório atual e então poderemos usar este certificado para assinar o pacote:

Quando a ferramenta ZXPSignCmd assinar, ela gerará um arquivo META-INF no diretório de extensão, que armazena as informações da assinatura. Em seguida, a ferramenta irá empacotar e compactar todo o diretório em um arquivo *.zxp. Este é o arquivo de expansão que precisamos publicar. ^_^

Análise de rotina do Pond5 e Shutterstock Ao analisar cuidadosamente a implementação do Pond5 e Shutterstock, podemos resumir a lógica geral de execução deste tipo de extensão:

(1) Abra o painel de extensão no programa host e encontre a extensão carregada através de Window-Extensions

(2) O script de extensão analisará se o usuário o está usando pela primeira vez. Se for a primeira vez, deixe o usuário selecionar o local onde o material de vídeo será salvo. Isso geralmente é feito por meio de uma caixa de diálogo pop-up. As informações de localização selecionadas pelo usuário geralmente persistem no diretório inicial do usuário por meio de um arquivo xml. Se o usuário não estiver usando a extensão pela primeira vez, o arquivo xml no diretório inicial será carregado e analisado diretamente.

(3) O usuário clica em determinado material de vídeo para iniciar o download. Esse processo geralmente pode ser alcançado por meio de nodejs. No entanto, a função de retorno de chamada de download deve ser configurada.

(4) Após o download ser bem-sucedido, execute a função de retorno de chamada e importe o arquivo de vídeo baixado para o programa host. Esta etapa é implementada chamando o script extendscript. Para escrita de script específica, consulte aqui. Referindo-se a esta rotina, implementamos Adobe Extension semelhante ao Pond5 e Shutterstock:

O texto acima é o tutorial gráfico para a primeira experiência de desenvolvimento da extensão Adobe Html5 apresentada pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!