自定义get方法模板_聚BT浏览器扩展自定义网站从入门到精通4-HTTP请求类型为“GET-缺省” 的自定义网站例子...

前面3篇《聚BT浏览器扩展自定义网站从入门到精通1-HTTP请求类型GET、GET_CUSTOM》、《聚BT浏览器扩展自定义网站从入门到精通2-HTTP请求类型NEWTAB、NEWTAB_IFRAME》、《聚BT浏览器扩展自定义网站从入门到精通3-HTTP请求类型POST》讲解了聚BT浏览器扩展 HTTP请求类的GET、GET_CUSTOM以及NEWTAB、NEWTAB_IFRAME、POST5种HTTP请求类型。

可能很多没有太多技术基础的同学看到此处已经头大了，觉得要自定义一个网站太复杂了。其实之所以花费了大量时间讲解几种类型，主要是针对各种形形色色的网站需要。对于大部分网站只需要拷贝一下模板，然后修改一下CSS Selector就可以搞定，此类网站HTTP请求类型主要为GET类型的，包括GET、GET_CUSTOM、NEWTAB（GET类型）、NEWTAB_IFRAME（GET类型）。

原本计划介绍聚BT底层函数封装，考虑到大部分人并不需要入门就了解得如此深。因此我们后续几篇重点围绕自定义一个网站常用基础进行讲解。

下面以动漫花园（https://dmhy.anoneko.com ）为例，讲解自定义网站的典型步骤。

1、使用chrome浏览器打开 https://dmhy.anoneko.com

2、CTRL+Shift+I调出开发者工具（或者 菜单->更多工具->开发者工具）

3、切换到Network Tab

4、在搜索框输入搜索关键词：海贼王 ，回车搜索

5、此时地址栏变为：https://dmhy.anoneko.com/topics/list?keyword=%E6%B5%B7%E8%B4%BC%E7%8E%8B

而在Network Tab的第一个记录为：

Request URL：https://dmhy.anoneko.com/topics/list?keyword=%E6%B5%B7%E8%B4%BC%E7%8E%8B

Request Method：GET

一般而言，如果地址栏搜索框包含搜索关键词的，请求类型为GET类型，对应聚BT浏览器扩展的 GET、GET_CUSTOM、NEWTAB（GET类型）、NEWTAB_IFRAME（GET类型）。

6、在开发者工具中切换到Elements Tab

7、选中一条搜索结果的标题超链接，点击鼠标右键->检查（Inspect）

8、在Elements Tab，Ctrl+F以测试CSS Selector

使用CSS Selector的目的是，确定对应搜索结果列表每一条记录的超链接和链接文字。

这里我们输入：tr td.title>a

其中 tr td.title>a 是CSS Selector， 表示：

a、选择 tr 节点下class=”title”的td子节点

b、选择class=”title”的td子节点的a 节点，且为td的直接子节点。

如果CSS Selector为 tr td.title>a，则表示选择td节点下直接子节点为a的节点，共匹配了80条记录。

如果CSS Selector为 tr td.title a，则表示选择td节点下的所有a节点，不管层级，则共匹配了112条记录。

关于CSS Selector的基础，可以参考

https://www.runoob.com/cssref/css-selectors.html

https://www.w3schools.com/cssref/css_selectors.asp

9、获取href和链接文本

通过CSS Selector获得搜索结果对应的超链接后，可以用 element.getAttribute(“href”) 来获得对应的href

可以看出：搜索结果超链接对应的文字在<a href=””></a>中间

<a href="/topics/view/551552_ONE_PIECE_670_FINAL.html" target="_blank" one-link-mark="yes">
#<span class="keyword">海賊王</span>#ONE PIECE 第670話 FINAL</a>

简单起见，我们可以直接用Javascript的.innertText来获取对应的文字。10、自定义界面对应的“网站解析代码”

let myDocument = documentFactory(content);
const elements = myDocument.querySelectorAll("tr td.title>a");
 
let hrefs = [];
for (let element of elements) {
  let href = element.getAttribute("href");
  if (href) {
    href = relativeUrlToAbsolute(href, url);
    let text = element.innerText;
    let desc = keyword;
    //console.debug("parser.js xiaomapanParser href is: " + href + ", text is:" + text);
    if (href && text) {
      hrefs.push({ link: href, linkText: text, desc: desc, source: source, keyword: keyword, url: url, type: "acg" });
    }
  }
}
 
return hrefs;

可以看出，自定义“网站解析代码”的主要逻辑是：
a、使用 CSS Selector获得所有的搜索结果记录

const elements = myDocument.querySelectorAll("tr td.title>a");
 
 

b、for循环搜索结果记录，取得每一个搜索结果

c、用getAttribute(“href”)获得对应搜索结果的超链接

d、用innerText获得超链接的文本

11、自定义界面其他字段说明

网站唯一标识：

网站唯一标识，用于标识一个自定义网站，建议使用网站域名，例如http://dmhy.anoneko.com

网站英文缩写：

用于系统标识自定义网站的searcher、parser，需要保证唯一性。只能包含数字或英文字母，首字母不能为数字

网站名称：可以随便填写

搜索验证关键词：

聚BT扩展用于验证用户填写自定义字段是否正确，聚BT扩展会以搜索验证关键词作为关键词，调用对应的网站进行搜索，如果无搜索结果，则认为配置有误。因此请在对应的网站用关键词搜索一下，保证有搜索结果。

网站搜索地址：

这里填写https://dmhy.anoneko.com/topics/list?keyword=searchkeyword

在前面我们搜索动漫花园的url为 https://dmhy.anoneko.com/topics/list?keyword=%E6%B5%B7%E8%B4%BC%E7%8E%8B ，其中%E6%B5%B7%E8%B4%BC%E7%8E%8B 就是 海贼王 使用encodeURIComponent 以UTF-8编码后的字符串（验证工具 https://tool.chinaz.com/tools/urlencode.aspx）。

也即动漫花园搜索模式是：就是https://dmhy.anoneko.com/topics/list?keyword=搜索关键词

因此在网站搜索地址为 https://dmhy.anoneko.com/topics/list?keyword=searchkeyword ，用searchkeyword来标识用户输入的搜索关键词。

网站分类：

网站所属的类型，可以通过 设置->自定义分类 新增网站分类

HTTP请求类型：

这里选择：GET-缺省

搜索关键词编码：

对大部分网站都不需要填写。

此字段主要用于指定搜索关键词的编码方式。大部分网站都是采用encodeURIComponent。

当一些英文网站，如果有多个搜索关键词，多个搜索关键词间会采用诸如 +之类的符号连接多个关键词。

页面CSS选择代码：

此字段用于HTTP请求类型为 NEWTAB、NEWTAB_IFRAME 时候，验证搜索结果页面是否完成装载。对GET-缺省、GET-自定义、POST 不需要填写。

网站搜索代码：

此处，我们采用系统缺省的模板，不需要填写。

网站解析代码：

参见上面说明