Making Custom Browser

Transcript

1. Introduction to Custom
 Android Browsers @DroidKaigi 2019 on 2019.02.08 Tomoya

   ASAI (CTO, WebDINO Japan)

2. about:me Tomoya ASAI - dynamis webdino.org CTO Tech Speaker dynamis

   @ Community Twitter: @dynamitter facebook.com/dynamis I LOVE Firefox = Red Panda = Petit Panda = Lesser Panda 2 @

3. about: WebDINO Japan Web, Browser, Open ( : ) (Chromium,

   Firefox ) ( : Gecko ) Web & Open Web IoT 2017 : Mozilla Japan WebDINO Japan https://www.webdino.org/ 3

4. about: WebDINO Japan Web, Browser, Open ( : ) (Chromium,

   Firefox ) ( : Gecko ) Web & Open Web IoT 2017 : Mozilla Japan WebDINO Japan https://www.webdino.org/ 4

5. Today's Topics Why Custom Browsers Firefox Building Firefox Customizing Firefox

   Chromium Building Chromium Customizing Chromium Conclusion 5

6. Questions

7. None
8. None
9. None
10. None

11. Why Custom Browsers

12. Web AOSP Chrome Chrome #DroidKaigi 12

13. Building Firefox

14. Firefox for Android hg (mercurial) GitHub Artifact C 翻 UI

    OK mozcon g 14

15. Firefox for Android hg clone https://hg.mozilla.org/mozilla-central cd mozilla-central # mercurial

    をどうしても使いたくない場合は git ミラーから: # git clone https://github.com/mozilla/gecko- dev.git; cd gecko-dev # 開発環境のセットアップ ./mach bootstrap # ビルド、パッケージ作成、インストール、起動 ./mach build # artifact モードの場合は ./mach build mobile/android ./mach package ./mach install ./mach run https://developer.mozilla.org/docs/Mozilla/Developer_Guide/Build_Documentation/Simple_Firefox_for_Android_build 15

16. ( ) mozcon g # Firefox for Android をビルドする: ac_add_options

    --enable-application=mobile/android ac_add_options --target=arm-linux-androideabi # Android SDK/NDK のパスをフルパスで設定: ac_add_options --with-android-sdk="/absolute/path/ to/.mozbuild/android-sdk" ac_add_options --with-android-ndk="/absolute/path/ to/.mozbuild/android-ndk-r11c" # ビルド結果の出⼒ディレクトリ: mk_add_options MOZ_OBJDIR=./objdir-droid https://developer.mozilla.org/docs/Mozilla/Developer_Guide/Build_Documentation/Simple_Firefox_for_Android_build 16

17. Artifact mozcon g # Firefox for Android をビルドする: ac_add_options --enable-application=mobile/android

    ac_add_options --target=arm-linux-androideabi # Android SDK のパスをフルパスで設定 (NDK 不要): ac_add_options --with-android-sdk="/absolute/path/ to/.mozbuild/android-sdk" # Artifact モードでのビルドを指定: ac_add_options --enable-artifact-builds # ビルド結果の出⼒ディレクトリ: mk_add_options MOZ_OBJDIR=./objdir-frontend https://developer.mozilla.org/docs/Mozilla/Developer_Guide/Build_Documentation/Simple_Firefox_for_Android_build 17

18. ♥

19. ... en-US ( ) https://firefox-source-docs.mozilla.org/build/buildsystem/locales.html 19

20. ( ) # まずは英語単⼀ロケールビルドを作成 ./mach build ./mach package # 各⾔語のファイルを⽣成

    export MOZ_CHROME_MULTILOCALE="ja zh-TW" for AB_CD in $MOZ_CHROME_MULTILOCALE; do ./mach build chrome-$AB_CD done # マルチロケールビルドとしてリパッケージ AB_CD=multi ./mach package Firefox 52 20

21. ... Mozilla ... OS en-US Accept-Laguage ... ( ) :

    翻 21

22. https://hg.mozilla.org/releases/mozilla-release/ ESR ( ) https://hg.mozilla.org/releases/mozilla-esr60/
 https://hg.mozilla.org/releases/mozilla-esr52/ ( branding ) 22

23. Mozilla mozharness 翻 10 / : https://treeherder.mozilla.org/ mozharness 翻 mozharness

    ( ) 翻 ... Mozilla 23

24. mozharness # 対象リリースブランチのファイルをクローンして mozconfig を⽤意 hg clone https://hg.mozilla.org/releases/mozilla-esr60/ mozilla-central #

    対象リリースブランチの mozconfig と mozharness 設定テンプレを⼿元にコピー cp mozilla-central/mobile/android/config/mozconfigs/android-api-16/ l10n-nightly mozconfig cp mozilla-central/testing/mozharness/configs/developer_config.py config.py # 設定ファイルを編集。mozconfig は依存先にも注意。作りたいビルド設定を参考に書き換え: # mozharness/configs/multi_locale/mozilla-release_android.json nano mozconfig nano config.py # ⾔語リソースファイルを取得 mozilla-central/testing/mozharness/scripts/multil10n.py --cfg config.py --pull-build-source # ここでカスタマイズしたい内容に応じて各ファイルを編集 # ビルド (ビルド、英語版パッケージ、ロケール追加、マルチロケールビルド) を実⾏！ mozilla-central/testing/mozharness/scripts/multil10n.py --cfg config.py 24

