聚BT浏览器扩展技术架构

jubt 2020-10-10 4967

在《聚合最优秀的资源,赋能个性化垂直搜索,聚BT 浏览器扩展招募内测

》中阐述了聚BT浏览器扩展产品的需求缘起,聚BT浏览器扩展已经迭代了7个版本,即将告别内测,正式公测。

聚BT浏览器扩展提供了强大、简单的二次开发功能,以期通过社区的力量完善产品。为帮助有技术基础的同学熟悉聚BT浏览器扩展的二次开发,近期会补充一些二次开发功能。

先介一下绍聚BT浏览扩展的技术架构。

正如在《聚合最优秀的资源,赋能个性化垂直搜索,聚BT 浏览器扩展招募内测》提到的:

聚BT浏览器扩展的核心思路:

1、以聚BT 精选的资源站作为搜索源

2、用户在浏览器端输入搜索关键词,聚BT浏览器扩展在后台自动调用这些资源站的搜索功能进行搜索,并在浏览器端聚合搜索结果,以统一的形式呈现出来

3、系统内置上百个资源站,用户也可以自定义需要加入搜索的站点

粗俗地说:聚BT浏览器扩展的作用就是:把用户逐个打开网站,输入关键词搜索的过程自动化了。

因此聚BT浏览器扩展核心功能都在用户的浏览器通过扩展形式完成,唯一与服务器有交互的就是网站更新部分。

 

聚BT浏览器扩展遵照一个chrome浏览器(后续会支持Firefox,基本类似)典型架构:聚BT浏览器扩展主要由Background、Content Script、PopUp、搜索界面基本份组成,这几部分通过message进行交互。

Background

background核心模块主要包括Searcher、Parser、Requester、搜索结果聚合(搜索主函数模块),也是浏览器扩展最核心的功能模块。

每一个资源站都算是一个搜索引擎。

每一个网站的处理都包括搜索search、解析parse两个动作,也即:调用网站本身的搜索功能搜索,然后对搜索结果进行解析,得到搜索结果。

系统核心流程:

1、用户打开聚BT浏览器扩展,浏览器扩展从服务器加载最新的网站列表,如果有更新,更新本地缓存。如果更新失败,从本地装载搜索引擎

2、用户在搜索界面输入搜索关键词,搜索请求通过message 提交给Background搜索模块

3、Background搜索模块从网站列表中选取当次参与搜索的网站(搜索引擎)

4、搜索模块根据网站属性,看采用WebWoker模式或New Tab模式发起搜索请求,每一个搜索请求都作为Promise.all的一个Promise

4.1、如果为WebWorker模式,则创建WebWorker,通过XMLHTTPREQUEST ,发起搜索请求

4.2、如果为New Tab模式,则新创建一个Tab页,发起搜索请求

5、搜索结果返回给主线程的搜索模块

6、主线程搜索模块调用对应网站的Parser,对返回的结果进行解析

7、主线程的搜索模块通过Promise.all等待所有的搜索结果完成

8、主线程搜索模块聚合搜索结果,返回给搜索界面

9、用户滚动翻页,调用下一批网站继续搜索

系统请求类型

常用的标准的HTTP请求主要包括GET、POST两种类型,其他像PUT、DELETE等主要应用于RESTFUL API场景下,可以用GET、POST方式涵盖。

聚BT浏览器扩展将请求类型细分为如下5种:

聚BT浏览器扩展将请求类型细分为如下5种:

GET-缺省(GET):标准的GET请求

GET-自定义(GET_CUSTOM):用户自定义GET请求代码。主要应用在用户自定义网站时候适用。

新标签页(NEWTAB):以指定的搜索请求URL为地址,打开新标签页

新标签页-iframe(NEWTAB_IFRAME):以指定的搜索请求URL为地址,打开新标签页。与“GET-新标签页”相比,主要适用于网站有iframe的情况

POST:适用于搜索请求以POST进行的网站。

其实对于所有网站,用户二次开发都可以由GET、POST自定义方式解决。之所以要提供GET-新标签页、GET-新标签页-iframe,主要原因在于:由于XMLHTTPREQUEST只能处理单一http请求,对一些采用ajax或做了通信协议加密的网站,如果通过分析协议的方式较为麻烦,通用性也不强。


Searcher

Searcher包括三类:defaultSearcher、系统缺省内置某个网站的searcher、用户自定义的searcher。

其中defaultSearcher封装了XMLHTTPREQUEST请求,输入参数为搜索请求URL串,适用于标准GET请求。

系统缺省内置某个网站的searcher,例如动漫花园dmhySearcher,封装了对应网站的搜索请求。系统缺省内置的网站包括GET-缺省、GET-新标签页、GET-新标签页-iframe、POST几类。

用户自定义searcher,是用户通过管理界面自定义的网站的searcher

Parser

Parser包括两类:系统缺省内置某个网站的Parser、用户自定义的Parser。

系统缺省内置某个网站的Parser,例如动漫花园dmhyParser,封装了对应网站的解析方法。

用户自定义Parser,是用户通过管理界面自定义的网站的Parser。

 

PopUp

主要提供用户对搜索参数的设置、自定义搜索网站、自定义搜索分类

Content Script

主要用于GET-新标签页、GET-新标签页-iframe类型网站的搜索请求(Searcher)、搜索结果解析(Parser)


最新回复 (0)
返回
发新帖