Merge pull request #8 from cadomac/develop

Develop > Staging

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+/**/node_modules
+
+/**/dist

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "fresh-eyes-monorepo",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "GNU General Public License"
+}

packages/chrome/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@fresh-eyes/chrome",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "build": "webpack --config webpack/webpack.config.js",
+    "clean": "rm -rf ./dist",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "GNU General Public License",
+  "devDependencies": {
+    "@types/chrome": "^0.0.243",
+    "copy-webpack-plugin": "^11.0.0",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  }
+}

js/background.js → packages/chrome/src/js/background.ts

@@ -3,7 +3,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (changeInfo.status === "complete" && tab.active) {
     console.log("active")
     chrome.scripting.executeScript({
-      target: {tabId: tab.id},
+      target: {tabId: tab.id ?? -1},
       files: ["js/filters.js"]
     })
   }

packages/chrome/src/js/filters.ts

@@ -0,0 +1,78 @@
+const normal:ColorMatrix = [
+  [1, 0, 0, 0, 0],
+  [0, 1, 0, 0, 0],
+  [0, 0, 1, 0, 0],
+  [0, 0, 0, 1, 0],
+];
+
+const trueColor:ColorMatrix = [
+  [3.00, -1.00, -0.00, 0, 0],
+  [-1.00, 2.50, 0.00, 0, 0],
+  [-0.00, -0.00, 1.00, 0, 0],
+  [0, 0, 0, 1, 0],
+];
+
+const trueColorN:ColorMatrix = [
+  [2.67, -1.12, -0.00, 0, 0],
+  [-1.09, 2.43, 0.00, 0, 0],
+  [-0.00, -0.00, 1.00, 0, 0],
+  [0, 0, 0, 1, 0],
+];
+
+const matrices:{
+  [key:string]: ColorMatrix
+} = {
+  "normal": normal,
+  "TrueColor": trueColor,
+  "TrueColorG": trueColor,
+  "TrueColorD": trueColor,
+  "TrueColorN": trueColorN,
+}
+
+function constructMatrixFromValue(matrix:ColorMatrix, value:number) {
+  let newMatrix:number[][] = [[],[],[],[]];
+  let valArr:number[] = [];
+
+  for (let i = 0; i < matrix.length; i++) {
+    for (let j = 0; j < matrix[i].length; j++) {
+      let currMat = matrix[i][j];
+      let signMult = currMat > 0 ? 1 : -1;
+      let currNorm = normal[i][j];
+      if (i < 3 && j < 3) {
+        newMatrix[i][j] = normal[i][j] + (signMult * ((Math.abs(currMat) - currNorm) / 100) * value);
+      } else {
+        newMatrix[i][j] = matrix[i][j];
+      }
+      valArr.push(newMatrix[i][j]);
+    }
+  }
+
+  return valArr
+}
+
+fetch(chrome.runtime.getURL('img/filters.svg'), {
+  method: "GET"
+})
+.then(res => res.text())
+.then(str => {
+  const filter = new window.DOMParser().parseFromString(str, "text/xml").documentElement;
+  filter.style.display = "none";
+  filter.style.width = "0";
+  filter.style.height = "0";
+  document.body.appendChild(filter);
+})
+.catch((err) => {
+  console.error(err);
+})
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+  if (req.value && req.filter) {
+    let targetFilter = document.querySelector(`#${req.filter}`);
+    let valArr = constructMatrixFromValue(matrices[req.filter], req.value);
+    let targetFilterVals = targetFilter!.querySelector(`feColorMatrix[type="matrix"]`);
+    targetFilterVals!.setAttribute("values", valArr.join(" "))
+    sendResponse({msg: "success"});
+  } else {
+    sendResponse({msg: "malformed request"})
+  }
+})

packages/chrome/src/js/popup.ts

@@ -0,0 +1,119 @@
+function $(selector: string, context?: Document) {
+  return (context || document).querySelector(selector)
+}
+
+$.all = function (selector: string, context?: Document) {
+  return Array.prototype.slice.call(
+    (context || document).querySelectorAll(selector)
+  )
+}
+
+let current: string;
+let filterValues:{
+  [x:string]: string | number
+} = {
+  "TrueColor": 100,
+  "TrueColorG": 100,
+  "TrueColorD": 100,
+  "TrueColorN": 100,
+}
+
+if (!localStorage.getItem("filterValues")) {
+  localStorage.setItem("filterValues", JSON.stringify(filterValues));
+} else {
+  filterValues = JSON.parse(localStorage.getItem("filterValues")!);
+  Object.keys(filterValues).forEach(async (key) => {
+    let val = filterValues[key];
+    const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
+    const response = await chrome.tabs.sendMessage(tab.id ?? -1, {filter: key, value: val});
+    if (response.msg !== "success") {
+      console.error("Matrix error");
+    }
+  })
+}
+
+if (!localStorage.getItem("currentFilter")) {
+  localStorage.setItem("currentFilter", "NoFilter");
+  current = "NoFilter";
+} else {
+  current = localStorage.getItem("currentFilter")!;
+}
+
+let ul = document.createElement('ul'),
+    vision = {
+      "NoFilter": '',
+      'HueRotate': '6%',
+      'TrueColor': '6%',
+      'TrueColorG': '6%',
+      'TrueColorD': '6%',
+      'TrueColorN': '6%',
+    }
+
+Object.keys(vision).forEach(function (el) {
+  let li = document.createElement('li')
+  li.dataset['type'] = el
+  li.textContent = el
+  li.addEventListener('click', handler, false)
+  el == localStorage.getItem("currentFilter") && li.classList.add('current')
+  ul.appendChild(li)
+})
+
+const slider = document.createElement('input');
+slider.type = "range";
+if (current.includes("TrueColor")) {
+  slider.value = filterValues[current].toString();
+}
+slider.addEventListener('input', async (e) => {
+  const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
+  if (e.target && e.target instanceof HTMLInputElement) {
+    const response = await chrome.tabs.sendMessage(tab.id ?? -1, {filter: current, value: e.target.value});
+    if (response.msg === "success") {
+      filterValues = {...filterValues, [current]: e.target.value}
+      localStorage.setItem("filterValues", JSON.stringify(filterValues))
+    }
+  }
+});
+
+document.body.appendChild(slider);
+document.body.appendChild(ul);
+
+function handler(e: Event) {
+  if (e.target && e.target instanceof HTMLElement) {
+    current = e.target.dataset['type'] ?? "";
+    $.all('li').forEach(function(li) {
+      li.classList.remove('current')
+    })
+    e.target.classList.add('current');
+  }
+  localStorage.setItem("currentFilter", current);
+  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+    let currTab = tabs[0];
+    if (currTab) {
+      chrome.scripting.removeCSS({
+        css: localStorage.getItem("css") || "",
+        target: {
+          tabId: currTab.id ?? -1,
+        }
+      })
+      if (current !== "NoFilter") {
+        chrome.scripting.insertCSS(
+          { 
+            css: 'html { -webkit-filter: url(#' + current + '); }',
+            target: {
+              tabId: currTab.id ?? -1
+            }
+          }
+        )
+        localStorage.setItem("css", `html { -webkit-filter: url(#${current}); }`)
+
+      }
+      console.log(current)
+      if (current.includes("TrueColor")) {
+        slider.disabled = false;
+        slider.value = JSON.parse(localStorage.getItem("filterValues")!)[current];
+      } else {
+        slider.disabled = true;
+      }
+    }
+  })
+}