ShortcutsによるiOSのSafari向けブラウザ拡張機能作成

概要

iOSでもBookmarkletによってSafariで閲覧中のページのDOMなどにアクセス可能なことはよく知られていますが、Shortcutsでも似たようなことが可能ですので、Bookmarkketと比較した場合のメリット・デメリットと併せて、簡単なサンプルを紹介します。

Bookmarkletとの比較

メリット

• 外部アプリとの連携が可能
  • JavaScriptの実行だけに留まらず、Shortcutsに対応している様々なアプリケーションとの連携が可能です
• 配布が容易
  • 共有リンクなどを利用して、作成したShortcutを他のユーザに配布することが出来ます
• Safariの共有メニューから実行可能
  • Bookmarkの一覧からではなく、一般的なアプリと同様に共有メニューから選択して実行することが出来ます
• Safariだけでなく、TwitterやDiscordなどの内蔵ブラウザ(WebView?)からでも実行可能

デメリット

• Shortcutsアプリのインストールが必要
• 閲覧中のページ内JSで定義された変数へアクセスできない？
  （DOMへのアクセスは可能ですが、ページ内のJSとは別のスコープで実行されているのかも知れません）

※ 適宜追記します

準備

• Shortcutsアプリをインストールしていない場合はAppStoreからインストールする。
• 自身が作成したShortcut以外を実行する場合は、信用されていないShortcutの実行を事前に許可する

実践

Safariで閲覧中のWebページのタイトルとURLをTwitterへ投稿するShortcutを作成してみます。

1. Shortcutsアプリを開き右上の「＋」をタップ

2. 右上の「…」をタップ 3. 「Show in Share Sheet」をタップし、ブラウザの共有メニューから実行可能にする 4. 「Share Sheet Type」から「Safari web pages」のみを選択して、右上の「Done」をタップ

5. [＋ Add Action]をタップし、「Run JavaScript on Web Page」を選択

6. 「Web Page」をタップし、「Shortcut Input」を選択

7. 実行するJavaScriptの内容を編集

let result = {};
result.title = document.title;
result.href = document.location.href;
completion(result);

1. 「＋」をタップして「Twitter」を選択

9. 「Tweet」を選択

10.ツイート時の本文を編集して「Next」をタップ

1. 作成したShortcutのタイトルを設定して「Done」をタップ

12. My Shortcutsの一覧に保存されたことを確認する 13. Safariで任意のページを開き、共有ボタンをタップし、作成したShortcutを選択

1. 初回実行時にページへのアクセス許可を求められるので許可する

1. 閲覧中ページのタイトルとURLが入力された状態のツイート画面に遷移する

まとめ

• ShortcutsアプリからでもBookmarkletの様に、閲覧中のWebページに対してJavaScriptの実行が可能
• 外部のアプリケーションと連携したブラウザ拡張機能を、iOS端末単体で作成可能