自己写一个极简浏览器

article/2025/6/17 6:59:10

自己写一个极简浏览器

——基于Chromium的浏览器

在这里插入图片描述

我的Github地址：

官方：https://github.com/KaiHuaDou/EasyBrowserAdvanced/releases

加速：https://github.com.cnpmjs.org/KaiHuaDou/EasyBrowserAdvanced/releases

目的

我们使用手机、电脑时，遇到的最大问题，大概就是蓝屏和慢。

蓝屏我解决不了（可以找微软），只能解决“慢”

显然，解决”慢“这个问题，只有两种途径：

  1. 解决操作系统问题（Linux？自己写？）

  2. 解决软件问题

让大家都用Linux可实施性太弱，所以，我只能解决软件问题。

那么，软件中最常用的，莫过于浏览器。考虑到技术难度不算太高，代码量在15000行左右，我决定——自己写一个浏览器！

我的浏览器特点就是快，非常快！但是速度快，有些功能就得舍弃，不过人们用浏览器，也不过是看看自己Github上有多少颗Star而已，所以这并不是缺点。

那么，浏览器叫什么呢？作为强迫症晚期患者的我，决定给我的浏览器起一个简洁的名字：极简浏览器！

开始了

浏览器这种软件大体可以分为两个部分：核、壳

核

我们有以下几种办法：

内核优点缺点
TridentWindows内置，无需安装，教程多性能低下，陈旧过时，各大网站均阻止或屏蔽
Gecko轻巧易用，性能良好没有嵌入式Nuget程序包
Chromium性能极佳，范围广泛，嵌入性强，教程多不支持HTTP，FTP，FTPS，默认不支持Flash Player

最终我选用了Chromium，也就是Chrome的内核，通过CefSharp作为内核框架进行开发，并且可以在微软官方Nuget包源上找到。

壳

代码

为了维持项目不变成代码垃圾堆，我可下了一番功夫

设计模式

我使用VEA模式，即View->Event->Api模式，界面接收操作，事件处理程序响应，交给Api去处理，返回给事件处理程序，事件更新页面

多进程模型

一个标签页一个进程，由于速度极快，并没有延迟

Api思想

将浏览器模块统一进BrowserCore.cs，这样在访问到下一个页面时，使用的是BrowserCore.Navigate(url);，而不是cwb.Address = url;，同时也可以从其他类来控制主窗口，通过GetInstance()方法，在窗口列表里检测类型为MainWindow是窗口，从而获取实例。

同时加入“不文明语言检测器”，保证访问的网页是文明的。

文件架构
/
│  .gitattributes
│  .gitignore
│  README.md //帮助文件
│  极简浏览器Cef.sln //项目文件
├─packages //Chromium Nuget程序包
│  ├─cef.redist.x64.86.0.24
│  │  └─略
│  ├─cef.redist.x86.86.0.24
│  │  └─略
│  ├─CefSharp.Common.86.0.241  
│  │  └─略   
│  └─CefSharp.Wpf.86.0.241      
│      └─略             
├─Setup //安装程序
│  └─略
└─极简浏览器Cef│  App.config│  App.xaml│  App.xaml.cs│  BrowserExtension.cs //MainWindow.xaml.cs的扩展│  BrowserHelper.cs //ChromiumWebBrowser的扩展│  favicon.ico //图标│  MainWindow.xaml│  MainWindow.xaml.cs│  packages.config│  极简浏览器.csproj│  极简浏览器.csproj.user├─Api│      BrowserCore.cs //浏览器内核管理（包括导航）│      CivilizedLanguage.cs //不文明语言检测器│      FileApi.cs //历史记录与书签│      FilePath.cs //路径文件│      HtmlFormatter.cs //HTML格式化│      Logger.cs //日志记录器│      NewInstance.cs //标签页管理器│      StandardApi.cs //其他Api（标准Api）│      ├─bin│  └─略├─Dialog│      About.xaml //关于│      About.xaml.cs│      Help.xaml //帮助│      Help.xaml.cs│      History.xaml //历史记录与书签│      History.xaml.cs│      Setting.xaml //设置│      Setting.xaml.cs│      WebSource.xaml //网页源代码│      WebSource.xaml.cs├─lib│      pepflashplayer.dll //Flash Player├─Properties //资源文件│      AssemblyInfo.cs│      Resources.Designer.cs│      Resources.resx│      Settings.Designer.cs│      Settings.settings└─resource //图片资源Error.png 刷新.png //均截图自Chrome 89向前.png向后.png添加.png

详情看上面的注释。

GUI（图形界面）

既然说是“极简”，GUI设计肯定也要遵从极简原则，我将浏览器分为三部分：顶栏，中栏，底栏。

栏位功能
顶栏前进、后退、刷新、地址栏（兼搜索）、添加新窗口
中栏网页展示
底栏加载状态、菜单

说干就干，一个83行长的XAML就写完了：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:极简浏览器"xmlns:c="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" x:Class="极简浏览器.MainWindow" Title="极简浏览器" Width="600"WindowStartupLocation="Manual" WindowState="Normal" Loaded="Window_Loaded" Icon="favicon.ico" Height="500"><Window.Resources><ControlTemplate x:Key="FilletTextBox" TargetType="{x:Type TextBox}"><Border BorderBrush="Gray" BorderThickness="1" CornerRadius="10"><ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" /></Border></ControlTemplate></Window.Resources><Window.TaskbarItemInfo><TaskbarItemInfo /></Window.TaskbarItemInfo><Grid x:Name="MainGrid"><Grid.ContextMenu><ContextMenu><MenuItem x:Name="HidestartusBar" Header="隐藏状态栏" Click="StatusBar_ContextMenu_Click" /></ContextMenu></Grid.ContextMenu><Grid x:Name="CWBGrid" Margin="0,37,0,35"></Grid><Button x:Name="GoBackButton" HorizontalAlignment="Left" VerticalAlignment="Top" Width="35" Height="30"Click="GoBackButton_Click" Foreground="Black" FontWeight="ExtraBlack" Background="{x:Null}"BorderBrush="{x:Null}" FontSize="24" FocusVisualStyle="{x:Null}" BorderThickness="0"><Image Source="resource\向前.png"></Image></Button><Button x:Name="GoForwardButton" HorizontalAlignment="Left" Margin="35,0,0,0" VerticalAlignment="Top" Width="35"Height="30" Click="GoForwardButton_Click" Foreground="Black" BorderBrush="{x:Null}" FontSize="24"BorderThickness="0" FocusVisualStyle="{x:Null}" Background="{x:Null}"><Image Source="resource\向后.png"></Image></Button><Button x:Name="RefershButton" HorizontalAlignment="Right" Margin="0,0,36,0" VerticalAlignment="Top" Width="31"Height="30" Click="RefreshButton_Click" BorderBrush="{x:Null}" Foreground="{x:Null}"Background="{x:Null}" FocusVisualStyle="{Binding ElementName=button3,Path=Style}" BorderThickness="0"><Image x:Name="image" Height="30" Width="30" Source="resource\刷新.png" /></Button><StatusBar x:Name="startusBar" Height="35" Margin="0,0,144,0" VerticalAlignment="Bottom"><Label x:Name="label1" Content="" Height="35" /><Label x:Name="label2" Content="此网页不文明!" Height="35" Visibility="Collapsed" Foreground="Red" /></StatusBar><Button x:Name="AddNewPageButton" HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top"Width="35" FontSize="22" Height="30" Click="AddNewPageButton_Click" Background="{x:Null}"Foreground="{x:Null}" BorderBrush="{x:Null}" FocusVisualStyle="{x:Null}" BorderThickness="0"><Image x:Name="image1" Margin="0,0,0,0" Source="resource\添加.png" /></Button><Menu x:Name="OptionMenu" HorizontalAlignment="Right" Height="35" Margin="0,0,0,0" VerticalAlignment="Bottom"Width="144"><MenuItem Header="开发者" Height="35" Width="72" BorderThickness="0" FontSize="22"><MenuItem  x:Name="DevToolsButton" Header="开发者工具(_D)" HorizontalAlignment="Left" Width="285" FontSize="24" Click="DevToolsButton_Click" /></MenuItem><MenuItem Header="更多..." Height="35" Width="72" BorderThickness="0" FontSize="22"><MenuItem Header="上一页(_P)" HorizontalAlignment="Left" Width="285" FontSize="24"Click="GoForwardButton_Click" /><MenuItem Header="下一页(_N)" HorizontalAlignment="Left" Width="285" FontSize="24"Click="GoBackButton_Click" /><MenuItem Header="刷新(_R)" HorizontalAlignment="Left" Width="285" FontSize="24"Click="RefreshButton_Click" /><MenuItem Header="添加新页面(_W)" HorizontalAlignment="Left" Width="285" FontSize="24"Click="AddNewPageButton_Click" /><MenuItem Header="查看网页源代码(_U)" HorizontalAlignment="Left" Width="285" FontSize="24"Click="ViewSource_Click" Margin="0,0,-22,0" /><MenuItem Header="设为书签(_B)" HorizontalAlignment="Left" Width="285" Click="SetBookMark_Click" /><MenuItem Header="查看书签(_V)" HorizontalAlignment="Left" Width="285" Click="ViewBookMark_Click" /><MenuItem Header="历史记录(_H)" HorizontalAlignment="Left" Width="285" Click="ViewHistory_Click" /><MenuItem Header="设置(_S)" HorizontalAlignment="Left" Width="285" FontSize="24" Click="Setting_Click" /><MenuItem Header="帮助(_H)" HorizontalAlignment="Left" Width="285" FontSize="24" Click="Help_Click" /><MenuItem Header="关于(_A)" HorizontalAlignment="Left" Width="285" FontSize="24" Click="About_Click" /><MenuItem Header="置顶(_T)" HorizontalAlignment="Left" Width="285" FontSize="24" IsCheckable="True"Click="Topmost_Checked" /><MenuItem Header="在本窗口打开(_C)" HorizontalAlignment="Left" Width="285" FontSize="24" IsCheckable="True"x:Name="OnlyThis" /><MenuItem Header="无痕模式(_C)" HorizontalAlignment="Left" Width="285" FontSize="24" IsCheckable="True"x:Name="NoLogs" /></MenuItem></Menu><ProgressBar x:Name="LoadProgressBar" Maximum="100" Margin="0,30,0,0" HorizontalAlignment="Stretch"VerticalAlignment="Top" Height="7" Background="{x:Null}" BorderThickness="0"></ProgressBar><TextBox x:Name="UrlTextBox" Height="30" TextWrapping="NoWrap" Text="" VerticalAlignment="Top" FontSize="20"Margin="70,0,70,0" Background="White" KeyDown="Go" Template="{StaticResource FilletTextBox}" /></Grid>
</Window>

