Monitors are big, attention is narrow.

When reading websites and focus on the article, I often can’t help but felt distracted by the surroundings on the rest of the page. So I asked chatgpt to create a solution for me, it gives some javascript code that actually works!

Here is the code:

javascript:(function() {
let D=document;
const M = D.querySelector('article, .article-content .rich_media_wrp') || D.querySelector('main, .main-content');
if (M) {
 let r = M.getBoundingClientRect();
 let clone = M.cloneNode(true);
 Object.assign(clone.style, {
  position: 'absolute',
  top: `${r.top}px`,
  left: `${r.left}px`,
  width: `${M.offsetWidth}px`,
  background: '#fff',
  zIndex: '1002',
  padding: '20px',
  boxSizing: 'border-box'
 });
 D.body.appendChild(clone);
 const overlay = D.createElement('div');
 overlay.style.cssText = `position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000;`;
 D.body.appendChild(overlay);
}
})();

Note: .rech_media_wrap is an example of customization, it is used in wechat articles web version as of 2023/09/14.

I created a bookmarklet for this:

Focus

Just drag it onto your bookmark bar, and try click it on current page. So far it only works for typical websites where they use article or main properly. If you don’t like the effect, refresh the page it will go away.

Feel free to tweak it, and remember to comment below about your secret tweaks!