Safari Extensionの新機能

(音楽)

Safariチームの ブライアン･ワインスタインです Safari Extensionの 新機能を説明します Safari Extensionにより Safariの動作を拡張し Web閲覧効率を上げます 例えばスクリプトや スタイルシートの追加や コンテンツブロックなどです

今日のトピックは― Safari Extensionの配布方法 コンテンツブロッカーの動作が どう通知されるか ウインドウやタブ ページ管理のサポート Safari App Extensionの ポップアップの改善点 Safari Extensionと アプリケーションの連携の ベストプラクティスの紹介です

Safari Extensionは２種類 コンテンツブロッカーと

Safari App Extensionです どちらもXcodeでビルドした Mac Appに含まれます

拡張機能を含むアプリケーションを インストールすると Safariの環境設定に表示され 動作可能になります

公証サービスで検証後に Webサイトから アプリケーションを 配布することもできます 拡張機能を表示するには アプリケーションの起動が必要です 皆さんが作ったものは すばらしいですね そしてバグの報告や改善策を 寄せてくださったことに 心から感謝しています

要望が多かったのは コンテンツブロッカーが動作する時を 拡張機能が知る方法です

コンテンツブロッカーは リストを提供します ブロックや非表示にする コンテンツのルールのリストです Safariはコンテンツブロッカーが オンの時はリストを要求

閲覧中にコンテンツブロッカーが リソースをフラグ付けします

するとコンテンツブロッカーに関連した Safari App Extensionに Safariがそれを伝えます Safari App Extensionをオンにして 統計値を見ることや コンテンツブロッカーのみをオンにして プライベートな閲覧も可能 とても簡単です

まずInfo.plistファイル内で Safari App Extensionを コンテンツブロッカーと関連付けます Info.plistの NSExtensionセクションに エントリを追加して実行します キーはSFSafariAssociated ContentBlockersです

値は通知を受けたい コンテンツブロッカーの バンドルIDのアレイです 複数のコンテンツブロッカーの 通知を受けられます コンテンツブロッカーと Safari App Extensionは 同じContaining App内にある 必要があります

