🌐
Safari Extensions に入門してみよう！
Summary
iOSでもiPad OSでも使えるようになった Safari Extensionsに入門してみましょう。
環境
- macOS Monterey 12.3.1 (21E258)
- Xcode 13.3
1. 準備編
1.1 Xcodeプロジェクトを作ってみよう
| No | 作業 | スクリーンショット |
|---|---|---|
| 1 | Xcodeを起動し、Create New Xcode Project を押下します |
 |
| 2 |
Choose a template for your new project 画面で Multiplatforms を選択し、Application → Safari Extension Appを選択してください。 |
 |
| 3 |
Product Name や Bundle Identifierをいい感じに入力 |
 |
| 4 | 任意の箇所にプロジェクトファイルを保存 |  |
| 5 | プロジェクトが完成 |  |
1.2 シミュレーターで実行して、Safari Extensionを許可しよう
とりあえずここまで作ったXcodeプロジェクトを実行し、アプリのExtensionを許可しましょう
| No | 作業 | スクリーンショット |
|---|---|---|
| 1 | Xcodeの再生ボタンを押してシミュレーター向けにアプリをビルドします |  |
| 2 | シミュレータが起動したことを確認します |  |
| 3 | ホーム画面を表示します |  |
| 4 | iOSの標準設定を開きます |  |
| 5 | 画面をスクロールし、Safari項目をタップします |  |
| 6 | 更に画面内をスクロールし、機能拡張をタップします |  |
| 7 | 先程作ったアプリが表示されているので、そのアプリをタップします |  |
| 8 | 一番上のSwitchをOnにし、戻るを押下します |  |
| 9 | 拡張機能がOnになっていることを確認します。 |  |
これで拡張機能を有効にすることができました。
2. サイトにアクセスしてみよう
では、拡張機能を有効にしたシミュレータのSafariを利用して下記サイトにアクセスしてみてください
おそらく下記のように表示されるはず。
3. Div要素をブロックしてみよう。
上記でアクセスしたサイトは下記のようなソースコードになっています。
<!DOCTYPE html>
<html>
<body>
<h1>Safari Extensions Practice</h1>
<p>My first paragraph.</p>
<p id="WillHidden">This is presenting! :p </p>
</body>
</html>
idが WillHiddenと指定されている要素を隠してみましょう。
3.1 Safari Extensionで上記のサイトを対象にしてみよう
ManifestJsonファイルのcontent_scriptsを下記のように書き換えてみましょう
↓修正前
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "*://example.com/*" ]
}],
↓ 修正後
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "*://h1d3mun3.github.io/*" ]
}],
3.2 DivのVisibleを隠してみよう。
content.jsファイルを下記のように書き換えてみましょう
修正前
browser.runtime.sendMessage({ greeting: "hello" }).then((response) => {
console.log("Received response: ", response);
});
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log("Received request: ", request);
});
↓ 修正後
const element = document.getElementById('WillHidden');
element.remove();
3.3 アプリをビルドして、Safariでページへのアクセスを許可しよう
下記手順で作業します。
| No | 作業 | スクリーンショット |
|---|---|---|
| 1 | シミュレータにアプリをインストールした状態で、先程のサイトにアクセスし、画面下のひらがなボタンを押下し、画面上部のアプリ名を押下します |  |
| 2 | アクセスを許可しますか？とダイアログが出るので、常に許可を押す |  |
| 3 | パラグラフが消えていることを確認する |  |
※ スクリーンショットの用意が準備がめんどくさい 素材用意の都合ですでに許可された場合のスクリーンショットしか乗っていませんが、作業手順としては同一です。
4. 終わりに
Nativeの知識は殆ど必要なく、JavaScriptの知識があればSafariのWebページ内部に表示されるコンテンツを用意に制御できることがわかりました。
また、この拡張機能はMozillaのBrowser Extensionsとほぼ同じなため、すでに拡張機能を作成している場合は、Safariでも同様の機能を提供できる可能性が高いことも良い点だと思います。
また、同じAppleプラットフォームであれば macOS , iOS, iPadOSとすべてのプラットフォームで共用できるのも良いポイントと言えると思います。
Discussion