【Safari Web Extension】Mac用プロジェクトをmac/iOS 両方対応させる! iPhoneでも safari拡張機能

Mac

開発についてはこちら!

【iOS/macOS対応】Safari Web ExtensionでWebページのフォーム操作を自動化する開発手順
ルーター設定画面を1クリックでやりたいなと思い。これだけではMacしか使えないので次の記事でiPhone対応しますSafari Web Extensionを使ってローカルページのフォーム操作を行う拡張機能を開発し、...

Safari Web Extension(Manifest v3)の開発において、「Mac向けテンプレートから作成したプロジェクトを iOS(iPhone)対応させる際につまずきやすいポイント」

mac では動いたけど両方に対応させるには?と考えましたが。

拡張機能の safari web extensionは
プロジェクト内のTARGET

  • アプリ
  • 拡張機能

の2つで構成されています。

プロジェクトの + ターゲット追加で
i0S > Safari Extension App

追加で、4ターゲットがiOSに追加されます。

こんな感じで4つずつ上がmac用 下がiPhone(iOS)用です

アプリは変更せず、extensionを

Extensionは共通化する

Extensionの方はInfo以外削除します。

mac 版のExtensionの _locals, imagesフォルダとすべてinfo以外のtarget membershipにiOS用のextensionを追加します!

これでOK rakutenExchangeiOSをターゲットにビルドするとiPhoneで実行できます!

iPhoneで safari 拡張機能 確認

アプリ起動画面

safariで対象URLを開きます!urlの直前のアイコンをタップするとこんな感じで拡張機能を確認できて

対象をタップするとpopup.htmlが開けます。

Screenshot

切り替えでちゃんと更新できました!◎

楽天モバイルを運用しているルーターの設定変更を簡単に?できるようになりました。。。
タップ数は? 4 > 2 になったくらいです^^

お気軽にコメントください!

スパム対応のためコメント認証に数日かかることがありますが、お気軽にコメントいただけると嬉しいです^^

コメント

タイトルとURLをコピーしました