小说章节合并插件-第一篇

接下来我们一起来编写一个浏览器插件，主要为了实际使用promise对象, 你别看js非常简单，容易入门但是其中的一些设计思想和方法还是非常让人着迷……

那么来吧，一起动手手撕js的一些难以让人理解的语言特性！

项目目的

有一个小说网站
(读读书吧)[https://www.dudu0.com/]
发现更新速度非常快，但是阅读体验特别割裂，一个章节往往分了好几个页，这样你没没有办法离开电脑前干其他事情，时间就浪费在翻页上了。

这个怎么能忍受，必须想办法解决才行。

那么我们的目标是打开某个小说页面之后插件自动下载小说的所有章节内容，而后在当前页面上生成一个下载按钮，这样我们就可以把这本小说全本下载到本地了。

分析网页源码

首先我们打开一本小说页面，比如这本
(我真不是坏男人：超级大塔克科比)[https://www.dudu0.com/xs104742/]
首先观察网址，发现格式是网址/xs小说ID/

接下来我们打开它的网页源代码看看如何入手，就像一个优秀的猎人首先观察猎物的基本情况，回答两个灵魂问题：

能不能动手？如果动手的话如何下手？

打开小说页面后右键菜单，检查或者f12打开开发者工具后切换到元素选项卡，然后我们就可以看到树状结构的网页dom了。

请注意你把焦点切换到某个章节上，然后在打开html 元素，这样我们默认就在章节网址元素上了，这个时候左光标键看看这个a元素的父元素是什么？

好了我们看到这是一个li元素，在看看li的父元素，发现是ul元素，而且这个ul元素的class值是chapter。

那么我们知道这些有什么用？我们知道浏览器提供了一堆操作html dom元素的方法，增删改查啥都能做，这样我们不是有了能修改网页的方法了么？

如果想要修改网页肯定需要知道网页长啥样，如果要改的话改哪里。

比如某个元素没有文本标签，那么我们首先要找到这个标签，而后在添加标签。

所以我们写前端脚本两个工作， 1.通过开发者工具分析网页源码， 2.根据分析结果修改网页源码，只要修改了网页源码就会马上看到结果了。

说起来容易，做起来就不是那么容易的事情了，比如网页无障碍优化。

编写浏览器插件

关于浏览器插件入门我推荐这本书
(Chrome扩展及应用开发)[https://www.ituring.com.cn/book/1472]
前半部分就是讲浏览器插件的，全本可以免费阅读，讲的真心不错，入门后在参考开发文档。

在合适的位置创建一个文件夹叫novelMerge，然后在里面创建一个叫manifest.json的文本文件，我想到还有一个同名文件也大名鼎鼎只不过是一个xml文件。

这个就是我们插件的最重要的文件了，内容如下

{
  "name": "novelMerge", 
  "version": "1.0", 
  "description": "小说章节合并", 
  "manifest_version": 2, 
  "content_scripts": [
  {
      "matches": ["*://www.dudu0.com/xs*"], 
      "js": ["main.js"]
    }
  ]
}

这个文件定义了插件的名称；版本和简短描述，而且指定在dudu0.com这个网站上运行main.js这个脚本文件，

接下来我们把插件的功能写在main.js文件里就可以了，浏览器一打开dudu0.com后开始执行这个脚本。

比如你可以随便写一个alert试试看，不过在此之前你需要加载插件。

这里我们用edge浏览器来作为我们的测试环境，打开扩展管理器，地址栏输入：
edge://extensions/
然后选中开发人员模式，在找到加载已经解压的扩展，选择我们的novelMerge文件夹就可以了，

没有错误的话你的插件已经在插件列表里了，而且已经开启，以后不要忘了修改扩展后回到这个页面点一下重新加载扩展。

请注意，我们可以发现在插件选项里有个错误按钮，其他插件没有，我们可以点进去瞧一瞧，

大概意思是当前版本的manifest文件快过时了，我们暂时不管他，不过我们发现了发生错误可以打开这个页面，当然我们看错误不用这么费劲，直接在开发人员工具里查看就可以了。

到此为止我们打开dudu0.com看看会不会出现alert对话框。如果出现了我们可以往下走了，如果没有看看上面哪里出现问题了。

此外大家可以从npm里找一找有没有好用的浏览器插件开发工具，总不能每次修改文件就重新加载一次插件吧，反正我本人就无所谓了。

分析要操作的网站页面

俗话说，知己知彼方能百战百胜，所以我们系统性全面的探查敌情。

我们打开某个章节得知小说的内容在一个div元素里，而且这个div元素的class值是nr_nr，你看这个是不是觉得特别亲切。

但是我们从这里还需要找一个下一页的地址，发现有好几个div元素class值叫nr_title，其中的第一个就是我们要找的，这里面包括了三个a元素，分别指向了上一页，返回目录和下一页。

插一句，分析这些网站我们发现这些网站的开发者的水平就那样，标识符命名比较混乱， nr_title这样的标记都出来了，所以有时候真心不需要妄自菲薄……

总结一下，分析小说的整个页面我们可以得出如下结论：

小说默认页面显示了最近若干章节，如果显示全部需要url后加上_p页号/或者_d页号/， p代表正序， d代表倒叙，每一页最多显示100章
我们可以通过class为page的div元素的文本里获取该小说总共有多少页，在跳转按钮的下方。
所有的章节列表在一个ul元素里，它的class等于chapter
每一个章节打开后有若干页面组成，正文位于某个div元素里，它的class等于nr_nr
我们可以通过一个div元素找到下一页，它的class等于nr_title，里面包含了一个指向下一页的a元素
此外这个网站访问一些不存在的页面没有返回404错误，而是该页面的默认页面，比如我们访问第300章的第10页，服务器返回第一页的内容，所以没有办法通过404来终止便利

编写这个扩展我们需要的所有信息就是这些，接下来我们想办法各个击破就大功告成……

不过这里不得不说，未完待续——

大家有空可以自己动手去试试，我这边估计到后天更新。