【WIP】Chromeの拡張機能をSafari用に変換してApp Storeに公開した時にしたこと

Naoki Machida

Keywords

Contents

  • 1. webpackでjs生成
  • 2. 既に作成されているプロジェクトを削除
  • 3. safari用に変換
  • 4. xcodeで設定したこと
  • 4-1. Category Typeの選択
  • 4-2. 画像
  • 4-3. 2つのTargetsのVersionとBuild
  • 5. distribute
  • 6. iOS用に配信した際の注意点
  • 6-1. code signの問題
  • 6-2. persistent: false問題
  • 6-3. development teamの問題
  • 7. 参照URL

webpackでjs生成

Vue.jsを使用して、拡張機能を開発したので、webpackコマンドでjsを吐き出します。

$ webpack

既に作成されているプロジェクトを削除

この手順は、xcrun safari-web-extension-converter~を既にしてsafari用プロジェクトを作成している人向けです。

$ cd ..
$ rm -rf Lirial

safari用に変換

$ xcrun safari-web-extension-converter addon
$ ls Lirial
Lirial			Lirial Extension	Lirial.xcodeproj

※当初$ xcrun safari-web-extension-converter ./のように、プロジェクトを作成していましたが、この方法だとエラーが発生してしまいました。
※safari-web-extension-converterが存在しないエラーが出たので、パスに追加しました。私の場合は、~/.zshrcに export PATH="/Applications/Xcode.app/Contents/Developer/usr/bin:$PATH"を追加しました。

xcodeで設定したこと

Category Typeの選択

Utilityを選択しました。

画像

Assets.xcassetsをクリックして、既存のAppIconを削除しました。

次に、https://appicon.coでアイコンを作成、ダウンロードしたzipファイルの中にある、AppIcon.appiconsetフォルダをAppIconがあった箇所にドラッグ&ドロップしました。

2つのTargetsのVersionとBuild

LirialとLirial Extensionの2つに対して、それぞれ同じVersionとBuildを記入しました。

distribute

provisioning profileを設定して、distribute

iOS用に配信した際の注意点

code signの問題

[Validate App]をした際に、node_modules内のファイルでcode signがうまく出来ていないというエラーが発生しました。公式やこちらなどを参考に色々試してみても、一向にうまくいきませんでした。ただそもそもの話として、devDependenciesのライブラリもインストールしてしまっており、$ npm install --prodで最低限のファイルのみでbuildすればこの問題は解消しました。

persistent: false問題

manifest.jsonでpersistent: falseを追加しないと下記のエラーが発生してしましました。

このようにすれば治ります。

"background": {
    "persistent": false,
    "scripts": ["background.js"]
  },

development teamの問題

development teamの設定をする必要があるというエラーが発生しました。

ただ下記のように、しかしエラーメッセージの通り設定してもエラーが出続けました。

Build SettingsのDevelopment TeamのReleaseを設定する必要がありました。

参照URL