01/10/2018, 14:13

Bookmarklet giúp đổi màu trang web thành trắng-đen

Lấy cảm hứng từ bài báo này

VnExpress

Muốn cai nghiện smartphone, hãy chuyển màn hình sang đen trắng

Tính năng chuyển màn hình sang đơn sắc không chỉ tiết kiệm pin mà còn có thể giúp người dùng không còn tập trung vào smartphone.

Mình đã tìm xem có thể làm chức năng tương tự trên trình duyệt không. Sau đó mình tìm được một bookmarklet giúp chuyển màu trang web ở đây.

superuser.com

How to turn web pages in browser into black & white (Grayscale)?

firefox, google-chrome, browser, internet-explorer

asked by Phi Jones on 04:57PM - 01 Sep 11

Dựa vào code ban đầu, mình thêm vào điều kiện else để khi các bạn muốn chuyển lại màu bình thường thì nhấn vào bookmarklet lần nữa.

(function(){
  var body=document.body;
  body.style['filter']='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  if (!body.style['filter']){
    body.style['-webkit-filter']='grayscale(100)';
    body.style['filter']='grayscale(100)';
  }
  else{
    body.style['-webkit-filter']=null;
    body.style['filter']=null;
  }
}());

Hướng dẫn:

Các bạn vào trang sau đây: https://mrcoles.com/bookmarklet/ rồi copy đoạn code phía trên vào khung trống, sau đó nhấn “Convert to bookmarklet”.
Sau khi có kết quả, các bạn bookmark lại “this link” này:
Xong, từ giờ khi lướt web, bạn nhấn vào bookmark vừa tạo thì trang web sẽ chuyển sang trắng-đen, nhấn một lần nữa để trở lại màu bình thường.
Ban đầu:

Screenshot-2018-1-20 Muốn cai nghiện smartphone, hãy chuyển màn hình sang đen trắng(3).png1340x768 431 KB

Sau khi chuyển màu:

Screenshot-2018-1-20 Muốn cai nghiện smartphone, hãy chuyển màn hình sang đen trắng(1).jpg1349x704 254 KB

Tuy nhiên khi dùng với facebook sẽ xảy ra một lỗi nhỏ, các bạn phát hiện thử nhé.
Vừa làm vừa xem U23 Việt Nam đá với U23 Iraq

Cập nhật: Đã hoàn thành extension. Extension firefox khi dùng trên những trang web động thì bị lỗi. Chrome thì không.
Firefox: https://addons.mozilla.org/en-US/firefox/addon/grayscalefortabs/
Google Chrome: https://github.com/Trieste96/Grayscale-Chrome-

Hung viết 16:16 ngày 01/10/2018

Đọc sách trên phone toàn dùng kiểu này mà @@

HK boy viết 16:23 ngày 01/10/2018

Đổi category đi bác ơi =))

Vừa làm vừa xem U23 Việt Nam đá với U23 Iraq

Xem mà nghẹt thở

Vuio viết 16:28 ngày 01/10/2018

Cần gì rắc rối thế, copy code trên kéo vô thanh bookmark, thêm javascript: ở đâu là xong.

Chế độ đọc sách

javascript:(function(){x=document.createElement('SCRIPT');x.type='text/javascript';x.src='http://brettterpstra.com/share/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(x);y=document.createElement('LINK');y.rel='stylesheet';y.href='http://brettterpstra.com/share/readability.css?x='+(Math.random());y.type='text/css';y.media='screen';document.getElementsByTagName('head')[0].appendChild(y);})();

Chia sẻ trang hiện tại lên Facebook

javascript:var d=document,f='https://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1511518587&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Làm mờ trang web

javascript:(function(){ document.body.setAttribute('style', 'filter:url("data:image/svg+xml;utf8,#blur"); -webkit-filter:blur(10px); filter:blur(10px);' ); })();

Tắt đèn

javascript:(function(){function $(id){ return document.getElementById(id);} /* TOTL list */ /* id way */var websiteapi = $('dont-turn-off-the-lights');if(websiteapi){$('dont-turn-off-the-lights').style.zIndex = 1000;$('dont-turn-off-the-lights').style.visibility = 'visible';$('dont-turn-off-the-lights').style.position = 'relative';}/* HTML5 video */video = document.getElementsByTagName("video"); for(var i = 0; i < video.length; i++ ) {if(video[i]) {video[i].style.zIndex = 1000;video[i].style.visibility = 'visible';video[i].style.position = 'relative';}} /* class way */div = document.getElementsByTagName("*"); for(var i = 0; i < div.length; i++ ){if(div[i].className == ("dont-turn-off-the-lights")) {div[i].style.zIndex = 1000;div[i].style.visibility = 'visible';div[i].style.position = 'relative';}} /* MAC & PC & LINUX */ var playerapi= $('player-api');if(playerapi){$('player-api').style.zIndex = 1000;$('player-api').style.visibility = 'visible';}/* Begin code TOTL */ var blackon  = $('stefanvdlightareoff');if(blackon){document.body.removeChild(blackon);}else{var p = document.createElement('div');p.id = 'stefanvdlightareoff';p.setAttribute('style', 'opacity: 0.8; top: 0; left: 0; position: fixed; width: 100%; height: 100%; background-color: black; z-index: 999;');p.onclick=function(){return(elem=document.getElementById('stefanvdlightareoff')).parentNode.removeChild(elem)};document.body.appendChild(p);}})()

Tìm font

javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','http://chengyinliu.com/wf.js?o='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(s)})();

Triet viết 16:27 ngày 01/10/2018

Cái Chế độ đọc sách dùng thế nào vậy? Mình dùng không được, firefox quantum.

Vô Thin viết 16:19 ngày 01/10/2018

Có lẽ sẽ có anh tài nào đó “chế biến” mấy đoạn code trên vào một cái Extension hay Addons gì đó thì mới tiện dụng. Lý do: các bookmarklet trên chỉ tác dụng tức thời, một khi click sang trang khác (kể cả cùng domain) sẽ mất tác dụng => lại phải click một lần nữa để biến hình.

Triet viết 16:17 ngày 01/10/2018

Em đang làm extension cho firefox. Mà chạy không được.

null viết 16:16 ngày 01/10/2018

Muốn đọc sách thì dùng Kindle ấy, lướt web không khác tự hành, ai mà nghiện được chắc cũng dạng khổ dâm lâu năm.

Dark.Hades viết 16:26 ngày 01/10/2018

Để ý, nếu trang bạn áp dụng code chạy trên HTTPS thì nó sẽ không load được do bảo mật của trình duyệt.

Triet viết 16:21 ngày 01/10/2018

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Triet