add result color change

package.json

@@ -24,5 +24,9 @@
     "typescript": "^4.0.5",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.1.0"
+  },
+  "dependencies": {
+    "@types/jquery": "^3.5.4",
+    "jquery": "^3.5.1"
   }
 }

public/manifest.json

@@ -2,10 +2,17 @@
   "manifest_version": 2,
   "name": "FreshSearchResult",
   "description": "新鮮な情報の見分けをつけます",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "icons": { "128": "image/icon128.png" },
-  "background": {
-    "scripts": ["js/main.js"]
-  },
-  "permissions": ["contextMenus", "tabs"]
+  "content_scripts": [
+    {
+      "matches": [
+        "https://www.google.com/*",
+        "http://www.google.com/*"
+      ],
+      "js": [
+        "js/main.js"
+      ]
+    }
+  ]
 }

src/main.ts

@@ -1,17 +1,21 @@
-const openTab = (query?: string) => {
-  if (query) {
-    chrome.tabs.create({ url: `https://www.google.com/search?q=${query}` });
-  }
-}
+import $ from 'jquery';
 
-chrome.runtime.onInstalled.addListener((): void => {
-  chrome.contextMenus.create({
-    id: "sample",
-    title: "選択した文字列を検索する",
-    contexts: ["selection"]
-  });
-});
+const NOW = new Date();
+const OLDEST = new Date(NOW.getFullYear() - 10, NOW.getMonth(), NOW.getDate(), NOW.getHours(), NOW.getMinutes(), NOW.getSeconds(), NOW.getMilliseconds());
+const BASE = NOW.getTime() - OLDEST.getTime();
+const ONEMINUSCOLOR = [255-205, 255-170, 255-85];
 
-chrome.contextMenus.onClicked.addListener((info, tab): void => {
-  openTab(info.selectionText);
+$(function() {
+  // $("body").css("background-color", "#CCC6B8");
+  $(".g").each(function(index: number, element: HTMLElement) {
+    const span = $(element).find("span.f");
+    if (span.length > 0) {
+      const date = new Date(span[0].innerHTML.substring(0, 10));
+      const elapsed = NOW.getTime() - date.getTime();
+      const density = 1 - Math.max(Math.min(elapsed / BASE, 1), 0);
+      element.style.backgroundColor = `rgba(${205+ONEMINUSCOLOR[0]*density}, ${170+ONEMINUSCOLOR[1]*density}, ${85+ONEMINUSCOLOR[2]*density}, 0.5)`;
+    } else {
+      element.style.backgroundColor = `rgba(51, 221, 255, 0.2)`;
+    }
+  });
 });