Slide 1
Slide 1 text
広がれSafari Web Extensions！
Safari Web Extensions の始め方
kenta matsue
iOSDC 2022 Day0
2022-09-10
Slide 2
Slide 2 text
所属
ディー・エヌ・エー
仕事
ブラウザアプリSkyLeap
最近欲しいモノ
MAZDA CX-60
Twitter: @base_front
Github : matsuei
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
今日は別のブラウザのお話
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Safari Web Extensions
Slide 7
Slide 7 text
目次
1. Safari Web Extensions
2. 基本の構成
3. 簡単なSafari Web Extensionsを実装
Slide 8
Slide 8 text
1. Safari Web Extensions
Slide 9
Slide 9 text
1. Safari Web Extensions
Safari における拡張機能
macOS 11 or iOS 15
以降で利用可能
Slide 10
Slide 10 text
1. Safari Web Extensions
基本的な仕組みは
その他のブラウザと共通
Slide 11
Slide 11 text
1. Safari Web Extensions
何が出来るのか🧐
Slide 12
Slide 12 text
1. Safari Web Extensions
ほぼ何でも出来る！
（Javascriptで出来ることなら）
Slide 13
Slide 13 text
1. Safari Web Extensions
アイデア次第で
可能性は無限大💪
Slide 14
Slide 14 text
2. 基本の構成
Slide 15
Slide 15 text
2. 基本の構成
Safari Extension App の
テンプレートを使用して説明
Slide 16
Slide 16 text
2. 基本の構成
File→New→Project
Slide 17
Slide 17 text
2. 基本の構成
Slide 18
Slide 18 text
2. 基本の構成
Slide 19
Slide 19 text
2. 基本の構成
アプリ本体
拡張機能
Slide 20
Slide 20 text
2. 基本の構成
まずはビルドしてみる
Slide 21
Slide 21 text
2. 基本の構成
アプリ本体
拡張機能
Slide 22
Slide 22 text
2. 基本の構成
ディレクトリの中身を確認
Slide 23
Slide 23 text
2. 基本の構成
Slide 24
Slide 24 text
2. 基本の構成
拡張機能からのデータを
Appで受け取る場所
（今回は割愛）
Slide 25
Slide 25 text
2. 基本の構成
拡張機能を管理する json
Slide 26
Slide 26 text
2. 基本の構成（manifest）
Slide 27
Slide 27 text
2. 基本の構成（manifest）
Slide 28
Slide 28 text
2. 基本の構成（manifest）
background
Webページの状態に関
係なく実行できる
Javascriptを管理
Slide 29
Slide 29 text
2. 基本の構成（manifest）
content_script
Webページの読み込み時に
実行するJavascriptを管理
★要素の操作が可能
Slide 30
Slide 30 text
2. 基本の構成（manifest）
permissions
拡張機能に必要な許可
例：「activeTab」で
表示しているタブへの
操作が可能になる
Slide 31
Slide 31 text
2. 基本の構成
実行されるJavascript
mainifestの修正が必要だが
ファイル名の変更
ファイルの追加も可能
Slide 32
Slide 32 text
2. 基本の構成
background.js
content.js
Slide 33
Slide 33 text
2. 基本の構成
background.js
content.js
sendMessage
onMessage.addListener
.then(response)
sendResponse
Slide 34
Slide 34 text
3. 簡単なSafari Web Extensionsを実装
Slide 35
Slide 35 text
3. 簡単なSafari Web Extensionsを実装
今日のお題
Slide 36
Slide 36 text
3. 簡単なSafari Web Extensionsを実装
Wikipediaから
Javascriptを使って
タイトルを削除する
「Captain America」Wikipedia: The Free Encyclopedia. Wikimedia Foundation, Inc, https://en.wikipedia.org/wiki/Captain_America
Slide 37
Slide 37 text
3. 簡単なSafari Web Extensionsを実装
まずはタイトルの要素を特定
Slide 38
Slide 38 text
3. 簡単なSafari Web Extensionsを実装
MacのSafariでWebInspectorを起動し
タイトルの要素名を特定
Slide 39
Slide 39 text
3. 簡単なSafari Web Extensionsを実装
Slide 40
Slide 40 text
3. 簡単なSafari Web Extensionsを実装
Javascriptの修正をする
要素の削除を行いたいので
content.jsを修正
Slide 41
Slide 41 text
3. 簡単なSafari Web Extensionsを実装
Slide 42
Slide 42 text
3. 簡単なSafari Web Extensionsを実装
Slide 43
Slide 43 text
3. 簡単なSafari Web Extensionsを実装
content.js の読み込み時には
要素の取得がまだ出来ないので
シンプルなこの実装では
Slide 44
Slide 44 text
どうするか？🧐
3. 簡単なSafari Web Extensionsを実装
Slide 45
Slide 45 text
background.js
content.js
sendMessage
onMessage.addListener
.then(response)
sendResponse
3. 簡単なSafari Web Extensionsを実装
Slide 46
Slide 46 text
3. 簡単なSafari Web Extensionsを実装
background.js のメッセージを
受け取ったタイミングで実行
Slide 47
Slide 47 text
3. 簡単なSafari Web Extensionsを実装
実行してみる！
Slide 48
Slide 48 text
3. 簡単なSafari Web Extensionsを実装
失敗…
Slide 49
Slide 49 text
3. 簡単なSafari Web Extensionsを実装
manifest を確認
Slide 50
Slide 50 text
3. 簡単なSafari Web Extensionsを実装
matches:
[ "*://example.com/*" ]
怪しい
🧐
Slide 51
Slide 51 text
3. 簡単なSafari Web Extensionsを実装
Slide 52
Slide 52 text
3. 簡単なSafari Web Extensionsを実装
Slide 53
Slide 53 text
3. 簡単なSafari Web Extensionsを実装
成功👏
Slide 54
Slide 54 text
3. 簡単なSafari Web Extensionsを実装
実装のポイント
1. 実行タイミングに気をつけよう
2. 困ったらmanifestを確認しよう
Slide 55
Slide 55 text
3. 簡単なSafari Web Extensionsを実装
これで今日からあなたも
Safari Web Extensionsを
実装出来ます👍
Slide 56
Slide 56 text
ご清聴ありがとうございました！
Slide 57
Slide 57 text
Appendix
今回のコード
github.com/matsuei/SafariWebExtensionsDemo
実践的な実装をしたコード
github.com/matsuei/NoSpoilerHelper