<h1 id="summary">
<a class="header-anchor-link" href="#summary" aria-hidden="true"></a> Summary</h1>
<p>iOSでもiPad OSでも使えるようになった <a href="https://developer.apple.com/safari/extensions/" target="_blank" rel="nofollow noopener noreferrer">Safari Extensions</a>に入門してみましょう。</p>
<h2 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<ul>
<li>macOS Monterey 12.3.1 (21E258)</li>
<li>Xcode 13.3</li>
</ul>
<h1 id="1.-%E6%BA%96%E5%82%99%E7%B7%A8">
<a class="header-anchor-link" href="#1.-%E6%BA%96%E5%82%99%E7%B7%A8" aria-hidden="true"></a> 1. 準備編</h1>
<h2 id="1.1-xcode%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#1.1-xcode%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86" aria-hidden="true"></a> 1.1 Xcodeプロジェクトを作ってみよう</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>作業</th>
<th>スクリーンショット</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Xcodeを起動し、<code>Create New Xcode Project</code> を押下します</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/806df16f2433-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>2</td>
<td>
<code>Choose a template for your new project</code> 画面で <code>Multiplatforms</code> を選択し、<code>Application</code> → <code>Safari Extension App</code>を選択してください。</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/2d546120680c-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>3</td>
<td>
<code>Product Name</code> や <code>Bundle Identifier</code>をいい感じに入力</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/74590ea6df94-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>4</td>
<td>任意の箇所にプロジェクトファイルを保存</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/72508b73ea17-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>5</td>
<td>プロジェクトが完成</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/11d6b68e810e-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h2 id="1.2-%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%80%81safari-extension%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%97%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#1.2-%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%80%81safari-extension%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%97%E3%82%88%E3%81%86" aria-hidden="true"></a> 1.2 シミュレーターで実行して、Safari Extensionを許可しよう</h2>
<p>とりあえずここまで作ったXcodeプロジェクトを実行し、アプリのExtensionを許可しましょう</p>
<table>
<thead>
<tr>
<th>No</th>
<th>作業</th>
<th>スクリーンショット</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Xcodeの再生ボタンを押してシミュレーター向けにアプリをビルドします</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/d38858064a4a-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>2</td>
<td>シミュレータが起動したことを確認します</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/e8a87bdc6f0a-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>3</td>
<td>ホーム画面を表示します</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/ce4ca017317e-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>4</td>
<td>iOSの標準設定を開きます</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/5f17e904a22f-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>5</td>
<td>画面をスクロールし、Safari項目をタップします</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/41ad9b2ab78d-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>6</td>
<td>更に画面内をスクロールし、機能拡張をタップします</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/6c67b74e665d-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>7</td>
<td>先程作ったアプリが表示されているので、そのアプリをタップします</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/ee76a1b75f5e-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>8</td>
<td>一番上のSwitchをOnにし、戻るを押下します</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/e762c693e481-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>9</td>
<td>拡張機能がOnになっていることを確認します。</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/fe6c45344819-20220503.png" alt width="300" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<p>これで拡張機能を有効にすることができました。</p>
<h1 id="2.-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#2.-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86" aria-hidden="true"></a> 2. サイトにアクセスしてみよう</h1>
<p>では、拡張機能を有効にしたシミュレータのSafariを利用して下記サイトにアクセスしてみてください</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b3ffbf4d5e50a" src="https://embed.zenn.studio/card#zenn-embedded__b3ffbf4d5e50a" data-content="https%3A%2F%2Fh1d3mun3.github.io%2Fh1d3mun3-safari-extension%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://h1d3mun3.github.io/h1d3mun3-safari-extension/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://h1d3mun3.github.io/h1d3mun3-safari-extension/</a></p>
<p>おそらく下記のように表示されるはず。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/4e8956bfb417-20220503.png" alt width="300" loading="lazy" class="md-img"></p>
<h1 id="3.-div%E8%A6%81%E7%B4%A0%E3%82%92%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%80%82">
<a class="header-anchor-link" href="#3.-div%E8%A6%81%E7%B4%A0%E3%82%92%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%80%82" aria-hidden="true"></a> 3. Div要素をブロックしてみよう。</h1>
<p>上記でアクセスしたサイトは下記のようなソースコードになっています。</p>
<div class="code-block-container"><pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Safari Extensions Practice<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>My first paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WillHidden<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is presenting! :p <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>idが <code>WillHidden</code>と指定されている要素を隠してみましょう。</p>
<h2 id="3.1-safari-extension%E3%81%A7%E4%B8%8A%E8%A8%98%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%AF%BE%E8%B1%A1%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#3.1-safari-extension%E3%81%A7%E4%B8%8A%E8%A8%98%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%AF%BE%E8%B1%A1%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86" aria-hidden="true"></a> 3.1 Safari Extensionで上記のサイトを対象にしてみよう</h2>
<p>ManifestJsonファイルのcontent_scriptsを下記のように書き換えてみましょう</p>
<p>↓修正前</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">    <span class="token property">"content_scripts"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        <span class="token property">"js"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"content.js"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token property">"matches"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"*://example.com/*"</span> <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre></div><p>↓ 修正後</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">    <span class="token property">"content_scripts"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        <span class="token property">"js"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"content.js"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token property">"matches"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"*://h1d3mun3.github.io/*"</span> <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="3.2-div%E3%81%AEvisible%E3%82%92%E9%9A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%80%82">
<a class="header-anchor-link" href="#3.2-div%E3%81%AEvisible%E3%82%92%E9%9A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%80%82" aria-hidden="true"></a> 3.2 DivのVisibleを隠してみよう。</h2>
<p>content.jsファイルを下記のように書き換えてみましょう</p>
<p>修正前</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">browser.runtime.sendMessage(<span class="token punctuation">{</span> greeting<span class="token operator">:</span> <span class="token string">"hello"</span> <span class="token punctuation">}</span>).then((response) =&gt; <span class="token punctuation">{</span>
    console.log(<span class="token string">"Received response: "</span><span class="token punctuation">,</span> response);
