In this blog post, we’ll take a look at BetterViewer, a Chrome extension I created that allows you to view images in a more convenient and customizable way.

Why I Created BetterViewer

I created BetterViewer because I was tired of the basic image viewing experience that comes with web browsers.

If you want to view an image in your browser, you have to open the image in a new tab. This is inconvenient because it takes up a lot of space and you can’t view multiple images at the same time. You also can’t zoom in or out, rotate, or flip the image. I wanted to be able to view images in a way that was more convenient and intuitive. I also wanted to be able to view images in a way that was more customizable. I couldn’t find any extensions that met my needs, so I decided to create my own.

Features

• Zoom in / Zoom Out / Reset
• Fullscreen
• Rotate Left / Rotate Right
• Flip Horizontal / Flip Vertical
• Crop Image
• Photo Editor (Adjust, Draw, Watermark, Filters, Finetune, Resize, Export As PNG, JPEG, JPG, WEBP)
• Download Image
• Upload Image to imgBB or imgur
• Color picker
• Image Details
• Change background color (Dark / Light / Blurred)
• Print Image
• Extract Text from Image
• Edit in Photopea
• Reverse Image Search
• QR Code Scanner
• Settings to customize Toolbar

How to Install

You can install BetterViewer from the Chrome Web Store or Firefox Add-ons or Edge Add-ons.

How does it work?

BetterViewer works by replacing the default image viewer with a custom image viewer. It’s powered by a number of powerful libraries, including Viewer.js, WinBox.js, and Tesseract.js. These libraries work together to provide an unparalleled image viewing experience.

The extension uses background scripts to detect if an image is being opened in a new tab by checking the MIME type of the image. If the MIME type is an image, the extension will inject the BetterViewer script into the page. The BetterViewer script will then replace the default image viewer with a custom image viewer. Easy!

Briefly, here’s how the background script works: (Full source code here)

// Background script

// when request is made
chrome.webRequest.onHeadersReceived.addListener(
  function (details) {
    if (details.tabId !== -1) {
      let header = getHeaderFromHeaders(
        details.responseHeaders,
        "content-type"
      );

      // check if content-disposition is attachment, if it is, do not inject
      let contentDispositionHeader = getHeaderFromHeaders(
        details.responseHeaders,
        "content-disposition"
      );
      let isContentDispositionAttachment =
        contentDispositionHeader &&
        contentDispositionHeader.value.toLowerCase().includes("attachment");

      let res = header && header.value.split(";", 1)[0];

      if (res.indexOf("image") === -1) {
        // remove from injected list
        InjectedTabs = InjectedTabs.filter(function (item) {
          return item !== details.tabId;
        });
      }

      // check if image
      if (
        res &&
        res.indexOf("image") !== -1 &&
        InjectedTabs.indexOf(details.tabId) === -1 &&
        !isContentDispositionAttachment
      ) {
        // add tab to injected list
        InjectedTabs.push(details.tabId);

        // clear 'content-security-policy'
        for (let respHeader of details.responseHeaders) {
          if (respHeader.name.toLowerCase() === "content-security-policy") {
            respHeader.value = "";
          }
        }

        return {
          responseHeaders: details.responseHeaders,
        };
      }
    }
  },
  {
    urls: ["<all_urls>"],
    types: ["main_frame"],
  },
  ["responseHeaders", "blocking"]
);

Reviews

Many users have left positive reviews and articles about BetterViewer. Here are some of them:

Product Hunt

BetterViewer – Prenez du plaisir à visualiser et éditer vos images sous Chrome / Edge

Reddit - BetterViewer is an incredible add-on for viewing images.

Youtube - Ver imagens e editar no Google Chrome ficou muito melhor, confira o BetterViewer

BetterViewer - traiter rapidement une image téléchargée sur internet

BetterViewer: mejora el visualizador de imágenes del navegador Chrome

Trabalhar com imagens no Google Chrome ficou mais fácil

إضافة لعرض الصور في متصفح كروم بطريقة احترافية مع إمكانية التعديل

BetterViewer – Enjoy viewing and editing your images in Chrome / Edge

Dùng BetterViewer xem ảnh trên trình duyệt thích hơn

推荐 50 个实用的 Chrome 扩展，建议收藏！

Chrome の画像ビューワー機能を大幅に機能拡張する拡張機能 『BetterViewer』

تبديل عارض صور كروم الافتراضي بآخر متطور يوفر كافة أدوات الرسم والتعديل

BetterViewer 的使用方法详解,最全面的教程

Telegram - Как редактировать изображения прямо в браузере

Nützliche Firefox-Add-ons für diejenigen, denen Anonymität im Internet wichtig ist

Conclusion

I’m very happy to see that BetterViewer is being used by many people. I hope that it will continue to be useful for many people. I will continue to improve it and add new features. If you have any suggestions or ideas, please let me know. Thank you for your support!