1、开发场景

  • 在使用winform自带的webbrowser控件时,要考虑IE的版本以及HTML5的渲染问题,使用体验十分糟糕。毕竟webbrowser只是IE浏览器的一个包装壳罢了。
  • 因此,考虑使用chromium的开源版本,开发一个可以使用多种应用场景的浏览器控件。 经过几番周折,终于基于CefSharp完成了该控件的设计,并结合选项卡控件开发了一款“多选项卡浏览器”。
  • 此浏览器的基本功能和使用体验,接近Chrome浏览器,可以内嵌使用,可以用来做爬虫程序,可以与JavaScript交互进行自动化控制。
  • 但毕竟精力有限,还存在一些问题尚未解决。
    在这里插入图片描述

2、效果展示

在这里插入图片描述

3、开发环境

  • vs2017
  • .net framework 4.6.1
  • CefSharp版本:63.0.3
  • 选项卡控件:TabStrip.dll
  • winform进行窗体设计

4、实现功能

  1. 支持浏览器播放视频(这一点很关键)。
  2. 输入网址,打开网页。
  3. 浏览器的前进、回退功能。
  4. 点击网页链接,在新选项卡打开。
  5. 在新的窗口,打开当前网页。
  6. 按F12键,进行网页调试。
  7. 查看网页源代码。
  8. 浏览器右键菜单设计。
  9. ctrl+T 新建选项卡; ctrl+N 新建窗口;等常用快捷键的实现。
  10. 关闭左侧、右侧、其他选项卡。
  11. 与JavaScript的交互设计。
    在这里插入图片描述

5、关键说明

问题1:使用默认的cefsharp,编译后的浏览器无法播放视频。

因为cefsharp默认是不支持H.264编码,因此无法播放视频。
解决办法:
使用支持H.264编码的【cef.redist.x64.3.3239.1723】、【cef.redist.x86.3.3239.1723】替换Nuget下载安装使用的两个文件夹。
在这里插入图片描述
这里设置【cef.redist.x64.3.3239.1723】、【cef.redist.x86.3.3239.1723】编译的复杂性,因此自己编译对应版本很困难。不如直接替换。这也是选择“CefSharp版本:63.0.3”的原因。
这两个“支持H.264编码”的版本很难找,如有需要,可以联系我。

问题2:增加CefSharp对AnyCPU支持

使用Nuget安装CefSharp版本后,编译时会有Warning:提示不支持AnyCPU。

1、修改项目的csproj文件:将<CefSharpAnyCpuSupport> true </ CefSharpAnyCpuSupport>添加到项目中的第一个<PropertyGroup>配置节。
2、在生成=》配置管理器中,将活动解决方案平台改成 x86 (CEF不能自适应 x86 | x64,必须选择一个目标),目标平台也必须和解决方案平台一致。

问题3:对Cookie的管理

CefSharp以Chromium内核为基础进行封装,默认支持Cookie的保存,与常用浏览器并无区别。
只需在代码中指定Cache(缓存)的保存目录即可。
指定缓存目录后,会自动保存Cookie。

string cachePath = currentPath + @"\Cache";
CefSettings settings = new CefSettings
{
    IgnoreCertificateErrors = true, //忽略证书错误问题
    UserAgent = userAgent, //浏览器的请求头
    Locale = "zh-CN", // 将传递给Blink的语言环境字符串。如果为空,则将使用默认语言环境“ en-US”
    BrowserSubprocessPath = currentPath + @"\CefSharp.BrowserSubprocess.exe",
    AcceptLanguageList = "zh-CN,zh;q=0.8",//浏览器引擎的语言
    PersistSessionCookies = true,//保存回话
    CachePath = cachePath, //缓存文件保存目录:默认情况下,CEF使用内存缓存来保存缓存的数据,例如 要保留cookie,您需要指定一个缓存路径
};
Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);

指定缓存目录后,会自动保存Cookie。在此实现浏览器上登录账号,下次打开时,会维持登录状态。
在这里插入图片描述

6、部分代码说明

控制CefSharp浏览器中点击连接时的弹出位置,需要实现ILifeSpanHandler接口。
这也是实现多选项卡浏览器的关键。

    class C_LifeSpanHandler: ILifeSpanHandler
    {
        UserControlWebBrowser myForm;
        public C_LifeSpanHandler(UserControlWebBrowser myForm)
        {
            this.myForm = myForm;
        }

        public bool DoClose(IWebBrowser browserControl, IBrowser browser)
        {
            //throw new NotImplementedException();
            return false;
        }

        public void OnAfterCreated(IWebBrowser browserControl, IBrowser browser)
        {
            //throw new NotImplementedException();
        }

        public void OnBeforeClose(IWebBrowser browserControl, IBrowser browser)
        {
            //throw new NotImplementedException();
        }

        public bool OnBeforePopup(IWebBrowser browserControl, IBrowser browser, IFrame frame, string targetUrl, string targetFrameName, WindowOpenDisposition targetDisposition, bool userGesture, IPopupFeatures popupFeatures, IWindowInfo windowInfo, IBrowserSettings browserSettings, ref bool noJavascriptAccess, out IWebBrowser newBrowser)
        {
            //throw new NotImplementedException();
            // 目的是:在新标签页上,打开网页上的链接
            newBrowser = null;
            myForm.AddNewBrowserTab(targetUrl);
            return true;
            //return false;
        }
    }

关于浏览器的其他功能,也需要实现对应的接口。比如:

IDownloadHandler:与浏览器的下载功能有关。
IContextMenuHandler:与右键菜单功能有关。
IKeyboardHandler:与快捷键有关。

7、待解决问题:

  • CefSharp与JavaScript的交互资料很多,但本人JS功底一般,无法实现用js控制网页自动化的需求。
  • 类似Chrome浏览器插件的调用与支持,CefSharp官方资料提到的不多,因此暂时没办法解决。

CefSharp无法支持crx插件文件的调用,导致一些常用的比如”去广告插件“没办法使用,无法有效地去除”网页广告“。

浏览器插件的实质也是JavaScript的脚本实现,可以考虑CefSharp与js的交互,从而进行解决。
(如果有大神可以解决,可以联系我,交流一下咯!~)

8、源码下载

由于本次实现依赖文件比较多,尤其是支持H.264编码的【cef.redist.x64.3.3239.1723】、【cef.redist.x86.3.3239.1723】比较大,因此无法上传(csdn只能上传1000MB以内)。

如果有需要,可以私信我,或者加Q(见评论)!!!

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