Mainonly-一键隐藏网页干扰元素

2025年06月20日17:16:52 发表评论 热度28 ℃

Mainonly是一个通过书签运行的JavaScript工具,能够智能隔离并高亮显示网页上的特定内容区域,帮助用户屏蔽页面上的干扰信息。

Mainonly-一键隐藏网页干扰元素

如何使用

复制以下代码:

  1. javascript:(function(){document.getElementById("mainonly")&&document.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"}));var e=document.body,n=null;e.id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly");let t=document.head.appendChild(document.createElement("style"));t.textContent="#mainonly { outline: 2px solid red; }  .mainonly { outline: 2px solid red; }";let i=document.body.appendChild(document.createElement("div"));i.className="mainonly-guide",i.innerHTML=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动,或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动,或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;let o=document.head.appendChild(document.createElement("style"));function l(t){t instanceof HTMLElement&&("id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),(e=t).id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly"))}function d(e){l(e.target)}function a(i){i.preventDefault(),function n(){for(var t=e;t.parentElement;)(t=t.parentElement).classList.add("mainonly_parents")}(),"id"===n?t.textContent="* { visibility: hidden; } #mainonly, #mainonly *, .mainonly_parents { visibility: visible; }":t.textContent="* { visibility: hidden; } .mainonly, .mainonly *, .mainonly_parents { visibility: visible; }",m(),r()}function r(){i.remove(),o.remove()}function s(i){if("Escape"===i.key)t.remove(),document.removeEventListener("keydown",s),m(),r(),"id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),function e(){for(var n=document.querySelectorAll(".mainonly_parents"),t=0;t<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.textContent=`.mainonly-guide {position: fixed;top: 0;left: 50%; /* center the box horizontally */transform: translate(-50%, 0); /* center the box horizontally */padding: 0.5rem;font-size: 1rem;font-family: sans-serif;text-align: center;color: white;background-color: rgba(0, 0, 0, 0.5);border-radius: 0.5em;z-index: 999999999;    kbd {display: inline-block;padding: 0.1em 0.3em;font-size: 0.8em;line-height: 1;color: #24292e;vertical-align: middle;background-color: #fafbfc;border: 1px solid #d1d5da;border-radius: 3px;box-shadow: inset 0 -1px 0 #d1d5da;    }}`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())

右键单击浏览器的书签栏,选择“添加书签”。

在弹出窗口中,命名您的书签(例如,“mainonly”),并将复制的代码粘贴到URL或location字段中。

保存书签。

在网页上,激活书签,然后点击你想关注的元素。该元素将被红色轮廓包围。使用滚轮或键盘快捷键(- ,用于扩展,= .用于收缩)来调整选择大小。

做出选择后,单击鼠标左键。所有其他元素将被隐藏,只留下选定的元素可见。

按下ESC键来显示隐藏的元素,并将页面恢复到原始状态。

瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: