如何用 Python开发一个简单的 Webkit 浏览器_嵌入webkit内核开发浏览器

101 阅读7分钟

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

在这篇教程中,我们会用 Python 的 PyQt 框架编写一个简单的 web 浏览器。关于 PyQt ,你可能已经有所耳闻了,它是 Qt 框架下的一系列 Python 组件,而 Qt(发音类似“cute”)是用来开发 GUI 的 C++ 框架。

严格来讲, Qt 也可用于开发不带图形界面的程序,但是开发用户界面应该是 Qt 框架最为广泛的应用了。Qt 的主要优势是可以开发跨平台的图形界面程序,基于 Qt 的应用能够借助于各平台的原生性在不同类的设备上运行,而无须修改任何代码库。

更多Python视频、源码、资料加群683380553免费获取

Qt 附带了 webkit 的接口,你可以直接使用 PyQt 来开发一个基于 webkit 的浏览器。

我们本次教程所开发的浏览器可以完成如下功能:

  • 加载用户输入的url
  • 显示在渲染页面过程中发起的所有请求
  • 允许用户在页面中执行自定义的 JavaScript 脚本

牛刀小试

让我们从最简单的 PyQt 的 Webkit 用例开始吧:输入 url,打开窗口并在窗口中加载页面。

这个例子十分短小,连 import 语句和空行在内也只有 13 行代码。

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

当你通过命令行将 url 传给脚本时,程序会加载 url 并且在窗口中显示加载完成的页面。

现在,看似你已经有一个“命令行浏览器”啦!至少比 python 的 requests 模块强多了,甚至比 Lynx 还略高一筹,因为我们的浏览器还可以加载 JavaScript 脚本呢。但是目前为止还没有跟 Lynx 拉开差距,因为在启用浏览器的时候只能通过命令行传入 url。那么,必然需要通过某种方式把需要加载的 url 传入浏览器。没错,就是地址栏!

添加地址栏

其实地址栏的实现非常简单,我们只需要在窗口顶端加一个输入框就够了。用户在文本框中输入 url 之后,浏览器就会加载这个地址。下面,我们将用到 QLineEdit 控件来实现输入框。鉴于我们的浏览器现在有地址栏和浏览器显示框两部分,因此还要给我们的应用增加一个网格布局。

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

到这里,我们已经有一个浏览器的雏形啦!看上去和当年的 Google Chrome 还有几分相像呢,毕竟两者采用了相同的渲染引擎。现在,你可以在输入框中输入 url ,程序便会将地址传入浏览器,接着渲染出所有的 HTML 页面和 JavaScript 脚本并展示出来。

添加开发工具

一个浏览器最有趣也最重要的部分是什么?当然是各种各样的开发工具了!一个没有开发者控制台的浏览器怎么能算是浏览器呢?所以,我们的 Python 浏览器当然也要有一些开发者工具才行。

现在,我们就来添加一些类似于 Chrome 的开发者工具中 “Network” 标签的功能吧!这个功能就是简单地追踪浏览器引擎在加载页面的时候所执行的所有请求。在浏览器主页面的下方,我们将通过一个表来显示这些请求。简单起见,我们只会记录登录的 url、返回的状态码和响应的内容类型。

首先我们要通过 QTableWidget 组件创建一个表格,表头包括需要存储的字段名称,表格可以根据每次新插入的记录来自动调整大小。

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

想要追踪所有请求的话,我们还需要对 PyQt 的内部构件有更深入的了解。了解到,Qt 提供了一个 NetworkAccessManager类作为 API 接口,通过调用它可以监控应用加载页面时所执行的请求。我们需要自己编写一个继承自 NetworkAccessManager 的子类,添加必要的事件监听器,然后使用我们自己编写的 manager 来通知 webkit 视图执行相应的请求。

首先我们需要以 NetworkAccessManager 为基类创建我们自己的网络访问管理器。

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

在这里需要提醒大家的是, Qt 的某些实现并不像想象中那么简单明了,比如说从响应中获取状态码就十分繁琐。首先,你得把请求对象的类属性作为参数传入 response 的方法 .attribute() 中,.attribute() 方法的返回值是 QVariant 类型而非 int 类型。接着,需要调用内置函数 .toInt() 将其转换成一个包含两个元素的元组,最终得到响应的状态码。

现在,我们终于有了一个记录请求的表和一个监控网络的 manager,接下来只要把他们聚拢起来就可以了。

如何用 Python开发一个简单的 Webkit 浏览器,牛刀小试

 

现在,运行浏览器程序,在地址栏键入 url,就可以看到在主页面下方的记录表中记录下的所有请求。

如果你有兴趣的话,还可以为浏览器添加很多新的功能:

  • 通过content-type添加筛选功能
  • 添加记录表的排序功能
  • 添加计时器
  • 高亮显示出错的请求(比如说把错误信息置为红色)
  • 显示出更为具体的请求内容,比如说完整的头信息、响应内容、请求方法等。
  • 增加一个重复发送请求并加载出来的选项。比如说用户可以点击在记录表中的请求来重试请求。

其实还有太多的功能可以继续完善和改进,你可以一一尝试一下,这会是一个非常有趣而且收获良多的学习过程。但是如果想把这些功能都说完,估计都能写一本书了。所以限于篇幅,本文就不一一介绍了,感兴趣的朋友可以参考其他书籍和网上教程。

增加解析自定义 JavaScript 脚本的功能

在这里插入图片描述

感谢每一个认真阅读我文章的人,看着粉丝一路的上涨和关注,礼尚往来总是要有的:

① 2000多本Python电子书(主流和经典的书籍应该都有了)

② Python标准库资料(最全中文版)

③ 项目源码(四五十个有趣且经典的练手项目及源码)

④ Python基础入门、爬虫、web开发、大数据分析方面的视频(适合小白学习)

⑤ Python学习路线图(告别不入流的学习)

了解详情:docs.qq.com/doc/DSnl3ZG…