Mainonly 是一款浏览器小书签，只有一个功能：按下小书签后出现网页选区，然后仅显示被选中区域内容，非常适合使用《沉浸式翻译》时，单独翻译某个区域内容。@Appinn
来自发现频道，@jerrylus 同学的自荐：https://meta.appinn.net/t/topic/50444
小视频
先来看青小蛙录制的小视频：
mainonly – 仅显示网页所选部分的 JS 小书签
@jerrylus 同学说：
这是什么：
一个很简单的小工具，选中某个页面元素（可以鼠标滚轮调整范围），左键确认后会隐藏其他的元素，隐藏后按 ESC 就能恢复。
为什么做这个：
- 我用的翻译插件是「沉浸式翻译」，但是默认情况下会翻译整个网页，然而一般我只关心主体，不关心导航栏、侧边推荐、底部链接；默认的行为会导致无谓的翻译 API 请求，更容易遇到频率限制。
- 沉浸式翻译自带了一个仅翻译网页主体的功能，但是标注了「不建议开启」，我自己测试下来有的时候也会有误判，所以还是倾向于自己来选择主体。
- 虽然有不少 Chrome 插件可以删除网页元素，但是像我这样仅保留（反向删除）的我还真没找到，最后就干脆趁着周末自己搞一个了。
原理：
选中元素之外的元素上加 display: none，按 ESC 取消的时候再删掉
而在下方的评论中，@sav3uluan 同学还提供了一个新的思路：感谢分享, 除了在翻译中可以使用之外, 还可以在打印时候使用。
青小蛙也觉得…这有点像阅读模式，但比阅读模式更加精准，用法也不太一样。完全是一个《沉浸式翻译》专属小书签啊😂
另外青小蛙也在使用沉浸式翻译，还是非常方便的。
获取
小书签：
javascript:(function(){var e=document.body;const n=document.head.appendChild(document.createElement("style"));n.textContent=".mainonly { outline: 2px solid red; }";const t=CSS.supports("selector(:has(*))");function o(n){n instanceof HTMLElement&&(e.classList.remove("mainonly"),(e=n).classList.add("mainonly"))}function s(e){o(e.target)}function a(o){if(o.preventDefault(),t)n.textContent=":not(:has(.mainonly), .mainonly, .mainonly *) { display: none; }";else{n.textContent=":not(.mainonly *, .mainonly-ancestor) { display: none; }";var s=e;do{s.classList.add("mainonly-ancestor")}while(s=s.parentElement)}l()}function i(n){n.preventDefault(),n.deltaY<0?o(e.parentElement):o(e.firstElementChild)}function l(){document.removeEventListener("mouseover",s),document.removeEventListener("click",a),document.removeEventListener("wheel",i)}document.addEventListener("mouseover",s),document.addEventListener("click",a),document.addEventListener("wheel",i,{passive:!1}),document.addEventListener("keydown",(function o(s){if("Escape"===s.key&&(n.remove(),document.removeEventListener("keydown",o),l(),e?.classList.remove("mainonly"),!t))for(const e of document.getElementsByClassName("mainonly-ancestor"))e.classList.remove("mainonly-ancestor")}))}())
原文：https://www.appinn.com/selected-mainonly/