在网上搜索后才发现有那么多人有同样的经历，在 Reddit 和 Stack Overflow 上有大量的帖子在讨论如何恢复丢失的标签数据。而在 Chrome 商店也可以看到很多一星评价，它们大都是这样开头的：“I love this extension until I lost all my saved tabs suddenly…”。

真是荒唐，一个用来保存标签页的工具，却没有提供一个可靠的存储机制。从大量评论来看，维护者是不负责任的，从来没有回复过反馈信息，官方文档也没有任何相关说明。OneTab 将数据存储在浏览器的本地存储中，文件位置大概在 AppData\Local\Google\Chrome\User Data\Default\Local Storage\ 目录下，而浏览器有可能会重写这里的文件。旧版本使用 SQLite 存储数据，新版本换成了 LevelDB，数据保存在 leveldb 目录下。或许可以尝试从这个目录下的文件导出数据，但暂时不清楚是否还存储了其他扩展的数据，尝试了几个工具，没能打开文件。因为不想为它浪费更多的时间，就此作罢。

这个扩展不值得信任，对于正在使用这个扩展的朋友，建议每次存档标签页以后都手动导出到本地文件进行备份或改用其他同类工具（比如 Tab Outliner 或 Qlearly）。扩展本身提供了导出的功能，但导出的数据为纯文本，会丢失时间戳、分组名称、锁定和加星状态，也有人建议将 OneTab 页面作为网页保存来备份，或是使用网盘同步 leveldb 目录。

虽然是件坏事，但也有积极的一面。保存了几千个待读的标签页本身就说明了处理信息方式的不合理。这些“觉得有用但是目前没有时间处理”的标签页，在过一段时间后重新来看，大部分都变得没用了，不会再去浏览。尽管我一再提醒自己尽快处理掉这些积攒的标签页，但是却迟迟没有动身，直到 OneTab “自我了结”。这次数据丢失可以看做一个改变信息处理方式的契机，我决定停用这个扩展，尝试养成每晚清空标签页的习惯，并试着建立一个更好的信息处理机制。

忽然想起来，在使用 OneTab 之前积攒的大量书签还没有处理，而 Pocket 里面还躺着几百个待读的网页……

Update 2019/10/23

换了新电脑后又开始继续用 OneTab 了（同时搭配 Tab Outliner），不过这次采取了备份措施，每次点完存档后都会手动导出标签页信息到网盘同步的文本文档里。打开大量标签页直到电脑死机、存档大量标签页但不再回顾处理的坏习惯还没有改掉。目前标签页数量 963。

Update 2020/11/24

弃用 OneTab 大概有半年了，目前在用 Tab Outliner，免费版也支持备份数据到 Google 硬盘（不过需要手动备份）。同时也开始定期清理用不到的标签页，不过此前用 OneTab 备份在 TXT 文件里等待整理的几千个标签页也许再也不会打开了。

在Selenium中，为这两个浏览器开启headless模式的方式基本相同：

Chrome：

from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_argument('headless')
driver = webdriver.Chrome(options=options)

Firefox：

from selenium import webdriver

options = webdriver.FirefoxOptions()
options.add_argument('headless')
driver = webdriver.Firefox(options=options)

我提交的PR#5120添加了和Chrome相同的导入接口，如果你使用Selenium小于3.8.0版本，则需要将上面的webdriver.FirefoxOptions()替换为webdriver.firefox.options.Options()。

另外，你也可以使用环境变量MOZ_HEADLESS 来为Firefox开启headless模式：

import os
from selenium import webdriver

os.environ['MOZ_HEADLESS'] = '1'  # <- this line
driver = webdriver.Firefox()

本文基于我在Stack Overflow的这篇回答：https://stackoverflow.com/a/47481793/5511849

其实这篇文章的重点不在技巧，而是对网页和浏览器原理的实践。这些技巧都是建立在对这些原理的理解上。文章分三部分。分别是对构成网页文件的介绍、在浏览器中访问这些文件的方法、技巧示例。同时，这篇文章也形成了一个完整的学习过程。也就是：理解基础知识——尝试和实践——探索和应用。

提前剧透一下这篇文章能教会你什么：

