两个TamperMonkey 脚本，解决掘金阅读体验的三点不爽

photo © unsplash.com

🦧 前言

作为一个代码洁癖重患，对用户体验的要求一定也是高的。最近在掘金发了好几篇文章，也看了不少，因为写文章的关系，主要还是在 PC 端，所以碰到了一些用起来不太爽利的地方。

需要等掘金开发者来解决么？

不不不，同样作为前端开发，自己就可以先搞定。

TL;DR

两个 TamperMonkey 脚本，提升掘金阅读体验。

主要内容

适合读者

• 掘金用户
• TamperMonkey 用户
• 认为掘金阅读体验需要提升的用户

你将获得

1. 了解利用浏览器插件 TamperMonkey 可以自定义网站行为
2. 两个提升掘金阅读体验的用户脚本

编辑历史

日期	版本说明
2023/09/18	V1

🙈 几点不爽

通用作为掘金用户的你，有没有在 PC 端看文章时感到不爽？我有：

• 文章内容区太窄
• 沉浸模式不够沉浸
• 外跳链接二次确认

文章内容区太窄

文章内容区太窄，写死宽度 820px，在我 14" 笔记本上两边还有很大的留白。

内容区太窄的弊端：

1. 看完一篇文章，可能要多滚几次屏幕
2. 表格的展示效果不佳
3. 有些图必须放大看才能看清细节

沉浸模式不够沉浸

沉浸模式只是把无关的内容从 DOM 中抹除了，然而并没有把能够辅助阅读的 TOC 撑高，没有起到真正帮助阅读的作用。

外跳链接二次确认

所有的三方站点外跳链接，都被改成了二方页面，需要用户多点一次。

对于站点作者来说，这个确认提示是很有必要的。但对于像我这样的用户来说，嗯..觉得有点麻烦。

🐵 弄它

浏览器插件 TamperMonkey

但是，怎么「弄它」呢？首先，我们需要一个用户脚本插件，有很多，我选 TamperMonkey，「无他，唯手熟尔」。

TamperMonkey 支持占市场 99% 的主流浏览器：Firefox、Chrome、Safari、Edge、Opera。

有基本前端常识的人都可以玩，技巧无非就是：

1. 审查元素
2. CSS 优先级
3. JS 操作样式
4. JS 操作事件

文章内容区宽度调优 + 沉浸模式调优

具体如何定位元素，如何 Hack 的原理，属于基本常识，就不展开了。

脚本代码：

// ==UserScript==
// @name         掘金阅读调优
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  掘金文章宽度调优 + 沉浸模式 TOC 调优
// @author       Boshit
// @match        https://juejin.cn/post/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function createStyle(css) {
    const style = document.createElement('style');

    style.innerText = css;
    document.head.append(style);
  }

  // 宽屏阅读：尽可能宽
  createStyle(`main.container.main-container {
  max-width: calc(100vw - 160px) !important;
}
main.container.main-container .article-suspended-panel {
  margin-left: -5.2rem;
}
main.container.main-container .main-area {
  width: calc(100vw - 480px);
}
main.container.main-container #comment-box {
  max-width: unset;
}
@media (max-width: 1000px) {
  main.container.main-container {
    margin: 0 12px 0 auto;
    max-width: calc(100vw - 64px) !important;
  }

  main.container.main-container .main-area {
    width: 100%;
  }

  main.container.main-container #comment-box {
    margin-top: 12px;
  }
}
@media (max-width: 600px) {
  main.container.main-container {
    margin: 0;
    max-width: 100vw !important;
    width: 100%;
  }
}`);

  // 沉浸模式：TOC 高度调优
  createStyle(`#sidebar-container > div:only-child {
  height: calc(100vh - 100px);
  overflow: auto;
}
#sidebar-container > div:only-child nav {
  margin-bottom: 0;
}
#sidebar-container.article-sidebar.top > div:only-child {
  height: calc(100vh - 40px);
}
#sidebar-container > div:only-child .catalog-body.unfold {
  max-height: 100%;
}`);
})();

这段脚本的主要逻辑是注入一些优先级更高的 CSS，覆盖原有的样式。如果你对文章内容中的元素，表格、图片、代码等有自己的想法，也可以继续加样式。

启用脚本，「沉浸」效果：

悄咪咪吐槽一句：掘金的 CSS 真写的不咋地..

三方外跳链接直接跳

三方外跳链接二次确认，很多内容网站都这么搞，无可厚非，但就是苦了用户需要多点一次。

掘金对三方外跳链接的策略是直接替换，将原链接替换成 https://link.juejin.cn/?target=xxx/，很多网站都有类似的方案，这种比较好弄。不好弄的是那些用全局事件拦截的。

直接上脚本：

// ==UserScript==
// @name         链接还原
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  你拦我不拦
// @author       Boshit
// @match        https://juejin.cn/post/*
// @match        https://juejin.cn/user/*
// @match        https://zhuanlan.zhihu.com/p/*
// @match        https://www.zhihu.com/question/*
// @match        https://sspai.com/post/*
// @icon
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function getEventTargetLink(el) {
    while (el) {
      if (el.tagName === 'A') {
        return el;
      }

      el = el.parentNode;
    }

    return null;
  }

  function getRealHrefJuejin(href) {
    return href.match(/https?:\/\/link\.juejin\.cn\/\?target=(https?.*)/)?.[1];
  }

  function getRealHrefZhihu(href) {
    return href.match(/https?:\/\/link\.zhihu\.com\/\?target=(https?.*)/)?.[1];
  }

  function getRealHrefSspai(href) {
    return href.match(/https?:\/\/sspai\.com\/link\?target=(https?.*)/)?.[1];
  }

  function getRealHref(href) {
    const decodedHref = getRealHrefJuejin(href) || getRealHrefZhihu(href) || getRealHrefSspai(href);

    return decodedHref ? decodeURIComponent(decodedHref) : '';
  }

  document.addEventListener('mousedown', e => {
    const targetLink = getEventTargetLink(e.target);

    if (!targetLink?.href) {
      return;
    }

    const realHref = getRealHref(targetLink.href);

    if (realHref) {
      targetLink.href = realHref;
    }
  }, true);
})();

以上脚本同样适用于知乎和少数派。

这段脚本的主要逻辑是在点击页面链接之前（mousedown 事件捕获阶段），如果判断是到「三方链接跳转用的二方桥接页面」，则提取原三方链接，用它替换原二方链接。这样，在点击事件（mouseup 之后触发 click）发生时，浏览器拿到的就是「真」链接，从而避免二次确认。

🙉 致掘金开发者

估计有不少用户跟我一样吧？

但用户脚本治标不治本，掘金开发者稍稍改一下就会失效。更希望的是，掘金开发者可以在阅读体验上做更多的提升。

对于「沉浸模式」，个人认为掘金开发者还有好多可以努力的点，比如直接隐藏顶栏什么的。

至于宽屏和二跳，纯属个人偏好，建议增加用户偏好和快捷按钮。

🙊 FAQ

❓ 如何添加 TamperMonkey 自定义脚本？

TamperMonkey 图片点击后，菜单「Create new script...」，或者进入「Dashboard」后找加号。

❓ 如何禁用 / 启用脚本？

TamperMonkey 图标右上角的数字表示当前页面运行的用户脚本个数，菜单项中可以禁用和启用。

🐒 写在最后

自己写用户脚本难度不大，从别人那边拷来的用户脚本，最好也能自己通读一下。

用户脚本网站：

• Userscript.Zone Search
• GreasyFork