Info.plistを設定したら プリンシパルオブジェクトに デリゲートメソッドを実装 ContentBlocker(withIdentifierblocked ResourcesWith urls: on pageです

これらの通知はバッチ化され URLのみ通知されます Info.plistのWebサイト アクセスセクションで アクセスを許可したURLです

これだけです

次はウインドウやタブ ページ管理の改善点について これも強い要望があった― ページが移動する時に それを通知するAPIです コンテンツブロッカーの 通知と合わせると 今後の通知が新しいページの ロードだと分かります

これも強い要望があった― ページが移動する時に それを通知するAPIです コンテンツブロッカーの 通知と合わせると 今後の通知が新しいページの ロードだと分かります これを利用し ページのロードから リダイレクトチェーンを たどることもできます サイトの特定のバージョンに リダイレクトするか URLパラメータを見て拡張機能が UIをユーザに見せたかを判断します メソッドはプリンシパルオブジェクトで 呼ばれます 拡張機能がターゲットURLに アクセスできなくてもです その時URLはnilになります お気に入りや履歴を開いた場合も URLはnilになります

サンプルで 新しいAPIを使いましょう

以前 Safari App Extensionを 紹介した時 “bear”をクマの絵文字に 置換する拡張機能を作りました 今日は ネット上でクマの生活を 便利にします “honey”をURLに含む全画像を ブロックし― お菓子の誘惑を絶つ コンテンツブロッカーを作りました これをSafari App Extensionと 関連付けます まずSafari App Extensionの Info.plistを開きます SF Safari associated Content Blockersを― NSExtensionセクションに追加します XMLビューアを開き ソースコードを貼り付けます

plistビューアに戻ります

新しいコンテンツブロッカーの バンドルIDだけのアレイです 次にコンテンツブロックの 通知を確認します

SFSafariPageと ブロックされているリソースの マップを作ります コンテンツブロッカーが ブロックしたとの通知があると ブロックされたリソースの リストを見つけ― 通知を受けたリソースを追加 ページを移動する時に リストを消去します

そのためにページをNavigateToURLに オーバライドして ブロックされたリソースを消去します 最後にツールバーの項目のバッジを ブロックしたリソースの数に設定します

ツールバーの項目を検証するには アクティブなタブを見つけます

アクティブなページで― ブロックされたリソースの数を マップから取得します 見てみましょう 拡張機能が見つかるよう Animalifyをビルドして実行します

アプリケーションを実行すると―

拡張機能の設定に移動する スプラッシュスクリーンが表示されます XcodeからSafari Extension Appを 作成すれば 無料でスプラッシュスクリーンを 入手できます Safariを起動して bearseating.comにアクセスし 何を食べるか考えましょう ここではデモが目的なので デベロッパの証明書はありませんが 大丈夫です 拡張機能を一時的に 実行できる方法があるのです まずSafariの環境設定を開き 詳細に進み 開発メニューをオンにします

そして開発メニューで “未署名の機能拡張を許可”を選択 Safari Extensionの 設定をチェックします コンテンツブロッカーと Safari App Extensionを有効にし bearseating.comをリロード クマがハチミツを食べた写真が ブロックされ ツールバーにブロックされた リソース数の“３”が表示されます

コンテンツブロッカー無しで リロードすると バッジが消え ブロックした画像が再び現れます 再度リロードすると画像は消えます このようにブロックと ページの移動の通知が簡単です

これはSafari App Extensionの 新しいAPIのほんの一部です 他も見てみます

SF Safariのページの表示内容を 取得する機能が追加 拡張機能がURLに アクセスする必要があります APIから画像を取得するためです

最新版では Safari Extensionバンドルからの コンテンツ表示が簡単です ネイティブコードから拡張機能の BaseURIを取得できます スクリプトの挿入は不要です

スクリプト無しでタブを 直接URLに移動することもできます

最後にSafariは Safari JavaScriptオブジェクトを 拡張機能のコンテンツでロードされた フレームに挿入します フレームはSafari App Extension との間でメッセージを送受信します

Safari Extensionはアクティブな ウインドウやタブだけでなく Safariで開いているものまで 分かるようになりました

ここにアプリケーション内の 全ウィンドウを取得してから 各ウィンドウごとに 全タブを取得するコードがあります

ページのgetContainingTabと タブのgetContainingWindowも あります 例えばツールバーの項目の更新が必要な コンテンツスクリプトからの メッセージの処理を検討します タブを含むページを取得後に ウィンドウを含むタブを取得できます

ピン留めされたタブは nilを含むウインドウを持ちます これらが全ウィンドウに 属しているからです

以上がウインドウやタブ ページ管理の改善点です

最後のAPIの改善点はポップアップを

プログラムで 開閉できるようにしたことです ツールバーの項目で “ポップアップを表示する”を選択し ウインドウから ポップアップを表示できます ポップアップが ViewControllerから消えます self.dismissPopoverを 呼び出すだけです

APIの追加により改善した 拡張機能を見てみましょう

Safari Extensionを 新しいAPIで改善します ツールバーの項目のテーブルビューで ポップアップが表示されます タブごとに１行と２列になります 左の列は タブのスクリーンショットで 右の列にはページのタイトルと ブロックの数が表示されます

まずポップアップ表示前の Safariウインドウの状態に PopoverViewControllerを伝えます そのためにPopoverWillShowを オーバライドし情報を取得

この関数はウィンドウ内の 全タブで反復処理され ３つのアレイを埋めます １つはブロックしたリソース用 １つは画像用 もう１つはタイトル用です

タブごとに表示されるのは ページのスクリーンショットと

プロパティからの各ページのタイトルと ブロックされたリソースです PopoverViewControllerも オーバーライドし ViewControllerに 戻るようにします ViewControllerを見ます

PopoverStateと変数を設定し テーブルをリロードします

最後は ユーザが この行のどれかをクリックした場合 そのタブをアクティブにし ポップアップを閉じます

テーブルビューの選択が変わると クリックしたタブをアクティブにして ポップアップを閉じます Animalifyを 再ビルドして実行します

Safariを再起動し ホームページを読み込みます 拡張機能がオフになっています 未署名の拡張機能の許可が 必要だからです 開発メニューから実行します

そしてアプリケーションに進み 次に拡張機能に進みます

拡張機能と コンテンツブロッカーをオンにし ページをリロードします 更に数ページ開きます

bearseating.com以外の タブを選択すると ツールバーのバッジが消えます ポップアップを開きましょう

ウインドウ内のタブが見えます beardiet.comから２つ bearseating.comから１つが ブロックされました １行目をクリックして タブをアクティブにします タブに戻りポップアップが終了 これは新しいAPIの一部です

Safari Extensionとアプリケーションの 連携のベストプラクティスを 最後に取り上げます

Safariは必要に応じて 拡張機能を起動します アプリケーションが実行中の 保証はありません

XPCサービス搭載の アプリケーションであれば 拡張機能とそのサービスを 連携させましょう またはSafari Extensionとアプリの間で データを共有したい時があります 拡張機能はアプリケーションで 設定した環境設定を持つことができます

Safari Extensionと XPCサービスを― アプリケーションと同じApp Groupにします これでSafari Extensionは グループ内のサービスを検出できます また UserDefaultsの SuiteNameイニシャライザにより グループ内でデータを共有できます

しかしSafari App Extensionで 最適に処理される動作を アプリケーション内で実行したとします 例えばパスワード管理 アプリケーションを作成していて ユーザーが認証を選択しているとします 拡張機能やSafariが 動作している保証はありません

Safari App Extensionに メッセージを送るAPIがあります DispatchMessage withName: ToExtensionWithIdentifierを アプリケーションが呼び出します これが有効なのは 拡張機能がオンで― APIを呼ぶコードと同じApp Bundle に ある場合にのみです

このAPIを呼び出すと Safariにメッセージが送られ 起動されます

そしてSafariは拡張機能に これを転送します MessageReceivedFrom ContainingAppを実装して Safari App Extensionは メッセージを聞くことができます 受信したメッセージを 実行することで対応します では Safari Extensionsと App間での データ共有の方法を 見てみましょう

両方が同じApp Groupに 属していれば NSXPCConnectionを使った連携や UserDefaultsを使った データ共有ができます AppからSafari App Extensionに メッセージを送る際は SFSafariApplication. dispatchMessageで送信 messageReceived FromContainingAppで処理します

これがAppとSafari Extensionの 連携方法です

今日のトピックは終了です 説明したのは Safari Extensionsを Mac App Storeや― Webサイトから配布できるということ

コンテンツブロッカーと連携させると いつ動作するかが分かります

また App GroupでSafari Extensionと アプリケーションを連携可能です

今日お話ししたAPIはすべて 皆さんのフィードバックの賜物です 今後もフォーラムへ ご意見をお寄せください 皆さんの拡張機能を 楽しみにしています