浏览器功能定制5：搜索引擎命令
在前面的探索中，主要做了两件事：一是将网页转为 Markdown，而是给浏览器添加了网络拦截能力。再加上 qutebrowser 本质上就是一个大 SDK。我在向解决信息过载问题继续迈进。
今天探索一个新的话题，创建一条新命令，打通搜索引擎。本文以 bing 搜索引擎为例。
基于 qutebrowser 实现流程如下：
- 跳转到搜索引擎
- 解析渲染后的 HTML，提取出信息条目
- 浏览下一页，重复 Step4
- 直至命中结束条件
扩展加载完毕的监听
在自定义命令中，拿到 AbstractTab 代表当前 Tab，调用 load_url 可以跳转地址。
但是对于页面加载完成的监听，AbstractTab 没有提供回调方法。因此修改 qutebrowser 代码，在 AbstractTab 中添加回调注册能力。
首先在 AbstractTab 添加一个数组属性，用于保存回调。
on_load_finish_cbs: List[Callable[[bool], None]] = []
在 AbstractTab 已有的槽函数中，遍历调用：
@pyqtSlot(bool)
def _on_load_finished(self, ok: bool) -> None:
assert self._widget is not None
if self.is_deleted():
return
# 新增
for cb in self.on_load_finish_cbs:
cb(ok)
# ……
置于回调的注册与删除，图省事，调用方直接访问 on_load_finish_cbs 即可。
这样，命令可以形成如下的框架：
def feed_bing(cur_tab: browsertab.AbstractTab,
keyword: str):
url = f"https://cn.bing.com/search?q={keyword}"
def on_load_finish(ok: bool):
cur_tab.on_load_finish_cbs.remove(on_load_finish)
if not ok:
return
cur_tab.on_load_finish_cbs.append(on_load_finish)
cur_tab.load_url(QUrl(url))
新命令 bing
接下来创建一条新命令，就叫 bing，其特点是通过交互式命令来输入关键词。
@cmdutils.register(instance='command-dispatcher', scope='window')
@cmdutils.argument('keyword')
def bing(self, keyword=None):
feed_bing(self._cntwidget(), keyword)
这样，在 qutebrowser 中输入 :bing ubuntu 即可跳转到搜索引擎。
提取页面元素
我能拿到 HTML。如何将页面内容高效提取出来呢？答案是 XPath。我的 XPath 技能仍然比较生疏，花了不少时间才提取成功，如果熟练的话，这个过程会很快。
封装函数：
def extract_info(html: str):
tree = etree.HTML(html)
results = tree.xpath('//ol[@id="b_results"]/li')
for result in results:
title = result.xpath('string(.//h2)')
url = result.xpath('.//h2/a[1]/@href')
if len(url) == 0:
continue
description = result.xpath('string(.//p)')
print("===================")
print(title)
print(url)
print(description)
print("===================")
效果：
===================
Install | Flutter
['https://docs.flutter.dev/get-started/install']
Web1 day ago · Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems.
===================
===================
安装和环境配置 - Flutter 中文文档 - Flutter 中文开发者网站 ...
['https://flutter.cn/docs/get-started/install']
WebAug 5, 2023 · Flutter安装和上手起步教程, 下载 Windows、macOS、Linux 和 ChromeOS 系统的 Flutter SDK。
===================
翻页
qutebrowser 中有一个神奇命令——navigate，它专门处理这种多页页面的上一页、下一页问题。
首先，通过 functools.partial 封装出一个简版的下一页函数：
next_page_func = functools.partial(self.navigate, 'next')
整体逻辑代码如下
cur_page = 0
def feed_bing(cur_tab: browsertab.AbstractTab,
keyword: str,
next_page_func: callable = None):
url = f"https://cn.bing.com/search?q={keyword}"
def on_load_finish(ok: bool):
global cur_page
cur_tab.on_load_finish_cbs.remove(on_load_finish)
if cur_page == 3:
cur_page = 0
return
if not ok:
return
def on_html(html: str):
global cur_page
print('extracting page: ', cur_page)
extract_info(html)
if cur_page < 3:
cur_page += 1
cur_tab.on_load_finish_cbs.append(on_load_finish)
next_page_func()
cur_tab.dump_async(on_html)
cur_tab.on_load_finish_cbs.append(on_load_finish)
cur_tab.load_url(QUrl(url))
注：代码有点乱，而且有全局变量不好维护，后续考虑封装成一个类。
翻页命令 navigate 实现原理
首先，browsertab 对 DOM 也有一层封装，并且支持 find_css 以 CSS 进行查询。代码如下：
browsertab.elements.find_css(
link_selector,
callback=_prevnext_cb,
error_cb=lambda err: message.error(str(err)))
_prevnext_cb 是一个回调。内部调用 _find_prevnext 寻找符合要求的元素。从注释中我们能理解它的规则：
"""Find a prev/next element in the given list of elements."""
# First check for <link rel="prev(ious)|next"> as well as
# e.g. <a class="nav-(prev|next)"> (Hugo)
简单理解为预制了一些规则，bing 就正好满足这一规则。
小结
在本文中我实现了:bing 命令，而且能够自动翻页。这个命令手动调用很方便，更多的是为后续进行自动化信息采集做铺垫，后者的价值更高。