<span class="token punctuation">}</span>);

browser.runtime.onMessage.addListener((request<span class="token punctuation">,</span> sender<span class="token punctuation">,</span> sendResponse) =&gt; <span class="token punctuation">{</span>
    console.log(<span class="token string">"Received request: "</span><span class="token punctuation">,</span> request);
<span class="token punctuation">}</span>);
</code></pre></div><p>↓ 修正後</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">const element = document.getElementById('WillHidden');
element.remove();
</code></pre></div><h2 id="3.3-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%A6%E3%80%81safari%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%97%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#3.3-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%A6%E3%80%81safari%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%97%E3%82%88%E3%81%86" aria-hidden="true"></a> 3.3 アプリをビルドして、Safariでページへのアクセスを許可しよう</h2>
<p>下記手順で作業します。</p>
<table>
<thead>
<tr>
<th>No</th>
<th>作業</th>
<th>スクリーンショット</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>シミュレータにアプリをインストールした状態で、先程のサイトにアクセスし、画面下のひらがなボタンを押下し、画面上部のアプリ名を押下します</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/9378261df6f5-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>2</td>
<td>アクセスを許可しますか？とダイアログが出るので、常に許可を押す</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/c75af2c87f6c-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
<tr>
<td>3</td>
<td>パラグラフが消えていることを確認する</td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/d4243a275b82-20220503.png" alt loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<p>※ <s>スクリーンショットの用意が準備がめんどくさい</s> 素材用意の都合ですでに許可された場合のスクリーンショットしか乗っていませんが、作業手順としては同一です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__39ececdb8266" src="https://embed.zenn.studio/card#zenn-embedded__39ececdb8266" data-content="https%3A%2F%2Fh1d3mun3.github.io%2Fh1d3mun3-safari-extension%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://h1d3mun3.github.io/h1d3mun3-safari-extension/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://h1d3mun3.github.io/h1d3mun3-safari-extension/</a></p>
<h1 id="4.-%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#4.-%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 4. 終わりに</h1>
<p>Nativeの知識は殆ど必要なく、JavaScriptの知識があればSafariのWebページ内部に表示されるコンテンツを用意に制御できることがわかりました。<br>
また、この拡張機能はMozillaのBrowser Extensionsとほぼ同じなため、すでに拡張機能を作成している場合は、Safariでも同様の機能を提供できる可能性が高いことも良い点だと思います。</p>
<p>また、同じAppleプラットフォームであれば macOS , iOS, iPadOSとすべてのプラットフォームで共用できるのも良いポイントと言えると思います。</p>
<h1 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 参考にしたサイト</h1>
<ul>
<li><a href="https://developer.apple.com/documentation/safariservices/safari_web_extensions/creating_a_safari_web_extension" target="_blank" rel="nofollow noopener noreferrer">Creating a Safari Web Extension</a></li>
</ul>


Safari Extensions に入門してみよう！ 

1.1 Xcodeプロジェクトを作ってみよう

1.2 シミュレーターで実行して、Safari Extensionを許可しよう

2. サイトにアクセスしてみよう

3.1 Safari Extensionで上記のサイトを対象にしてみよう

3.2 DivのVisibleを隠してみよう。

3.3 アプリをビルドして、Safariでページへのアクセスを許可しよう

3. Div要素をブロックしてみよう。

Discussion