소개

Photoshop CC 2015부터 Adobe 정책에서 ExtensionManager가 더 이상 지원되지 않으므로 설치가 귀찮습니다.
공식적으로 Adobe Add-ons를 권장했지만 제대로 작동하지 않고 포기했습니다.
(설치 버튼을 눌러도 왜 설치되지 않습니다 ...)

그래서 Electron 의 공부가 굳이 인스톨러를 만들어 보기로 한다.

절차

앱 아래 준비

Electron의 병아리 앱을 만듭니다.

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install

적당한 장소에 설치하고 싶은 zxp를 둔다.

.
├── LICENSE.md
├── README.md
│
│ # こんな感じにエクステンションを設置する。
├── extension
│   └── extension.zxp 
│
├── index.html
├── main.js
├── node_modules
├── package.json
└── renderer.js

Adobe에서 설치용 도구을 얻을 수 있습니다.
적당한 장소에 공구를 둔다.

.
├── LICENSE.md
├── README.md
│
│ # こんな感じで設置する。
├── bin
│   ├── mac # Mac用
│   │   └── Contents
│   └── win # Win用
│       ├── ExManBridgeTalkCmd.exe
│       ├── ExManCmd.exe
│       ├── ExManCoreLib.dll
│       ├── ExManCoreLib.lib
│       ├── ExManEscalatedPrivilegeServer.exe
│       ├── ExManZxpSign.dll
│       ├── IMSLib.dll
│       ├── VulcanMessage4.dll
│       ├── XManConfig.xml
│       ├── adobe_caps.dll
│       ├── libeay32.dll
│       └── ssleay32.dll
│
├── extensions
│   └── extension.zxp
├── index.html
├── main.js
├── node_modules
├── package.json
└── renderer.js

처리 구현

설치를 위한 처리를 추가한다.

index.html

<!-- インストールボタンを設置する -->
<button type="button" onclick="window.install()">インストール</button>

renderer.js

const {ipcRenderer} = require('electron');

window.install = function () {
  // インストール処理の開始（メインプロセスに投げる）
  ipcRenderer.send('install');
}

ipcRenderer.on('installed', () => {
  window.alert('インストール成功');
});

ipcRenderer.on('installfailed', () => {
  window.alert('インストール失敗');
});

main.js

const path = require('path');
const {ipcMain} = require('electron');

// 環境ごとのコマンド情報
function cmd () {
  var path;
  switch (process.platform) {
    case 'darwin':
      path = './bin/mac/Contents/MacOS/ExManCmd';
      break;
    case 'win32':
    case 'win64':
      path = './bin/win/ExManCmd.exe';
      break;
  }
  return path;
}

// インストール実行処理
function install (zxpPath, callback, errorCallback) {

  var cmdPrefix = (process.platform == 'darwin') ? '--' : '/';

  var spawn = require('child_process').spawn(
    path.join(__dirname, cmd()), [cmdPrefix + 'install', zxpPath]
  );

  spawn.on('exit',function(code){
    if (code == 0) {
      callback && callback();
    } else {
      errorCallback && errorCallback(code);
    }
  });
}

ipcMain.on('install', (e, args) => {
  install(
    __dirname + '/extension/extension.zxp',
    () => {
      e.sender.send('installed');
    },
    (code) => {
      e.sender.send('installfailed', code);
    }
  );
});

앱화

Electron Packager 설치

npm install electron-packager -g

Electron Packager로 앱화

# electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<version>
electron-packager . extension --platform=darwin,win32 --arch=x64 --version=1.2.2

확인

앱을 시작하고 "설치"버튼을 클릭하면 확장이 설치됩니다.
기능으로서는 동작하고 있지만, 살 풍경이므로 Web 기술 사용해 페이지를 장식해 주면 좋다.