注：请忽略关联的事件处理程序

其他页面当然也毫不例外，在此不再一一展示

结束

经过了 三年 的努力，我的极简浏览器终于写完了，现在在Github上已经更新到3.2.1.11版本了，当然里面也有很多不足之处，希望大家多多指正。

我的Github地址：

官方：https://github.com/KaiHuaDou/EasyBrowserAdvanced/releases

加速：https://github.com.cnpmjs.org/KaiHuaDou/EasyBrowserAdvanced/releases


http://chatgpt.dhexx.cn/article/8rb85J6h.shtml

相关文章

如何搭建一个自己的图床

如何搭建一个自己的图床

起因 md文档&#xff0c;全称markdown&#xff0c;是一种标记语言&#xff0c;可以非常方便地用来写博客。在md文档中&#xff0c;插入图片等多媒体是通过外链的方式&#xff0c;因此需要一个图片的链接管理仓库。 之前我使用的是gitee码云。但3月25日&#xff0c;gitee码云大…
阅读更多...
JavaWEB做一个美女网站

JavaWEB做一个美女网站

你是否想要拥有一个自己的网站&#xff1f;那么现在来了&#xff0c;直接上这代码。 首先需要先找到一些图片&#xff0c;你的男朋友或者女朋友的图片放在一个文件夹&#xff0c;这里小编用Python爬取了一些网上图片&#xff0c;不做过多介绍 先看我的设置思路 我的项目结构如…
阅读更多...
如何做一个自己的网站？

如何做一个自己的网站？

如何做一个自己的网站&#xff1f; 1、申请一个域名&#xff0c;可以从阿里云或者腾讯云申请一个&#xff0c;不是很贵整个便宜的也就几十块一年。 https://wanwang.aliyun.com/?spm5176.8142029.digitalization.2.3dbd6d3eB3bb2a 2、购买一个服务器&#xff0c;同样从阿里云…
阅读更多...
Python 做一个属于自己的web网站

Python 做一个属于自己的web网站

首发公众号&#xff1a;AI悦创 目录 1、掌握前端技术开发精髓 2、Django 的安装和基础使用 3、理解 MTV 模型 4、制作首页 1、掌握前端技术开发精髓 网页内容&#xff0c;由三部分组成&#xff0c;分别是 html、css 和 javascript 。 html 是网页面部分css 是美化网页的操作…
阅读更多...
结构（structure）创建——直接赋值法与使用struct函数创建法。

结构（structure）创建——直接赋值法与使用struct函数创建法。

一些不同类型的数据组合成一个整体&#xff0c;虽然各个属性分别具有不同的数据类型&#xff0c;但是它们之间是密切相关的&#xff0c;结构&#xff08;(Structure&#xff09;类型就是包含一组记录的数据类型。结构类型的变量多种多样&#xff0c;可以是一维数组、二维数组或…
阅读更多...
openswan中的in_struct和out_struct函数

openswan中的in_struct和out_struct函数

openswan中的in_struct和out_struct函数 文章目录 openswan中的in_struct和out_struct函数1. 花絮2. in_struct代码实现分析3. 它到底几个意思&#xff1f;3.1 为什么这么做&#xff1f;3.2 它的实现原理3.2.1 sakmp头部描述说明3.2.2 sakmp头部载荷取值范围3.2.3 isakmp头部中…
阅读更多...
struct的构造函数

