広がれSafari Web Extensions！Safari Web Extensions の始め方/iOSDC22

Transcript

1. 広がれSafari Web Extensions！
 Safari Web Extensions の始め方
 kenta matsue
 iOSDC 2022 Day0
 2022-09-10

2. 所属
 ディー・エヌ・エー
 
 仕事
 ブラウザアプリSkyLeap
 
 最近欲しいモノ
 MAZDA CX-60
 Twitter: @base_front
 Github : matsuei

4. 今日は別のブラウザのお話

6. Safari Web Extensions

7. 目次
 1. Safari Web Extensions
 2. 基本の構成
 3. 簡単なSafari Web Extensionsを実装

8. 1. Safari Web Extensions

9. 1. Safari Web Extensions
 Safari における拡張機能 macOS 11 or iOS 15 以降で利用可能
10. 1. Safari Web Extensions
 基本的な仕組みは その他のブラウザと共通
11. 1. Safari Web Extensions
 何が出来るのか🧐
12. 1. Safari Web Extensions
 ほぼ何でも出来る！
 （Javascriptで出来ることなら）

13. 1. Safari Web Extensions
 アイデア次第で
 可能性は無限大💪

14. 2. 基本の構成

15. 2. 基本の構成
 Safari Extension App の
 テンプレートを使用して説明

16. 2. 基本の構成
 File→New→Project

17. 2. 基本の構成

18. 2. 基本の構成

19. 2. 基本の構成
 アプリ本体
 拡張機能

20. 2. 基本の構成
 まずはビルドしてみる

21. 2. 基本の構成
 アプリ本体
 拡張機能

22. 2. 基本の構成
 ディレクトリの中身を確認

23. 2. 基本の構成

24. 2. 基本の構成
 拡張機能からのデータを
 Appで受け取る場所
 （今回は割愛）

25. 2. 基本の構成
 拡張機能を管理する json

26. 2. 基本の構成（manifest）

27. 2. 基本の構成（manifest）

28. 2. 基本の構成（manifest）
 background
 Webページの状態に関 係なく実行できる
 Javascriptを管理

29. 2. 基本の構成（manifest）
 content_script
 Webページの読み込み時に
 実行するJavascriptを管理
 
 ★要素の操作が可能

30. 2. 基本の構成（manifest）
 permissions
 拡張機能に必要な許可
 
 例：「activeTab」で
 表示しているタブへの
 操作が可能になる

31. 2. 基本の構成
 実行されるJavascript
 
 mainifestの修正が必要だが
 ファイル名の変更
 ファイルの追加も可能

32. 2. 基本の構成
 background.js
 content.js

33. 2. 基本の構成
 background.js
 content.js
 sendMessage
 onMessage.addListener
 .then(response)
 sendResponse

34. 3. 簡単なSafari Web Extensionsを実装

35. 3. 簡単なSafari Web Extensionsを実装
 今日のお題

36. 3. 簡単なSafari Web Extensionsを実装
 Wikipediaから
 Javascriptを使って
 タイトルを削除する
 「Captain America」Wikipedia: The Free Encyclopedia. Wikimedia Foundation, Inc, https://en.wikipedia.org/wiki/Captain_America
37. 3. 簡単なSafari Web Extensionsを実装
 まずはタイトルの要素を特定

38. 3. 簡単なSafari Web Extensionsを実装
 MacのSafariでWebInspectorを起動し
 タイトルの要素名を特定

39. 3. 簡単なSafari Web Extensionsを実装

40. 3. 簡単なSafari Web Extensionsを実装
 Javascriptの修正をする
 
 要素の削除を行いたいので
 content.jsを修正

41. 3. 簡単なSafari Web Extensionsを実装

42. 3. 簡単なSafari Web Extensionsを実装

43. 3. 簡単なSafari Web Extensionsを実装
 content.js の読み込み時には
 要素の取得がまだ出来ないので
 シンプルなこの実装では󰢃

44. どうするか？🧐
 3. 簡単なSafari Web Extensionsを実装

45. background.js
 content.js
 sendMessage
 onMessage.addListener
 .then(response)
 sendResponse
 3. 簡単なSafari Web Extensionsを実装

46. 3. 簡単なSafari Web Extensionsを実装
 background.js のメッセージを
 受け取ったタイミングで実行

47. 3. 簡単なSafari Web Extensionsを実装
 実行してみる！

48. 3. 簡単なSafari Web Extensionsを実装
 失敗…

49. 3. 簡単なSafari Web Extensionsを実装
 manifest を確認

50. 3. 簡単なSafari Web Extensionsを実装
 matches: 
 [ "*://example.com/*" ]
 
 怪しい 🧐

51. 3. 簡単なSafari Web Extensionsを実装

52. 3. 簡単なSafari Web Extensionsを実装

53. 3. 簡単なSafari Web Extensionsを実装
 成功👏

54. 3. 簡単なSafari Web Extensionsを実装
 実装のポイント
 1. 実行タイミングに気をつけよう
 2. 困ったらmanifestを確認しよう

55. 3. 簡単なSafari Web Extensionsを実装
 これで今日からあなたも
 Safari Web Extensionsを
 実装出来ます👍

56. ご清聴ありがとうございました！

57. Appendix 
 今回のコード
 github.com/matsuei/SafariWebExtensionsDemo
 
 実践的な実装をしたコード
 github.com/matsuei/NoSpoilerHelper