名校课程推荐 | MIT《CS 实用工具课程》-网页和浏览器

网页和浏览器

除了终端，你会发现你在网页浏览器上会花费大量时间。所以花点时间学会如何高效使用网页浏览器是值得的。

快捷方式

在浏览器中用鼠标点击不是最快的方式，熟悉掌握一些常见的快捷键长期来看很有用

  • Middle Button Click（单击中键）在新标签页中打开链接
  • Ctrl+T 打开一个新的标签页
  • Ctrl+Shift+T 重新打开最近关闭的标签页
  • Ctrl+L 选中搜索框的内容
  • Ctrl+F 在网页上查找。如果你经常需要这个功能，可以安装支持搜索正则表达式的扩展程序

搜索运算符

Web搜索引擎，比如Google、DuckDuckGo，提供搜索运算符支持更详细的网页搜索：

  • "bar foo"（为字段加上" "）搜索完全匹配的结果
  • foo site:bar.com（在网站前加上site:）在该网站搜索特定字词
  • foo -bar（在要排除的字词前加上-）从搜素结果中排除特定字词
  • foobar filetype:pdf 搜索该扩展名的特定文件
  • (foo|bar)（在各搜索查询字词之间加上|或者OR）组合搜索

从Google和DuckDuckGo这样的流行网页搜索引擎可以获得更多列表

搜索框

搜索框也是一个很强大的工具。大多数浏览器可以从网站推断出搜索引擎，并将它们存储起来，通过编辑关键字参数

此外，如果你拥有一个域名，可以通过你的注册商设置子域名转发。比如，我已经把 https://ht.josejg.com 映射到这个课程网站，这样，只要输入ht.，搜索框会自动完成。这种设置的另一个优点是，与书签不同，它们在所有浏览器中适用。

隐私扩展程序

由于广告和跟踪器的存在，现如今上网冲浪变得相当烦人。一个优秀的广告拦截器不仅可以拦截大多数广告内容，还可以拦截恶意网站，因为它们会被纳入常见的黑名单。它们有时还会通过减少执行的请求数量来减少页面加载时间。推荐几个此类浏览器插件：

  • uBlock origin (Chrome, Firefox)：基于预定义的规则拦截广告和跟踪器。你还可以在设置中启用黑名单，可以根据你的地区或浏览习惯启用更多黑名单，甚至可以安装来自网络的过滤器

  • Privacy Badger：自动检测并拦截跟踪器。比如，在你浏览不同网页的过程中，广告公司会跟踪你访问了哪些网站并建立你的画像

  • HTTPS everywhere是很棒的一个插件，它会自动跳转到网站的HTTPS版本。

你可以在这里找到更多此类插件。

样式自定义

Web浏览器只是运行在你设备上的另一种软件，因此你可以自己决定浏览器显示的内容或方式。自定义样式就是其中一种做法。浏览器会使用层叠样式表（通常简称CSS）确定网页呈现的样式。

通过查看源代码操作可以获取一个网站的源代码，并且可以对网站源码的内容和样式进行临时修改（这也是为什么永远不要相信网页截图）。

如果你想要永久覆盖浏览器网页的当前样式设置，那就需要用到插件。推荐 使用Stylus 插件（Firefox, Chrome）。

比如，我们可以给这个课程网页编写以下样式

body {
    background-color: #2d2d2d;
    color: #eee;
    font-family: Fira Code;
    font-size: 16pt;
}

a:link {
    text-decoration: none;
    color: #0a0;
}

同时，Stylus还可以找到其他用户编写并发布到userstyles.org的样式。比如大多数常见网站都有一个或多个深色模式样式。不要使用Stylish！因为它会泄露用户数据，详见此处。

功能自定义

和改变样式一样，你也可以改变网站的功能，通过web浏览器扩展（比如Tampermonkey）管理和运行自定义javascript来实现各种功能。

例如，下面的脚本支持使用J和K键进行类似vim的导航。

// ==UserScript==
// @name         VIM HT
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Vim JK for our website
// @author       You
// @match        https://hacker-tools.github.io/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    window.onkeyup = function(e) {
        var key = e.keyCode ? e.keyCode : e.which;

        if (key == 74) { // J is key 74
            window.scrollBy(0,500);;
        }else if (key == 75) { // K is key 75
            window.scrollBy(0,-500);;
        }
    }
})();

还有一些比如OpenUserJS和Greasy Fork的脚本存储库。然而，请注意，安装其他的用户脚本是非常危险的，因为它们几乎可以做任何事情，比如窃取您的信用卡号。在读完整个脚本、了解它的功能之后，并确定它不会任何可疑的事情后，才能安装这个脚本。永远不要安装包含你无法读的简化或模糊代码的脚本！

Web APIs

Web服务提供应用程序接口（(web API）已经变得越来越普遍，这样你就可以与发出网页请求的服务交互。更深入的介绍可以在这里找到。有许多公共API。Web API之所以有用有多方面原因：

- 检索。Web API可以轻松为你提供比如地图、天气或公网IP地址之类的信息。例如，curl ipinfo.io会返回一个JSON对象，其中会包含一些关于你公网IP、地区、位置等的详细信息。通过适当的解析，这些工具甚至可以与命令行工具集成。以下bash函数与Google Autocomplete API对话并返回前10个匹配项。

function c() {
    url='https://www.google.com/complete/search?client=hp&hl=en&xhr=t'
    # NB: user-agent must be specified to get back UTF-8 data!
    curl -H 'user-agent: Mozilla/5.0' -sSG --data-urlencode "q=$*" "$url" |
        jq -r ".[1][][0]" |
        sed 's,</\?b>,,g'
}

- 交互。Web API端点也可以用来触发操作。这通常要求用户在请求中加入某种私密令牌来完成身份认证。例如执行以下命令curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' "https://hooks.slack.com/services/$SLACK_TOKEN"将在通道中发送Hello, World!消息。

- 管道传输。因为有些web API服务非常流行，常见的web API是将各种服务连接在一起的粘合剂，包括服务器。像If This Then That和Zapier这样的服务就是这样。

Web自动化

有时候web API是不够的。如果只需要只读，你可以使用像pup这样的html解析器或使用库，例如基于python的BeautifulSoup。然而，如果需要交互性或执行javascript，这些解决方案就不够了。

例如，下面的脚本将使用模拟输入网站交互的网站时光机（wayback machine）保存指定的url。

from selenium.webdriver import Firefox
from selenium.webdriver.common.keys import Keys


def snapshot_wayback(driver, url):

    driver.get("https://web.archive.org/")
    elem = driver.find_element_by_class_name('web-save-url-input')
    elem.clear()
    elem.send_keys(url)
    elem.send_keys(Keys.RETURN)
    driver.close()


driver = Firefox()
url = 'https://hacker-tools.github.io'
snapshot_wayback(driver, url)

练习

  1. 编辑一个你经常在浏览器中使用的关键词搜索引擎

  2. 安装上面提到的插件。看看uBlock Origin/Privacy Badger是如何拦截网页上的广告的。你看到有什么区别？在一个广告比较多的网站（比如YouTube）进行尝试。

  3. 安装Stylus并使用CSS为本课程网页编写一个自定义样式。这是一些常见的编程字符= == === >= => ++ /= ~=。如果改变字体为Fira Code会怎么样？想了解更多，搜索连字功能的编程字体。

  4. 找到一个web API获取你当前城市/区域的天气。

  5. 使用WebDriver软件（比如Selenium）来自动化执行一些浏览器上的重复手动工作。

实用工具
计算机科学
客服