How I browse the Web with uBlock (Hard Mode)
How I browse the Web with uBlock (Hard Mode)
我是如何使用 uBlock（硬核模式）浏览网页的
Figure 1: Actually I surf with Images off <32K> 图 1：实际上我是在关闭图片的情况下冲浪的 <32K>
I have been asked quite a few times, whenever I show my browsing setup to people, “Why don’t you use the web as a normal user?” Well… Isn’t it normal to see or read what you actually want, without all the crap ads & trackers being shoved down our throat by every site on the web? 每当我向别人展示我的浏览配置时，总会被问到：“你为什么不像普通用户那样上网呢？”嗯……难道不被每个网站强行塞满垃圾广告和追踪器，只看或只读自己真正想看的内容，这不才是正常的吗？
Actually, my first choice to browse the web are text based browsers like eww, links, offpunk. chawan is nice too (It is more featureful than the others I mentioned). I use librewolf browser for normal browsing, part of it because I help maintain it for guix but if you want more customized and personal experience you should go with using user.js and profiles.json configuration setups. 事实上，我浏览网页的首选是基于文本的浏览器，如 eww、links 和 offpunk。chawan 也不错（它比我提到的其他浏览器功能更丰富）。我使用 librewolf 浏览器进行日常浏览，部分原因是我在为 guix 维护它，但如果你想要更定制化、更个性化的体验，你应该使用 user.js 和 profiles.json 配置。
Anyway, all it takes is one comment to motivate someone to write something, So with this I want to share how I browse the web with the help of Ublock, Redirector and Localcdn. Note: The images in this piece are dithered to reduce bandwidth for the visitors, you can go the original image by clicking on it. Also caption also have sizes of both images, like this:
Ublock Origin
Ublock Origin
Ublock origin is fundamental to my online presence over the Internet, I won’t use a browser it without it, period. It is a Wide Spectrum Content Blocker that means it can not only block ads and tracker but other content on a webpage as well using filters and rules. Ublock Origin 是我互联网在线体验的基础，没有它我绝不会使用任何浏览器。它是一个广谱内容拦截器，这意味着它不仅可以拦截广告和追踪器，还能通过过滤器和规则拦截网页上的其他内容。
Ublock’s origin is fully supported only in Firefox and its derivatives, there are some chromium browsers like helium and ungoogled-chromium which still supports MV2 version of Ublock otherwise you will need to use Ublock Origin lite in chrome which I won’t touch. Install it using gnuzilla or sources listed on the its Repo. I would not go into detail explaining each option because that what Ublock’s wiki is for that and its everything you need. Also Pin the extension to the toolbar, you will need it. Ublock Origin 仅在 Firefox 及其衍生版中得到全面支持。虽然像 helium 和 ungoogled-chromium 这样的一些 Chromium 浏览器仍支持 MV2 版本的 Ublock，但否则你将不得不使用 Chrome 上的 Ublock Origin Lite，而我是绝不会碰它的。请使用 gnuzilla 或其仓库中列出的源进行安装。我不会详细解释每个选项，因为那是 Ublock 维基百科的作用，那里有你需要的一切。另外，请将该扩展固定到工具栏，你会用到的。
Setting Defaults
设置默认值
Open the Ublock dashboard, by opening the Ublock Ui popup (by clicking the settings icon) or doin Ctrl+Shift+A and opening setting from there. Every pane in the Dashboard have a Book Icon on the top right, you can click on the to go to the related wiki entry for that. 打开 Ublock 面板，可以通过打开 Ublock UI 弹出窗口（点击设置图标）或按下 Ctrl+Shift+A 并从那里打开设置。面板中的每个窗格右上角都有一个书本图标，点击它即可跳转到相关的维基条目。
Go to Setting Pane > Check all the four options 前往“设置”窗格 > 勾选以下四个选项： [] Block media elements larger than KB [] 拦截大于 KB 的媒体元素 [] Block remote fonts [] 拦截远程字体 [] Disable JavaScript [] 禁用 JavaScript [] I am an advanced user [] 我是高级用户
Figure 2: Ublock’s Setting pane <8.0K> <40K> 图 2：Ublock 的设置窗格 <8.0K> <40K>
Enables Filters > Go to Filter list pane -> In Annoyance area -> [] Enable uBlock Filter -> Import oisd and hagezi blocklists (people maintaining filter lists have my utmost respect, seriously its these lists that are making our browsing experience 1000 times better) 启用过滤器 > 前往“过滤器列表”窗格 -> 在“烦扰”区域 -> [] 启用 uBlock 过滤器 -> 导入 oisd 和 hagezi 拦截列表（维护这些过滤列表的人值得我最高的敬意，说真的，正是这些列表让我们的浏览体验提升了 1000 倍）
https://big.oisd.nl https://cdn.jsdelivr.net/gh/hagezi/dns-blocklists@latest/adblock/ultimate.txt
Figure 3: Ublock’s Filter Pane <8.0K> <15K> 图 3：Ublock 的过滤器窗格 <8.0K> <15K>
Disable Third Party
禁用第三方内容
Go My Rules Tab > In Temporary Rules pane, paste this > Click save > Click Commit > The rules will Appear in Permanent Rules 前往“我的规则”选项卡 > 在“临时规则”窗格中粘贴以下内容 > 点击保存 > 点击提交 > 规则将出现在“永久规则”中：
-
- 3p block
-
- 3p-script block
-
- 3p-frame block
Figure 4: Rules pane <16K> <100K> 图 4：规则窗格 <16K> <100K>
Add Shortcuts
添加快捷键
Go to about:addons (Ctrl+Shift+A) -> Setting Icon -> Manage Extension Shortcuts 前往 about:addons (Ctrl+Shift+A) -> 设置图标 -> 管理扩展快捷键
Figure 5: Extension Shortcut Window <8.0K> <64K> 图 5：扩展快捷键窗口 <8.0K> <64K>
Now visit any site you want, when you open the Ublock Ui popup, you will be able to see what third party a that website connecting to. Its such a super power. 现在访问任何你想要的网站，当你打开 Ublock UI 弹出窗口时，你就能看到该网站正在连接哪些第三方内容。这简直是一种超能力。
Ublock Hard Mode
Ublock 硬核模式
What we have done until now is enabled Ublock Hard Mode, Now try visiting some sites that you use daily and see if that breaks or not. We are going to see how to unbreak sites soon. 到目前为止，我们已经启用了 Ublock 硬核模式。现在尝试访问一些你日常使用的网站，看看它们是否还能正常工作。我们很快就会了解如何修复这些网站。
Dynamic Filtering
动态过滤
By enabling “I am an Advanced User”, we have enabled Dynamic Filtering, PLEASE READ THAT PAGE!!! Why I am screaming at you is because this page explains everything you need to get started using Ublock in hard mode, and I don’t want to duplicate thing that are already explained really well. 通过启用“我是高级用户”，我们已经启用了动态过滤功能。请务必阅读该页面！！！我之所以大声疾呼，是因为该页面解释了你在硬核模式下使用 Ublock 所需的一切，我不想重复那些已经解释得非常好的内容。
You MUST also read about Filters and Rules as these are the fundamental elements of Ublock Origin. What we create with Dynamic Filtering are Rules but all the custom list we imported are Filters, You can create your own filters as well. SyntaxMeaningsThatAreActuallyHumanReadable is a very nice resource on Filters Syntax. 你还必须阅读关于“过滤器”和“规则”的内容，因为它们是 Ublock Origin 的基本要素。我们通过动态过滤创建的是“规则”，而我们导入的所有自定义列表都是“过滤器”，你也可以创建自己的过滤器。《SyntaxMeaningsThatAreActuallyHumanReadable》是关于过滤器语法的一个非常好的资源。
Filters are static and need to be compiled before ahead of time, so it take more memory. You can take a look at differences between different filtering types to see their advantage and disadvantages. See the Overview of uBlock’s network filtering engine to see how a request in handled. 过滤器是静态的，需要提前编译，因此会占用更多内存。你可以查看不同过滤类型之间的差异，以了解它们的优缺点。请参阅“uBlock 网络过滤引擎概述”以了解请求是如何被处理的。
Element picker and Zapper
元素选择器和 Zapper
These both tools allow you to block elements, basically they are the easier version of going into devtools, inspecting element and then deleting it, the differences is that zapper creates temporary filters and picker creates permanent one. 这两个工具都允许你拦截元素，基本上它们是进入开发者工具、检查元素然后删除它的简化版。区别在于 Zapper 创建的是临时过滤器，而选择器创建的是永久过滤器。
What is going behind my browser?
我的浏览器背后发生了什么？
Now comes a the thing every curious user would like to see, What is actually going behind a site?. That’s what the Ublock Logger is for, Open it via clicking on extention and choosing the logger option or through shortcut (Ctrl+Y). 现在到了每个好奇的用户都想看的东西：网站背后到底发生了什么？这就是 Ublock 日志记录器（Logger）的作用。通过点击扩展并选择日志选项，或使用快捷键 (Ctrl+Y) 即可打开它。
Figure 6: Ublock’s Logger <80K> <588K> 图 6：Ublock 的日志记录器 <80K> <588K>
Here you can see what’s actually going on, what request, image, font is blocked, what is allowed, what is being requested in realtime. This is very useful in unbreaking the site by enabling just what is need to function the site by seeing the logs. You can also filter, search, reload and open the toolbar by clicking the Ublock icon, It is really helpful. 在这里，你可以实时看到正在发生的事情：哪些请求、图片、字体被拦截，哪些被允许，以及正在请求什么。这对于通过查看日志仅启用网站运行所需的内容来修复网站非常有用。你还可以通过点击 Ublock 图标进行过滤、搜索、重新加载和打开工具栏，这真的非常有帮助。
When you click on a element a popup will open below, it contains three tabs: 当你点击一个元素时，下方会弹出一个窗口，其中包含三个选项卡：
Details: This contains various details about the request. 详情：包含有关该请求的各种详细信息。
Figure 7: Logger’s detail pane <8.0K> <36K> 图 7：日志记录器的详情窗格 <8.0K> <36K>
Rules: This shows the rule of the selected element. 规则：显示所选元素的规则。
Figure 8: Logger’s rule pane <4.0K> <32K> 图 8：日志记录器的规则窗格 <4.0K> <32K>
Static Filter: Through This pane you can create static Filter, this allows very granule filtering of the elements. 静态过滤器：通过此窗格，你可以创建静态过滤器，这允许对元素进行非常细粒度的过滤。
Figure 9: Logger’s Filter pane <8.0K> <48K> 图 9：日志记录器的过滤器窗格 <8.0K> <48K>
DOM Inspector: Ublock logger also comes with its own DOM Inspector which helps in creation of cosmetics filters, You can access it by clicking the </> icon. DOM 检查器：Ublock 日志记录器还自带 DOM 检查器，有助于创建外观过滤器。你可以通过点击 </> 图标来访问它。