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

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

## Bookmarkletとの比較

### メリット

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

### デメリット

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

<font color="#f00">※ 適宜追記します</font>

## 準備

- Shortcutsアプリをインストールしていない場合はAppStoreから[インストール](https://apps.apple.com/jp/app/shortcuts/id1462947752)する。
- 自身が作成したShortcut以外を実行する場合は、信用されていないShortcutの実行を事前に許可する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/291ffb5c-0213-365f-7fcd-19f813f9560c.png" alt="IMG_0738.PNG" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/4d3d2b0d-eacb-6b45-7128-daf30c52df3a.png" alt="IMG_0739.PNG" width=320>

## 実践

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/c32db02f-1c81-d77b-7931-c611616bcd99.png" alt="image.png" width=320>
2. 右上の「…」をタップ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/5d5bdb2d-e4ce-0f56-2b4a-a4a2b3560db5.png" width=320>
3. 「Show in Share Sheet」をタップし、ブラウザの共有メニューから実行可能にする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/cee9715d-352e-4381-9d24-7c50fa2f7cc7.png" width=320>
4. 「Share Sheet Type」から「Safari web pages」のみを選択して、右上の「Done」をタップ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/78951d4b-ac16-4c98-53e7-32747f81510d.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/cacffbb8-eef1-c831-3657-53b6e6ab54b8.png" width=320>
5. [＋ Add Action]をタップし、「Run JavaScript on Web Page」を選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/47c19016-5493-1ced-2c21-ef458946dee1.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/f8e8c882-0b2f-d2d6-15fe-166a741b9853.png" width=320>
6. 「Web Page」をタップし、「Shortcut Input」を選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/a532e7cf-bb10-dbf6-6f66-c7341101c5ea.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/c43423c2-5a3a-11b1-800e-6a59e8848dec.png" width=320>
7. 実行するJavaScriptの内容を編集

```js
let result = {};
result.title = document.title;
result.href = document.location.href;
completion(result);
```
8. 「＋」をタップして「Twitter」を選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/28d5adcc-a365-1345-033e-b016cf0c0368.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/dff1b81a-53d9-aa4a-7554-176d71b7e613.png" width=320>
9. 「Tweet」を選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/c8bdd760-40dd-a068-dea5-4d62cac3dab2.png" width=320>
10.ツイート時の本文を編集して「Next」をタップ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/e47a7e15-5395-56a2-7425-59ece302a5b4.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/124ea65f-632f-fb05-9f9b-5691c110b9f8.png" width=320>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/45eda71f-833e-06ba-a6da-2e86f27ae19a.png" width=320>
12. My Shortcutsの一覧に保存されたことを確認する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/22556af5-0edd-435f-6d9c-184a48606c81.png" width=320>
13. Safariで任意のページを開き、共有ボタンをタップし、作成したShortcutを選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/3dbe1cf1-56eb-9cf5-3e50-ec42c1dca3ba.png" width=320><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/b279c3fb-4783-311d-7f2e-12846e34c728.png" width=320>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/dee38a34-a94c-80e1-7933-c0690cafaba3.png" width=320>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4525/29c2a6e9-effc-f1f1-5eaa-b17a4087a925.png" width=320>

## まとめ

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