--- title: Mainonly - 小书签：只显示网页上选中的区域，适合使用《沉浸式翻译》 date: 2023-12-24T02:52:36Z modified: 2023-12-25T16:04:07Z permalink: "https://www.appinn.com/selected-mainonly/" type: post status: publish excerpt: "" categories: - Chrome - Firefox tags: - Chrome - Firefox - 只显示 - 小书签 featured_image: "https://www.appinn.com/wp-content/uploads/2023/12/Appinn-feature-images-6.jpg" author: 青小蛙 timestamp: 2023-12-25T16:04:07Z --- **Mainonly** 是一款[浏览器小书签](https://www.appinn.com/tag/%E5%B0%8F%E4%B9%A6%E7%AD%BE/)，只有一个功能：按下小书签后出现网页选区，然后仅显示被选中区域内容，非常适合使用《[沉浸式翻译](https://www.appinn.com/immersive-translate.md)》时，单独翻译某个区域内容。@[Appinn](https://www.appinn.com/selected-mainonly.md) ![Mainonly - 小书签：只显示网页上选中的区域，适合使用《沉浸式翻译》](https://www.appinn.com/wp-content/uploads/2023/12/Appinn-feature-images-6.jpg) 来自[**发现频道**](https://meta.appinn.net/c/faxian/10)，@jerrylus 同学的自荐：[https://meta.appinn.net/t/topic/50444](https://meta.appinn.net/t/topic/50444) ## 小视频 先来看青小蛙录制的小视频： https://www.youtube.com/watch?v=DvNnu5E83Sw ## mainonly – 仅显示网页所选部分的 JS 小书签 @jerrylus 同学说： ### 这是什么： 一个很简单的小工具，选中某个页面元素（可以鼠标滚轮调整范围），左键确认后会隐藏其他的元素，隐藏后按 ESC 就能恢复。 ### 为什么做这个： - 我用的翻译插件是「沉浸式翻译」，但是默认情况下会翻译整个网页，然而一般我只关心主体，不关心导航栏、侧边推荐、底部链接；默认的行为会导致无谓的翻译 API 请求，更容易遇到频率限制。 - 沉浸式翻译自带了一个仅翻译网页主体的功能，但是标注了「不建议开启」，我自己测试下来有的时候也会有误判，所以还是倾向于自己来选择主体。 - 虽然有不少 Chrome 插件可以删除网页元素，但是像我这样仅保留（反向删除）的我还真没找到，最后就干脆趁着周末自己搞一个了。 ### 原理： 选中元素之外的元素上加 `display: none`，按 ESC 取消的时候再删掉 --- 而在下方的评论中，@[sav3uluan](https://meta.appinn.net/t/topic/50444/3?u=qingwa) 同学还提供了一个新的思路：感谢分享, 除了在翻译中可以使用之外, 还可以在打印时候使用。 青小蛙也觉得…这有点像阅读模式，但比阅读模式更加精准，用法也不太一样。完全是一个《[沉浸式翻译](https://www.appinn.com/immersive-translate.md)》专属小书签啊😂 另外青小蛙也在使用沉浸式翻译，还是非常方便的。 ## 获取 - [发现频道](https://meta.appinn.net/t/topic/50444) - [GitHub](https://github.com/jerrylususu/mainonly) ### 小书签： 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/ ## Topics **分类目录:** [Chrome](https://www.appinn.com/category/chrome/?output_format=md), [Firefox](https://www.appinn.com/firefox2.md) **标签:** [只显示](https://www.appinn.com/tag/%e5%8f%aa%e6%98%be%e7%a4%ba/?output_format=md), [小书签](https://www.appinn.com/tag/%e5%b0%8f%e4%b9%a6%e7%ad%be/?output_format=md)