【iOS/macOS対応】Safari Web ExtensionでWebページのフォーム操作を自動化する開発手順

ルーター設定画面を１クリックでやりたいなと思い。

これだけではMacしか使えないので次の記事でiPhone対応します

Safari Web Extensionを使ってローカルページのフォーム操作を行う拡張機能を開発し、実機で動かすまでの手順です。

iOS 15 / macOS Big Sur 以降、SafariではChromeやFirefoxと同じ WebExtensions API（Manifest v3） を使った拡張機能開発が公式サポートされています。

本記事では、Xcodeを使って 「ローカル環境（http://localhost 等）のフォームに自動入力する自作Safari拡張機能」 を作成し、実機でテストするまでの全手順を解説します。

概要・開発環境
STEP 1: Xcodeでプロジェクトを作成する
STEP 2: manifest.json の設定
STEP 3: フォーム操作ロジック（content.js）の実装
STEP 4: Mac safariでのビルド実行
まとめ
iOS iPhoneへの対応はこちら

概要・開発環境

開発環境: Xcode 15 以降 / Swift
対応OS: iOS 15+ / macOS 11+
使用技術: HTML / JavaScript / Manifest v3

STEP 1: Xcodeでプロジェクトを作成する

Xcode を起動し、Create a new Xcode project を選択します。
テンプレート選択画面で iOS（または Multiplatform）タブを開き、Safari App テンプレートを選択して Next をクリックします。
プロジェクト設定を入力します。
- Product Name: rakutenExchangeSetting（任意の名前）
- Language: Swift
- User Interface: SwiftUI（または Storyboard）
保存先を指定してプロジェクトを作成します。

ポイント
Safari App テンプレートを作成すると、メインアプリ用ターゲットと拡張機能用ターゲット（Extension）の2つが自動生成されます。

STEP 2: manifest.json の設定

拡張機能ターゲット配下にある Resources フォルダを開き、manifest.json を以下のように編集します。ローカル環境（localhost や 127.0.0.1）に対してスクリプトの実行を許可する設定を行います。JSON

{
    "manifest_version": 3,
    "default_locale": "en",

    "name": "__MSG_extension_name__",
    "description": "__MSG_extension_description__",
    "version": "1.0",
    
    
    "permissions": [
      "activeTab",
      "scripting"
    ],

    "host_permissions": [
      "http://192.168.0.1/*"
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"
      },
    
    "content_scripts": [
        {
            "matches": [
                "http://192.168.0.1/*"
            ],
            "js": ["content.js"]
        }
    ]

}

STEP 3: フォーム操作ロジック（content.js）の実装

同じく Resources フォルダ内にある content.js を編集します。指定したWebページが開いた際に自動実行されるJavaScript処理を記述します。JavaScript

// プロファイル切り替え ＆ 適用 ＆ ダイアログ自動承認処理
function toggleAndApplyProfile() {
  const selectElement = document.getElementById("profile");
  if (!selectElement) {
    alert("プロファイル選択（#profile）が見つかりません。");
    return;
  }

  // 1. プロファイル値の切り替え
  const currentValue = selectElement.value;
  let targetValue = currentValue === "rakuten" ? "rakuten2" : "rakuten";

  selectElement.value = targetValue;
  selectElement.dispatchEvent(new Event("change", { bubbles: true }));
  console.log("★ プロファイルを変更しました:", targetValue);

  // 2. 「適用」ボタンをクリック
  setTimeout(() => {
    const applyButton = document.querySelector('input[data-bind*="setDefaultAct"]');
    if (applyButton) {
      applyButton.click();
      console.log("★ 適用ボタンをクリックしました");

      // 3. 確認モーダルの「はい」ボタン（#yesbtn）が出現するまで待機して自動で押す
      clickYesButtonWhenReady(10); // 最大10回（約2秒間）試行
    } else {
      console.log("★ 適用ボタンが見つかりませんでした");
    }
  }, 200);
}

// 「はい」ボタンが出現するまで再帰的にチェックして押す関数
function clickYesButtonWhenReady(retryCount) {
  if (retryCount <= 0) {
    console.log("★ 確認モーダル（#yesbtn）の表示タイムアウト");
    return;
  }

  const yesButton = document.getElementById("yesbtn");

  // ボタンが存在し、画面上に出現（表示）しているか確認
  if (yesButton && yesButton.offsetWidth > 0 && yesButton.offsetHeight > 0) {
    yesButton.click();
    console.log("★ 「はい」ボタン（#yesbtn）を自動クリックしました！");
  } else {
    // まだ表示されていない場合は 200ms 後に再試行
    setTimeout(() => {
      clickYesButtonWhenReady(retryCount - 1);
    }, 200);
  }
}

拡張アイコンをタップしてボタンを表示してそれをクリックすると実行という形に
popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 180px;
      padding: 10px;
      font-family: sans-serif;
      text-align: center;
    }
    button {
      width: 100%;
      padding: 8px 12px;
      background-color: #007aff;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }
    button:active {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <button id="toggleBtn">プロファイル切り替え</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById("toggleBtn").addEventListener("click", async () => {
  // 現在開いているアクティブなタブを取得
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  if (tab && tab.id) {
    // コンテンツスクリプトに「切り替え実行」メッセージを送信
    chrome.tabs.sendMessage(tab.id, { action: "toggle_profile" });
  }
});