First version

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/site

README.md

@@ -0,0 +1,8 @@
+# BetterViewer
+
+BetterViewer makes image viewing faster, easier, and more fun.
+
+BetterViewer was designed as a replacement for the image viewing mode built into Chrome-based web browsers. 
+
+With BetterViewer you can use various keyboard shortcuts to quickly pan, zoom images, edit and a lot more!
+

background.js

@@ -0,0 +1,84 @@
+chrome.webRequest.onHeadersReceived.addListener(function (details) {
+    if (details.tabId !== -1) {
+
+        let header = getHeaderFromHeaders(details.responseHeaders, 'content-type');
+        let res = header && header.value.split(';', 1)[0];
+        // check if image
+        if (res && res.indexOf('image') !== -1) {
+
+
+            /**
+             * Note: I know this is not the best way to do this, but I don't know how to do it better
+             * I tried to abstract this but sometimes it doesn't work (when refreshing the image tab)
+             * https://stackoverflow.com/questions/21535233/injecting-multiple-scripts-through-executescript-in-google-chrome-extension
+             * My current solution is to use gulp to concat all the scripts and then inject them
+             * If you know a better way, please let me know
+             */
+            chrome.tabs.executeScript(details.tabId, {
+                file: './dist/all.js',
+            }, function (res) {
+                chrome.tabs.insertCSS(details.tabId, {
+                    file: './dist/all.css',
+                }, function (res) {
+                    chrome.tabs.sendMessage(details.tabId, {
+                        type: 'injected',
+                        url: details.url,
+                    });
+                })
+            });
+
+
+            // Remove "content-security-policy" header from the selected image to allow it to be loaded in the viewer
+            // Same idea from here : https://github.com/PhilGrayson/chrome-csp-disable/blob/master/background.js
+            for (let i = 0; i < details.responseHeaders.length; i++) {
+                if (details.responseHeaders[i].name.toLowerCase() === 'content-security-policy') {
+                    details.responseHeaders[i].value = '';
+                }
+            }
+            return {
+                responseHeaders: details.responseHeaders
+            };
+        }
+    }
+}, {
+    urls: ['*://*/*'],
+    types: ['main_frame']
+}, ['responseHeaders', 'blocking']);
+
+
+/**
+ * Helper function: get header from headers
+ * @param {header} headers 
+ * @param {headerName} headerName 
+ * @returns 
+ */
+function getHeaderFromHeaders(headers, headerName) {
+    for (let i = 0; i < headers.length; ++i) {
+        let header = headers[i];
+        if (header.name.toLowerCase() === headerName) {
+            return header;
+        }
+    }
+}
+
+
+// when the extension is installed or upgraded ...
+chrome.runtime.onInstalled.addListener(function (details) {
+    if (details.reason === "install") {
+        // Code to be executed on first install
+        chrome.tabs.create({
+            url: "https://betterviewer.surge.sh/welcome.html"
+        });
+    } else if (details.reason === "update") {
+        // When extension is updated
+    } else if (details.reason === "chrome_update") {
+        // When browser is updated
+    } else if (details.reason === "shared_module_update") {
+        // When a shared module is updated
+    }
+});
+
+
+
+
+

css/painterro.darktheme.css

@@ -0,0 +1,93 @@
+select.ptro-input[data-id=fontName] {
+  width: 150px !important;
+}
+
+.ptro-tool-ctl-name {
+  display: none !important;
+}
+
+.ptro-named-btn {
+  width: 75px !important;
+}
+
+.ptro-substrate{
+  display: none !important;
+}
+
+.ptro-resize-widget :not(#paint-wrapper-wrapper > div.ptro-color-widget-wrapper.ptro-common-widget-wrapper.ptro-v-middle > div){
+  width: 400px !important;
+}
+
+.ptro-resize-widget {
+  width: 400px !important;
+}
+
+
+.tool-controls {
+  padding: 10px !important;
+}
+
+
+.ptro-wrapper .ptro-settings-widget {
+  width: 400px !important;
+}
+
+
+td.ptro-label.ptro-resize-table-left {
+  padding-right: 20px !important;
+}
+
+.ptro-input {
+  border          : 1px solid #202020 !important;
+  background-color: #1a1a1a !important;
+  color           : #f5f5f5 !important;
+}
+
+.ptro-scroller::-webkit-scrollbar-track {
+  border          : 1px solid black;
+  background-color: #333333;
+}
+
+.ptro-scroller::-webkit-scrollbar {
+  width           : 10px;
+  height          : 10px;
+  background-color: #333333;
+}
+
+.ptro-scroller::-webkit-scrollbar-thumb {
+  background-color: #000000;
+}
+
+.ptro-color-control,
+.ptro-info,
+.ptro-label {
+  color: #ffffff !important;
+}
+
+.ptro-color-main {
+  background-color: #242424 !important;
+}
+
+.ptro-wrapper {
+  background-color: #363636 !important;
+}
+
+.ptro-color-control {
+  background-color: #131313 !important;
+}
+
+.ptro-pallet .ptro-color-main .ptro-v-middle-in {
+  width: 200px !important;
+}
+
+.ptro-icon-btn {
+  border-radius: 50% !important;
+}
+
+.ptro-icon {
+  font-size: 16px !important;
+}
+
+.ptro-color-active-control{
+  background-color: #3b3b3b !important;
+}