• 不使用客户端在大多数音乐网站上下载音乐（比如豆瓣电台，百度音乐盒，酷我等等）
• 破除网络课离开页面自动暂停视频的限制
• 破除网页弹窗强制登记手机号的限制
• 破除网页的文本复制和图片保存限制
• 修改网页内容

事实上，知道了原理，你能做的事情远不止这些。

一、网页

假设你有一台电脑，安装了某个浏览器。你打开浏览器，在地址栏里输入了google.com，按下Enter，显示访问不了。好吧，这不好笑。换个例子，你又重新输了个网址：withlihui.com，也就是我的博客。按下Enter后屏幕上显示出了我的博客的主页。这中间发生了什么？（域名服务器之类的内容就先跳过，跟这篇文章没有太大关系，有机会再写一篇介绍一下。）

总的来说，你输入的地址其实可以看作是一个文件地址（脑海中浮现资源管理器地址栏），只是这个文件存放在我租用的服务器上面。你告诉浏览器要访问的文件地址，然后它读取了这些文件并显示出来。

一般的网页是由HTML文件、CSS文件以及JavaScript文件组成的，这三个文件共同合作，分别负责实现网页的基本内容（content）、页面样式（style）、功能效果（function）。按照知乎用户胖胖小的说法，如果把网页看作一个句子的话，HTML是名词，CSS是形容词，JavaScript是动词。好了，知道这么多就可以了，想知道的更深入一点可以去看w3school（中文）或MDN的文档。

二、浏览器

浏览器其实可以看作是一个文件查看器，事实上，它确实也可以读取本地文件，支持mp3，mp4，txt，pdf等文件。只不过一般用它来它读取构成网页的文件（HTML、CSS、JavaScript等），你在地址栏输入了一个文件地址（网站地址），浏览器找到那个地址上的HTML文件，然后读取相应的CSS和JavaScript文件，把网页显示出来。更重要的是，你还可以通过浏览器查看这些文件，也就是源代码。我下面讲到的技巧都是基于这一点上的。

本文以Chrome为例，其他浏览器方法大致相同。在浏览器界面按下F12，或是右键点击检查（ Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)），这时就会打开开发者工具（DevTools），如下图所示：

Chrome开发者工具（devtool）

几个下面示例会用到的标签含义：
Elements：HTML代码（上半部分）和CSS代码（下面的Styles）
Resources：网页文件所用到的资源，包括文件、数据库等。
Network：网页的加载情况，包括加载网页的各项请求和下载的资源，以及相应的时间。

标签左边的两个图标：
箭头：按下这个图标后，再在网页上点击一个元素，会查询到相应的HTML代码。（上图红色圈出）
移动设备：按下这个图标进入移动设备显示模式。

三、技巧示例

保存图片

大多数时候下，我们使用右键另存为来保存图片。可是有的时候，网站为了保护版权或是其他原因而“遮蔽”了这个功能，比如500px上的照片。

500px上的图片

这时我们可以在开发者工具里用小箭头选择这个图片，找到相应的代码位置，在图片代码上点右键选择“Open link in new tab”，然后就可以下载了。

图片对应的html代码

另外，在Resources的Images项里，还可以找到网页上加载的所有图片（大部分不是全尺寸原图）。

网站用到的所有图片

去除文字复制限制

有些网站限制了右键和选择文字的功能，这主要是通过JS代码来实现的。使用开发者工具，可以很容易的破除这种限制。比如在这个网页上，相关的功能都被屏蔽了。打开开发者工具，选择下方Styles标签旁边的Event listener。可以看到下面有很多被监听的事件，其中contentmenu代表右键菜单，selectstart代表选择文字。

event listener

把这两个事件下面的document去掉（点击remove），这时页面就恢复正常了。

保存网页为pdf

有时候我们想把网页存成pdf打印，但电脑又没有连接打印机，刚好也没有安装相应的插件，这时开发者工具就派上用场了。

打印我的博客主页示例

在想打印的页面按下Crtl+P，在预览页面上右键打开检查，找到图中的src属性，复制src的值（比如图中的chrome://print/4/0/print.pdf），然后粘贴在地址栏里打开就可以下载了。

保存音频

有时我们想下载某个音频，网站却没有提供下载选项，除了下载插件，也可以使用开发者工具来完成。在播放音乐之前，打开开发者工具中的Network标签，然后刷新一下页面（F5），开始播放音乐，这时可以看到加载的资源里有一条时间线很长的记录，那个一般就是你要找的音频文件。照旧，在那条记录上点击右键，选择“Open link in new tab”，会开始自动下载和播放。

下载豆瓣FM音乐

对有些使用特殊方法来引用资源的网站无效，目前测试成功的有豆瓣FM、百度音乐、酷我音乐、谷歌翻译录音。

修改网页信息

我们可以在本地修改网页上的信息。打开开发者工具，使用查询箭头点击页面上你要修改的字段，比如说百度首页的“百度一下”，定位到右边HTML代码中相应的位置。

修改百度首页的字段

双击“百度一下”字段，修改它，然后按下Enter键，就变成了下面这样：

修改后

再比如，定位到搜索框上面的图片，然后修改图片的src属性，将后面的值修改成google首页的图片地址（如果想要修改为本地图片的话，可以把网页下载下来，不细说了）。按下Enter就成这样了。

当然，除了和别人开玩笑外太大用处。一刷新就没了。

破除网络课离开页面暂停视频限制

一定有人很期待这个功能吧。如果课很好还是认真听一听（比如周海宏的音乐鉴赏）比较好，很烂的话就往下看吧。方法同样很简单，打开开发者工具后，依然是通过小箭头选择工具选择视频元素，定位到代码。然后清除id的内容，再按下回车就成功了。

双击红圈中的id值，删除后回车

原理就是，通过清除id，切断了页面元素（视频）和控制它的代码的联系（JavaScript），具体下一小节。另外要说明一下的是，刷新后网页代码会还原，所以需要再重新清除一下。

去除叠加窗口

这条还是很有用的，有了前面的基础知识，我们已经知道了网页的基本构成，也学会了如何查看网页的源代码。那么有一天我们想在某网站上下载一个文件，越过层层的障碍，注册了账户，添加了各种信息，结果回到下载页面又让我注册手机号……而且还没有关闭窗口的按钮，太流氓了。不仅如此，还定期显示这个窗口。

某网站上跳出的窗口

我是不会让流氓得逞的。定位到相应的HTML源代码，这些窗口在HTML是一个块（div），通过相应的class或id连接到对应的JS和CSS代码，我用小箭头工具选择填手机号的小窗口，然后发现整个窗口对应（最外层）的class是PhoneCertificationModal，清除掉，按下enter就会发现窗口不见了（如果无效可以再把id的值也清除掉）。

去除窗口

其实窗口并没有去除，只是因为没有了JS和CSS代码的支持，它就失去了页面效果，变成一堆字扭在一起，跑到页脚去了。

失去了css和js支持的孤单的html代码

可是网页这时是一片灰色，遮住了想要点击的内容。这时再用同样的办法，点击小箭头选择这个叠加的窗口，把相应的class清除清空。这时页面就恢复正常了。

和上面的更改网页信息一样，修改了之后只要点击刷新，网页就会恢复到原来的状态，所以不要害怕会玩坏：）

去除WordPress插件限制

比如说显示文章概要的插件会限制你readmore字段的字号，假如你想要设置的话就得花钱升级。这时可以在字段里插入HTML代码，自己设置字号大小。

去除文章概要插件的字号限制

很多论坛的评论就支持少量HTML代码，再早一些，有些网站没有限制评论支持的HTML代码，导致很多搞笑的事情出现，比如说占满整个屏幕的大字……

后记

以上这些内容建立在我现有的知识水平上，所以讲得还不够完善，欢迎指正。希望这篇文章能给感兴趣的人作一把小小的梯子（如果帮到了你，请告诉我）。你可以从下面的链接开始新的学习路程。

进阶

这些地方会给你提供更多帮助：
Chrome DevTools 文档【https://developers.google.com/web/tools/chrome-devtools/】
MDN（Mozilla 开发者网络）【https://developer.mozilla.org/zh-CN/】w3school【http://www.w3school.com.cn/index.html】