25. ...

26. Customizing Firefox

27. Firefox (Yahoo, Yandex...) PC ( ...) FireTV UI Google FireTV

    YouTube YouTube Firefox ( Silk) Note: Android YouTube Google Firefox for FireTV: https://github.com/mozilla-mobile/firefox-tv 27

28. : Firefox OS VIERA Firefox OS "My Home Screen" Firefox

    OS Firefox UK "powered by Firefox OS" "OS" AOSP Panasonic FreeBSD FxOS "OS" https://medium.com/@bfrancis/the-legacy-of-firefox-os-c58ec32d94f0 28

29. Distribution Files DL 1. /data/data/org.mozilla. refox/distribution/ 2. /system/org.mozilla. refox/distribution/ 3.

    Google Play https://wiki.mozilla.org/Mobile/Distribution_Files 29

30. Distribution Files ( ) { "Preferences": { "general.useragent.device_string": "XXXXXX %DEVICEID%

    Build/ Xxxxxx%DEVICEID%", "general.useragent.use_device": true }, "ApplicationPreferences": { "newtab.load_homepage": true }, "AndroidPreferences": { "distribution.read_partner_bookmarks_provider": true, "distribution.read_partner_customizations_provider": true, "homepage": "http://home.att.com", "suggestedSites.hidden": "https://www.xxxxxx.xxx/", "distribution.set_as_homepage": true, "startpane_enabled": false } } preferences.json 30

31. : User Agent User Agent i-mode Firefox 41 OS (

    Top100+ ) UA nger printing https://developer.mozilla.org/ja/docs/Web/HTTP/Gecko_user_agent_string_reference 31

32. Firefox Distribution Files UI Artifact Android mozharness 32

33. None

34. WebDINO Japan : https://www.webdino.org/contact/ 34

35. Building Chromium

36. Chromium for Android Firefox 4 5 200 300GB Firefox Artifact

    Google Corei7-4770 (3.9GHz 4core) 16GB HDD 駄 1 5 36

37. Chromium Firefox CPU arch 1 (~2) API level 1 


    (arm64 ) Chromium CPU arch 2 API level 3 
 (x86 arch 3 ) 4-5 x 6 20-30 37

38. UI UI C 翻 ( ) unsigned 64bit md5 ID

    ... https://ftagada.wordpress.com/2011/01/08/chromium-translations-explained-part-1/ 38

39. Chromium #include "chrome/grit/chromium_strings.h" #include "chrome/grit/generated_resources.h" Item(IDS_PREFERENCES) Mac ( Android ...

    ) 39 <translation id="4345587454538109430">設定...</translation> chrome/app/resources/generated_resources_ja.xtb chrome/browser/ui/cocoa/main_menu_builder.mm chrome/app/generated_resources.grd <message name="IDS_PREFERENCES" desc="The Mac menu item to open the preferences window in the app menu."> Preferences... </message>

40. Chrome i18n GRIT GRIT https://www.chromium.org/developers/tools- we-use-in-chromium/grit https://cs.chromium.org/chromium/src/tools/ grit/ OSS console

    (server) Google https://ftagada.wordpress.com/2011/01/08/chromium-translations-explained-part-1/ 40

41. OSS

42. ...

43. Chromium # まずはツールクローンしてパスを通す git clone https://chromium.googlesource.com/ chromium/tools/depot_tools.git export PATH="$PATH:/path/to/depot_tools" mkdir

    ~/chromium && cd ~/chromium fetch --nohooks android # gn は configure のようなもの gn gen --args='target_os="android" is_chromecast=true' out/Default # ninja は make のようなもので auto は並列数 -j 調整 autoninja -C out/Default chrome_public_apk https://chromium.googlesource.com/chromium/src/+/master/docs/android_build_instructions.md 43

44. # Make sure you are in 'src'. # This part

    should only need to be done once, but it won't # hurt to repeat it. (...以下略...何⾔ってんだこいつｗ) gclient sync --with_branch_heads --with_tags # You may have to explicitly 'git fetch origin' to pull branch-heads/ git fetch # Checkout the branch 'src' tree. git checkout -b branch_$BRANCH branch-heads/$BRANCH # Checkout all the submodules at their branch DEPS revisions. gclient sync --with_branch_heads --with_tags https://www.chromium.org/developers/how-tos/get-the-code/working-with-release-branches 44

45. Customizing Chromium

46. https://urls.jp/vm Android : https://urls.jp/vmdroid Chrome : https://urls.jp/vmext 46

47. : VideoMark Browser http://vm.webdino.org/ Paravi, TVer, YouTube Chromium API (

    ) : https://github.com/videomark/videomark-browser 47 https://urls.jp/vm

