[C#] 如何在 Edge WebView2 中注入和使用 JQuery 來改變網頁內容
2024-06-05
上一篇文章簡單的介紹了 Edge WebView2 的套件，接下來，就是比較要做的常規操作，就是我們要 inject 一些 js 進去
今天主要目的就是，載入網頁後，在 inject JQuery 之後再呼叫一行 JQuery 的程式去改變網頁上面的內容.
1.參考 簡單使用
Microsoft Edge WebView2 在 WinForms 中的應用 安裝 Edge WebView2
2.接下來我們必須要 在網頁載入完成後插入 JQuery 的動作
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public Form1() | |
| { | |
| InitializeComponent(); | |
| webView21.EnsureCoreWebView2Async(); | |
| webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted; | |
| //網頁載入完畢後執行 | |
| webView21.NavigationCompleted += WebView21_NavigationCompleted; | |
| } | |
| private async void WebView21_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e) | |
| { | |
| //載入網頁後，在動態載入 JQuery | |
| //因為 micosoft 的 domain 有做 cros 限制 | |
| //所以只能用 https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js | |
| string jqueryScript = "var script = document.createElement('script');script.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js'; document.getElementsByTagName('head')[0].appendChild(script);"; | |
| await webView21.ExecuteScriptAsync(jqueryScript); | |
| MessageBox.Show("Import JQuery Already"); | |
| } | |
小備註：
因為 我sample 網站是用 Edge WebView2 的網址他們會有所限制如果你不是引入指定網域的資源檔會出現，我一開始是用 JQuery 官方的 JS 連結
VM258:1 Refused to load the script 'https://code.jquery.com/jquery-3.6.3.min.js' because it violates the
following Content Security Policy directive: "script-src 'self' 'self' 'unsafe-eval' 'unsafe-inline'
https://ajax.aspnetcdn.com https://az725175.vo.msecnd.net https://*.microsoft.com https://mem.gfx.ms
https://edgestatic.azureedge.net https://js.monitor.azure.com https://mwf-service.akamaized.net https://*.clarity.ms
https://*.bing.com http://*.bing.com https://*.adnxs.com https://connect.facebook.net https://snap.licdn.com
https://www.youtube.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
因為可以開啟 開發者模式，所以可以看到 錯的 console 來 debug ( 舒服~~~
後來找一下 https://learn.microsoft.com/en-us/aspnet/ajax/cdn/overview
這裡有紀載一些微軟允許的網域資源檔案，這故事告訴我們，雖然透過 WebView2 可以做一些騷操作，但是主要還是基於自動化
如果是一些違法不符合瀏覽器的規範的他還是不會去執行，這點需要注意
3. 呼叫 JQuery 部分:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private async void btnInjectJS_Click(object sender, EventArgs e) | |
| { | |
| // 呼叫 JQuery 改變網頁資料 | |
| var script = "$('a').html('我都被當麻改過了');"; | |
| await webView21.ExecuteScriptAsync(script); | |
| } | |
大概紀錄到這裡，如果有啥特殊的操作我覺得值得紀錄的我再來寫一下