Userscript này sẽ thay nền xem ảnh dạng lưới, tác dụng của nó thể hiện rõ nhất khi xem ảnh trong suốt.

Lưu ý: Image viewer chỉ hoạt động trên Firefox

Trước đây mình dùng add-on Pic Style, sau một thời gian dùng, mình thấy trình duyệt hơi chậm, xem trong dev tool mới phát hiện lỗi sinh thẻ style không ngừng, dùng càng lâu thì nó lặp càng nhiều, vì thế mình mới viết userscript này.

Lỗi của add-on Pic Style:

Cài đặt: http://goo.gl/Gaadhv

Code:

// ==UserScript==
// @name         Image viewer
// @namespace    http://devs.forumvi.com/
// @version      1.0
// @icon         http://i.imgur.com/ItcjCPc.png
// @description  Image viewer for Firefox
// @include      *
// @copyright    2014+, Zzbaivong
// @run-at       document-end
// @downloadURL  https://dl.dropboxusercontent.com/u/126946313/Userscript/image-viewer/image_view.user.js
// @updateURL    https://dl.dropboxusercontent.com/u/126946313/Userscript/image-viewer/image_view.meta.js
// @grant        none
// ==/UserScript==
(function () {
   var theme = "light"; // dark|light
   var url;
   if (theme == "light") {
      url = 'data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw=='
   } else {
      url = 'data:image/gif;base64,R0lGODlhCgAKAPAAACIiIgAAACH5BAHoAwEALAAAAAAKAAoAAAIRjA2Zhwoc3GMSykqd1VltzxQAOw=='
   }
   if (document.contentType.indexOf("image/") == 0) {
      var theme = document.createElement("style");
      theme.type = "text/css";
      theme.innerHTML = "body{background:url(" + url + ") repeat scroll rgba(0, 0, 0, 0.3);}\
        body > img.decoded{background-color: rgba(0, 0, 0, 0.1);}\
        body > img.decoded:hover{outline: 3px solid #333;}";
      document.head.appendChild(theme);
   }
}());

---

Demo: http://devs.forumvi.com/viewimage.forum?u=https://i.imgur.com/Yfl5NFO.gif

Thêm vào CSS:

Code:

/* Image viewer - devs.forumvi.com */
p + center > a[href="javascript:window.close()"]{display:block;padding:15px;background:url('data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==') repeat scroll #dddddd;}
p + center > a[href="javascript:window.close()"] img{border:1px solid transparent}
p + center > a[href="javascript:window.close()"] img:hover{border:1px dotted #c0c0c0;background-color:rgba(0,0,0,0.05)}

---

Tags: #userscript