48. VM 48 ֶज़ݚڀ༻σʔλ
 ΍ௐࠪ෼ੳ݁ՌΛ
 Ұൠެ։ ૹ৴ ʲΫϥΠΞϯτ৘ใʳ w ୺຤छผ
 1$
    PS
    ϞόΠϧ

    
    w ϒϥ΢βόʔδϣϯ
    w 04
    όʔδϣϯ
    ౳
    ஫
    ࢯ໊ɾॅॴ౳ͷݸਓ ಛఆ৘ใ͸ؚ·ͳ͍
 6TFS"HFOU
    ͔Β൑அ ʲωοτϫʔΫ৘ใʳ w ௨৴ࣄۀࣾɾ*41
    w ஍Ҭ
    ౎ಓ෎ݝ
    ౳
    ஫
    ૹ৴ݩ*1ΞυϨεΛ ಗ໊Խ ຤ඌΦΫςοτ ࡟আ ޙʹ(FP*1Ͱਪఆ ʲ࠶ੜ඼࣭ύϥϝʔλʳ w ಈը৘ใ
    ϏοτϨʔτɺ ղ૾౓ɺϑϨʔϜϨʔτ
    ౳
    w ࠶ੜ৘ใ
    ࠶ੜͷதஅɺόο ϑΝϦϯά
    ౳
    w ૢ࡞৘ใ
    ಈըͷγʔΫɺ Ұ࣌ఀࢭɾ࠶։
    ౳ 8FC
    7JEFP.BSL
    ֦ுػೳ΍ϒϥ΢βʔͰࢹௌ৘ใΛऔಘ ࢹௌͨ͠ಈըͷ
    ମײ඼࣭ 2P& Λ dͷ਺஋ͱͯ͠ ϑΟʔυόοΫ ಈըαʔϏεͷ
    ਪఆମײ඼࣭஋ 2P& 2VBMJUZ
    PG
    &YQFSJFODF ಈը഑৴αʔϏεɾ $%/
    αʔόʔ 8FC
    7JEFP.BSL
    
    αʔόʔ ࢹௌ৘ใΛ෼ੳ ௨৴ࣄۀऀɾ*41 αʔϏεվળ༻ʹ
    ௐࠪσʔλΛఏڙ ར༻ऀͷ ϒϥ΢βʔ ʂ ಈըࢹௌ࣌ͷ
    2P&
    Λ֬ೝ ϓϥΠόγʔอޢॲཧ ֶज़ݚڀ༻σʔλ࡞੒ ಈը഑৴αʔϏε΁ΞΫηε )5.-ɺಈըϑΝΠϧ౳Λड৴ ಗ໊Խॲཧ

49. : Web VideoMark Android 49

50. : : Android PC or Android Chrome : ENABLE_EXTENSIONS 50

    https://urls.jp/vm

51. # chrome/renderer/chrome_content_renderer_client.cc # ここで実⾏してください的なコードがあちこちにある: void ChromeContentRendererClient::RunScriptsAtDocumentEnd( content::RenderFrame* render_frame) { #if

    BUILDFLAG(ENABLE_EXTENSIONS) ChromeExtensionsRendererClient::GetInstance()- >RunScriptsAtDocumentEnd( render_frame); // |render_frame| might be dead by now. #endif # ここでコード挿⼊関数を呼び出そう！ # InjectScript(render_frame) } https://cs.chromium.org/chromium/src/chrome/renderer/chrome_content_renderer_client.cc 51

52. ( ) void InjectScript(content::RenderFrame* render_frame) { WebLocalFrame* frame = render_frame->GetWebFrame();

    GURL url = GURL(frame->GetDocument().Url()); if (render_frame->IsMainFrame()) { base::StringPiece source_piece = ui::ResourceBundle::GetSharedInstance() .GetRawDataResource(IDR_CONTENT_JS); base::StringPiece injector = ui::ResourceBundle::GetSharedInstance() .GetRawDataResource(IDR_INJECT_JS); std::string source = base::ReplaceStringPlaceholders(injector, std::vector<std::string>{source_piece.as_string()}, nullptr); blink::WebScriptSource source_in = blink::WebScriptSource(WebString::FromUTF8(source.data(), source.size())); frame->ExecuteScript(source_in); } } https://github.com/videomark/videomark-browser/blob/master/inject_sodium.diff 52

53. ( ) // 先ほどの IDR_INJECT_JS の中⾝ let target = document.getElementsByTagName("body")

    [0]; let script = document.createElement("script"); script.setAttribute("type", "text/javascript"); // IDR_CONTENT_JS を script タグの中⾝に突っ込む script.innerText = "$1"; target.appendChild(script); // Web ページのコンテキストでコードを実⾏させる https://github.com/videomark/videomark-browser/blob/master/inject_sodium.diff 53

54. Chromium VideoMark Browser https://github.com/videomark/videomark-browser CopperheadOS Google https://github.com/CopperheadOS/ chromium_patches https://copperhead.co/android/docs/ building#chromium-and-webview

    54

55. Conclusions

56. ♥ Firefox ♥ 翻 ♥ Chromium ♥ API 56

57. : https://www.webdino.org/contact/ 57

58. Thank You! Any Questions? Feel free to contact me: dynamis

    webdino.org
 @dynamitter, facebook.com/dynamis Slide Upload: speakerdeck.com/dynamis by @4687koSourijun @