Mainonly - 仅显示网页所选部分的 JS 小书签

发现频道 🔎
1

这是什么：
一个很简单的小工具，选中某个页面元素（可以鼠标滚轮调整范围），左键确认后会隐藏其他的元素，隐藏后按 ESC 就能恢复。

为什么做这个：

  • 我用的翻译插件是「沉浸式翻译」，但是默认情况下会翻译整个网页，然而一般我只关心主体，不关心导航栏、侧边推荐、底部链接；默认的行为会导致无谓的翻译 API 请求，更容易遇到频率限制。
  • 沉浸式翻译自带了一个仅翻译网页主体的功能，但是标注了「不建议开启」，我自己测试下来有的时候也会有误判，所以还是倾向于自己来选择主体。
  • 虽然有不少 Chrome 插件可以删除网页元素，但是像我这样仅保留（反向删除）的我还真没找到，最后就干脆趁着周末自己搞一个了。

原理：
选中元素之外的元素上加 display: none，按 ESC 取消的时候再删掉

效果：见动图
mainonly_mini

链接地址：

8 个赞
2

好东西

3

感谢分享, 除了在翻译中可以使用之外, 还可以在打印时候使用.

4

感谢 :two_hearts:！使用的过程中遇到两个问题：一个是当文字段落很长，用小书签仅显示某一段时沉浸式翻译无法翻译；一个是翻译完用ESC退出后网页会回滚到最顶端，对长文阅读不太友好。不知道有办法解决没~

5

期待手搓大佬内置到搜索酱 :doge:

6

要是能加一句把背景改成黑色就好了，就可以用来“关灯看视频”了

7

@Qingwa 感谢入选主站推荐！不过主站的 Github 地址似乎贴错了，可否修正？

8

我看到有用户提了 issue，他也自己修复了（通过补充 scrollY 信息），这里后续如果ta不提交PR的话我就手动补上吧

9

已更新代码，目前会记住滚动位置，ESC 退出不会跳回页面顶部；仅显示一段时沉浸式翻译无法工作的问题可能是插件相关，我这边暂时没有解决办法。

10

抱歉，改好了

11

:joy:现在这样用小书签就已经很好了。
作者大佬能写个网页自由替换附加的 display:none 为自定义样式例如 visibility 生成小书签链接就更实用了

12

感谢大佬！仅显示一段时无法翻译的问题可能我所使用的测试网站的原因，这个页面用更新后的代码显示更奇怪了，地址在这里guide-for-authors。我用更新后的代码试了一下其他网站，一切正常~

13

非常好用，十分感谢！
我并不懂这些前端知识，但正如你所说，你做的是：反向删除。
如果想把它拓展成一个"阅读器"(@qingwa说的)，那么对于我来说就额外需要 "被选中的区域居中"的功能。这个功能是否能够实现？
如果说，更改页面的整体位置结构实现起来会比较复杂，那么我也能够接受它实现上的一些不足，比如：无法恢复（只能通过刷新页面）或是说 无法在当前页面实现，需要新建一个新的页面 等等
期待你的回复

14

等待个大佬整成插件或者油猴脚本（就我书签太多东西一般都设置不显示吗？）

15

搜索酱就支持 bookmarklet 的，例如

{
        "name": "Mainonly by jerrylus",
        "url": "javascript:(function(){var e=document.body;let n=document.head.appendChild(document.createElement(\"style\"));n.textContent=\".mainonly { outline: 2px solid red; }\";let t=CSS.supports(\"selector(:has(*))\");function o(n){n instanceof HTMLElement&&(e.classList.remove(\"mainonly\"),(e=n).classList.add(\"mainonly\"))}function i(e){o(e.target)}function l(o){if(o.preventDefault(),t)n.textContent=\":not(:has(.mainonly), .mainonly, .mainonly *) { visibility: hidden; }\";else{n.textContent=\":not(.mainonly *, .mainonly-ancestor) { visibility: hidden; }\";var i=e;do i.classList.add(\"mainonly-ancestor\");while(i=i.parentElement)}r()}function s(o){if(\"Escape\"===o.key){o.preventDefault();var i=window.scrollY||document.documentElement.scrollTop;if(n.remove(),document.removeEventListener(\"keydown\",s),r(),e?.classList.remove(\"mainonly\"),!t)for(let l of document.getElementsByClassName(\"mainonly-ancestor\"))l.classList.remove(\"mainonly-ancestor\");window.scrollTo(0,i)}}function a(n){n.preventDefault(),n.deltaY<0?o(e.parentElement):o(e.firstElementChild)}function r(){document.removeEventListener(\"mouseover\",i),document.removeEventListener(\"click\",l),document.removeEventListener(\"wheel\",a)}document.addEventListener(\"mouseover\",i),document.addEventListener(\"click\",l),document.addEventListener(\"wheel\",a,{passive:!1}),document.addEventListener(\"keydown\",s)}())"
}
16

是个好东西，可惜意义不大，「沉浸翻译」自带鼠标悬停翻译，就是类似的效果。

17

可以先去 mainonly.js 文件里改，然后再用 minifier 自己生成，要改的应该就是第 29 行和 31 行。

18

测试了下没有复现问题，如果能稳定复现的话欢迎在 Github 上提 issue 跟进。

image
image1222×780 40 KB

19

阅读器的话目前应该有很多已有的实现了，例如简悦之类的插件。目前的实现里因为保留了网页原始布局，直接改成居中有些不太好操作。我试了几个修改，效果都不太好，这里估计得等专业前端支援，或者等周末慢慢来搞了

P.S. 感觉上可以在root新建一个div然后只把选中节点复制过去，但这样可能又会丢失样式？有点头大

20

首先感谢你的回复，以及你为我推荐相关的插件。
我在提出问题的时候就想到了我的需求与当前的功能相差较远，如果不便实现是很合理的。不过我还是很喜欢你的设计，很棒，诚实的讲，相比于你提到的简悦的聚焦模式，我认为你的更好用。 :smile: