顯示具有 webview 標籤的文章。 顯示所有文章
顯示具有 webview 標籤的文章。 顯示所有文章

2019年11月27日 星期三

[Go] 透過 Golang 操作系統內建 WebView @ macOS, WKWebView

最近在幫同事想想,到底有沒有什麼更方便的環境去協助同事分析網頁的組成。再加上自己想順便了解一下 golang 是如何跨平台的,就隨意找了這套:github.com/zserge/webview ,看了看,學到不少東西。

心得一:所謂的跨平台,是別人幫你做完所有苦力

在 webview.h 裡頭就定義清楚在 Windows / Linux / macOS 上所使用的 WebView 元件為何,超佛心的幫你串好常見的用法

心得二:macOS 的 WKWebView 就跟 iOS 內的沒啥兩樣

簡稱想要做到更細的東西,都得靠 hack ,黑來黑去好累啊。像是想要追蹤一個網頁形成過程到底用了哪些 resource ,於似乎想要追蹤所有 request ,接著又要想想該如何向 UIWebView 那麼方便查看,接著又要想想是不是要用 WKURLSchemeHandler ,又該怎樣把系統內定的 http/https 黑回來 NSURLProtocol 處理等等,還是要搞個 proxy mode 追蹤?

想著想著...啊不就換套 CEF 就好 XD

於是乎,我就放棄 zserge/webview 在 macOS 上操弄 WKWebView !不過也趁這個機會我練了一下怎樣從 C call ObjectiveC 或者說從 Go 怎樣操作 ObjectiveC,也是總緣份吧

這次操弄 zserge/webview 大概玩了:

- 欣賞 zserge/webview 大大怎樣提供跨平台呼叫瀏覽網頁的元件

- 從 C 操作 WKWebView 物件,接著再呼叫它的 methods 換掉 User-Agent 資訊

WEBVIEW_API void webview_set_user_agent(struct webview *w, const char *user_agent) {
  // https://developer.apple.com/documentation/webkit/wkwebview/1414950-customuseragent?language=objc
  objc_msgSend(w->priv.webview, sel_registerName("setCustomUserAgent:"), get_nsstring(user_agent));
}


- 從 C 操作 WKWebView 物件,接著再呼叫它的 methods 添加監聽 didStartProvisionalNavigation 和 didFinishNavigation

static void wk_webview_didStartProvisionalNavigation(id self, SEL cmd, id webView, id navigation) {
  // https://developer.apple.com/documentation/webkit/wknavigationdelegate/1455621-webview?language=objc
  webview_print_log("at wk_webview_didStartProvisionalNavigation");
  //id absoluteString = objc_msgSend(objc_msgSend(webView, sel_registerName("URL")), sel_registerName("absoluteString"));
  webview_print_log( get_webview_current_url(webView) );
}

static void wk_webview_didFinishNavigation(id self, SEL cmd, id webView, id navigation) {
  // https://developer.apple.com/documentation/webkit/wknavigationdelegate/1455629-webview?language=objc
  webview_print_log("at wk_webview_didFinishNavigation");
}

// ...

  Class __WKNavigationDelegate = objc_allocateClassPair(
      objc_getClass("NSObject"), "__WKNavigationDelegate", 0);
  class_addProtocol(__WKNavigationDelegate,
                    objc_getProtocol("WKNavigationDelegate"));

// ...

  class_addMethod(
      __WKNavigationDelegate,
      sel_registerName(
          "webView:didStartProvisionalNavigation:"),
      (IMP)wk_webview_didStartProvisionalNavigation, "v@:@@");
  class_addMethod(
      __WKNavigationDelegate,
      sel_registerName(
          "webView:didFinishNavigation:"),
      (IMP)wk_webview_didFinishNavigation, "v@:@@");


收工!

2018年4月3日 星期二

[Android] 使用 Chrome Browser - Web Inspector 查看 App WebView 行為

之前用了一陣子,然後又忘了,還是寫一下筆記:

  1. 要把 Android app 內使用的 Webview 開啟 setWebContentsDebuggingEnabled
    • WebView.setWebContentsDebuggingEnabled(true);
  2. Android phone 也要開啟 developer mode 和 adb debug
  3. 使用 Chrome browser -> 開發人員選項 -> more tools -> remote devices

順利的話,就會看到手機彈跳出一些視窗,按一按授權就看在 chrome browser 上追蹤 App 內 webview 的行為,像是追蹤其他國家內的網頁資源有被有被 ban 掉 XD

請直接參考:https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-tw

未來可以規劃 release apk 不開啟 setWebContentsDebuggingEnabled ,而 dev apk 再開啟即可。

2015年4月2日 星期四

Android 開發筆記 - 嘗試取出 WebView Javascript console.log @ 小米2S Android 4.1.1

原先 Android 4.4 已經有漂亮的解法:Debugging Web Apps,但是,對於其他版本的就 糟糕了。

所幸小米2S的系統還算 ok,只需啟動開發者模式,並播打電話 *#*#717717#*#* 後,即可開啟完整的開發者模式,透過 adb 連線。

$ adb devices
...至少要看到小米2S機器

$ adb logcat com.android.chromium:* | grep 'WebViewerFragment'
...
D/WebViewerFragment(25584): onScroll:192.34418
D/WebViewerFragment(25584): onScroll:344.65582
D/WebViewerFragment(25584): onFling:-4593.181
D/WebViewerFragment(25584): onScroll:-71.85919
D/WebViewerFragment(25584): onScroll:-183.00793
D/WebViewerFragment(25584): onScroll:-61.014893
D/WebViewerFragment(25584): onScroll:-77.11798
D/WebViewerFragment(25584): onFling:5177.8477
D/WebViewerFragment(25584): onScroll:-42.316345
D/WebViewerFragment(25584): onScroll:-70.78821
D/WebViewerFragment(25584): onScroll:-89.440186
D/WebViewerFragment(25584): onScroll:-105.551575
D/WebViewerFragment(25584): onScroll:-117.46338
D/WebViewerFragment(25584): onFling:8612.66
...


如此,簡易版搞定 :P 上述訊息是 javascript console.log。另一外提的是,我把小米2s系統預設瀏覽器改成 chrom browser ,不知使用系統預設 browser 是否一樣,以及我安裝的 app 可能是 debug 版本,有一說 release 版本可能看不到。