聚BT浏览器扩展自定义网站从入门到精通2-HTTP请求类型NEWTAB、NEWTAB_IFRAME-出家如初,成佛有余

聚BT浏览器扩展自定义网站从入门到精通2-HTTP请求类型NEWTAB、NEWTAB_IFRAME

产品 admin 213浏览 0评论

在《聚BT浏览器扩展自定义网站从入门到精通1-HTTP请求类型GET、GET_CUSTOM》中介绍了聚BT浏览器扩展自定义网站的GET、GET_CUSTOM两种HTTP请求类型,这篇重点介绍新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)两种类型。

为何搞出新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)两种类型?

这两种类型的典型使用场景:

1、网站使用了AJAX请求,实际的搜索结果是异步加载,例如腾讯音乐、虾米等。

2、网站对HTTP 请求做了加密、特殊编码处理,例如music.163.com、知网CNKI等。

这两种类型场景,都涉及多次HTTP请求-响应交互,而XMLHTTPREQUEST只能处理单一的请求->响应交互,要处理以上复杂场景,只能采用分析多次请求报文和页面源文件代码,极为繁琐,对应网站一改版,只能重新调整,方法很难通用。此种方案对普通用户门槛过高(对程序猿也是痛苦的事),因此对页面请求过于复杂的网站,抛弃直接使用XMLHTTPREQUEST的方案。

由于chrome 扩展中不能像Headless Chrome那样,给出一个URL,等页面所有内容装载完后(包括AJAX、CSS、Javascript文件)再解析。Chrome也不允许像Firefox那样的隐藏tab功能(tabs.hide)。于是new tab/popup window成为唯一选择。相对于popup window,new tab体验上相对好些,因此针对以上两种场景的网站,采用新标签页(NEWTAB)的方案。

由于有些网站,页面包含了iframe,在通过 chrome.tabs.sendMessage发送消息给页面时候,所有的iframe都会接收到请求,为区分对应的iframe,因此将NEWTAB分为:新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)两种类型。

简单地说,新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)的区别在于:

新标签页(NEWTAB)适用于页面无iframe的场景。

新标签页-iframe(NEWTAB_IFRAME)适用于页面有iframe的场景。

 

自定义站点界面与新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)相关的重点设置项

在用户新增/修改自定义站点界面中,与新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)相关的重点设置项主要包括:

1、HTTP请求类型

2、页面CSS选择代码

3、网站搜索代码(searcher)

4、网站解析代码(parser)

 

页面CSS选择代码

由于用对应的搜索URL作为目标地址,新打开标签页搜索,需要判断页面是否完成装载。聚BT浏览器扩展会使用“页面CSS选择代码”的值作为判断依据,轮询标签页装载情况。

为避免页面装载不成功情况(例如网站down掉),聚BT浏览器会等待10秒(轮询频次为1秒,轮询10次),失败则返回。

页面CSS选择代码遵循标准的 CSS Selector。常用的CSS Selector及实际例子,后面文档会以案例形式说明。

 

新标签页(NEWTAB)、新标签页-iframe(NEWTAB_IFRAME)适用的HTTP 请求类型

大部分情况下,NEWTAB、NEWTAB_IFRAME都为GET类型,也即在请求URL包含了搜索关键词。

个别网站为POST,也即在URL没有包含任何搜索关键词,需要打开标签页后以POST类型提交搜索请求。

网站搜索代码(searcher)

由于NEWTAB、NEWTAB_IFRAME 中需要自定义searcher的网站较少,这里暂不讲解,等入门后,再举例子说明NEWTAB、NEWTAB_IFRAME 自定义searcher的用法。

对大部分网站,直接保持此输入项为空。

网站解析代码(parser)

parser与GET、GET_CUSTOM在整体处理逻辑上没有差别,但仍然有一些差异。

以music.163.com的parser为例

function music163Parser(url, source, keyword) {
  const elements = document.querySelectorAll("div.item div.sn div.text a:nth-child(1)");
 
  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;
      if (href && text) {
        hrefs.push({ link: href, linkText: text, desc: desc, source: source, keyword: keyword, url: url, type: "music" });
      }
    }
  }

  return hrefs;
}

对照一下动漫花园的例子

function dmhyParser(content, url, source, keyword) {
  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;
      if (href && text) {
        hrefs.push({ link: href, linkText: text, desc: desc, source: source, keyword: keyword, url: url, type: "acg" });
      }
    }
  }
 
  return hrefs;
}

最大差别在于:对document的获得上。
NEWTAB、NEWTAB_IFRAME直接用document
而在GET/GET_CUSTOM中,是

  let myDocument = documentFactory(content);
  const elements = myDocument.querySelectorAll("tr td.title a");

也即在GET/GET_CUSTOM中,用searcher的搜索结果content构建自己的document,以使用CSS Selector。而在NEWTAB、NEWTAB_IFRAME直接使用了当前window的document。

再次强调一下,在用户自定义界面,在自定义界面的”网站解析代码“字段,不需要输入函数名,只需要输入函数体部分,也即:

  
  const elements = document.querySelectorAll("div.item div.sn div.text a:nth-child(1)");
 
  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;
      if (href && text) {
        hrefs.push({ link: href, linkText: text, desc: desc, source: source, keyword: keyword, url: url, type: "music" });
      }
    }
  }

  return hrefs;

这一讲先到这儿,下一讲继续讲解网站请求类型POST。

转载请注明:出家如初,成佛有余 » 聚BT浏览器扩展自定义网站从入门到精通2-HTTP请求类型NEWTAB、NEWTAB_IFRAME

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址