struct的构造函数

C之struct构造函数 (2010-10-19 15:04:47) 转载 标签&#xff1a; cpp struct 构造函数 校园 分类&#xff1a; C/C_PlusPlus 在网络协议、通信控制、嵌入式系统的C/C编程中&#xff0c;我们经常要传送的不是简单的字节流&#xff08;char型数组&#xff09;&#xff0c;而是多…
阅读更多...
C++ | (struct)结构体变量作为函数参数调用的方法小结

C++ | (struct)结构体变量作为函数参数调用的方法小结

结构体变量、结构指针变量、结构数组作为函数的参数应用实例分析 struct stud{long int num;float score;}; /*结构体变量作为函数的参数&#xff0c;修改之后的成员值不能返回到主调函数*/ void funvr(struct stud t){t.num2000101;t.score71.0;} /*结构体数组作为函数的参数…
阅读更多...
[C++]试一试结构体struct node的构造函数

[C++]试一试结构体struct node的构造函数

可直接点击跳转到构造函数处 结构体概念定义结构体定义结构体及结构体变量结构体变量的特点成员调用成员函数调用 结构体的构造函数Upd1Upd2Upd3 结构体概念 在实际问题中&#xff0c;一组数据往往具有不同的数据类型。 例如&#xff1a;人口大普查时&#xff0c;需要记录每一…
阅读更多...
struct构造函数 c++

struct构造函数 c++

(做到了一个题目&#xff0c;题目本身不重要&#xff0c;就是看到了大佬的代码&#xff0c;用了struct的神奇语法&#xff0c;这样一来代码十分简洁&#xff0c;看着舒服。) //待我学会了再来ಠ_ರೃ2021.2.7日晚 啊我好像会了QwQ 在struct内部写构造函数&#xff0c;实现str…
阅读更多...
c++中struct构造函数

c++中struct构造函数

构造函数&#xff0c;说白了&#xff0c;就是初始化。 具体的打法是这个样子的&#xff1a; struct node{//构造函数node()//形参表{//内容} };例子&#xff1a; struct node{node(int c){xc;yz0;}int x,y,z; };当然&#xff0c;他既然作为一个函数&#xff0c;那么在里面自然…
阅读更多...
MATLAB struct函数(结构体数组)

MATLAB struct函数(结构体数组)

文章目录 语法说明输入参数示例例1: 在结构体中存储相关数据变量例2: 具有一个字段的结构体例3: 具有多个字段的结构体例4: 带有空字段的结构体例5: 包含元胞数组的字段例6: 空结构体例7: 嵌套结构体 语法 s struct s struct(field,value) s struct(field1,value1,...,fiel…
阅读更多...
常见的等价无穷小代换

常见的等价无穷小代换

阅读更多...
常用的等价无穷小代换

常用的等价无穷小代换

补充&#xff1a;
阅读更多...
常用等价无穷小及例题

常用等价无穷小及例题

阅读更多...
高数:常用等价无穷小

高数:常用等价无穷小

阅读更多...
常用的等价无穷小

常用的等价无穷小

阅读更多...
等价无穷小的替换条件

等价无穷小的替换条件

等价无穷小的替换条件&#xff1a; 拓展&#xff1a; 常用等价无穷小&#xff1a;x趋于0时&#xff0c;x和sinx是等价无穷小&#xff1b;sinx和tanx是等价无穷小&#xff1b;tanx和ln(1x)是等价无穷小&#xff1b;ln&#xff08;1x&#xff09;和ex-1是等价无穷小&#xff1b;…
阅读更多...
常见的几个等价无穷小

常见的几个等价无穷小

当时有&#xff1a; 1、sinx~x 2、tanx~x 3、arcsinx~x 4、arctanx~x 5、ln(1x)~x 6、~x 7、~ 8、~ax 9、~xlna 补充&#xff1a; 1、等价无穷小的定理&#xff1a;两个无穷小之比的极限为1&#xff1b; 2、等价代换适用于因子&#xff0c;不适用于代数式中的和差&…
阅读更多...
等价无穷小替换及其习题 笔记

等价无穷小替换及其习题 笔记

等价无穷小替换https://www.bilibili.com/video/BV1eU4y1F7W4/?spm_id_from333.788.recommend_more_video.1 幂函数等价无穷小替换尤为重要 下列基本公式及其定理&#xff1a; 在求极限x趋于0&#xff0c;洛必达前先看有没有等价无穷小替换的机会 推广形式&#xff1a; 注意…
阅读更多...
推荐文章

Copyright @ 2022~2023