suggest search word

css/style.css

@@ -41,3 +41,13 @@ a:focus {
 .nav-link:hover {
   cursor: pointer;
 }
+
+.suggestion {
+  position: absolute;
+  padding: 0.45rem 0.8rem;
+  line-height: 1.5;
+
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 400;
+  font-size: 1rem;
+}

index.html

@@ -47,6 +47,7 @@
               placeholder="Search"
               aria-label="Search"
             />
+            <span class="suggestion" id="suggestion"></span>
           </div>
         </div>
       </div>

src/const.js

@@ -9,3 +9,5 @@ export const HISTORY_LIST_CLASS = "historyItemList";
 export const HISTORY_ITEM_CLASS = "historyItem";
 export const BOOKMARK_LIST_CLASS = "bookmarkItemList";
 export const BOOKMARK_ITEM_CLASS = "bookmarkItem";
+export const MAX_SUGGEST_CANDIDATES = 100;
+export const SUGGEST_CLASS = "suggestion";

src/main.js

@@ -4,6 +4,7 @@ import * as util from "./util.js";
 import { shortcutObserver } from "./shortcutObserver.js";
 import { dumpHistory } from "./history.js";
 import { dumpBookmarks } from "./bookmark.js";
+import { storeSuggestCandidates, findSuggestCandidate } from "./suggest.js";
 
 let preSearchWord = "";
 
@@ -26,6 +27,8 @@ async function initialize() {
     constant.HISTORY_ITEM_CLASS,
     constant.BOOKMARK_ITEM_CLASS,
     constant.SEARCH_FORM_CLASS,
+    constant.SUGGEST_CLASS,
+    storeSuggestCandidates,
   );
   searchInputObserver();
 
@@ -80,6 +83,19 @@ function buildItemList(data, elementId, itemClass) {
 }
 
 async function searchInputObserver() {
+  $(util.toId(constant.SEARCH_FORM_CLASS)).keyup(
+    util.debounce(async function () {
+      const searchWord = $(util.toId(constant.SEARCH_FORM_CLASS)).val();
+      if (searchWord === "") {
+        document.getElementById(constant.SUGGEST_CLASS).innerText = "";
+        return;
+      }
+
+      const suggest = (await findSuggestCandidate(searchWord)) ?? "";
+      document.getElementById(constant.SUGGEST_CLASS).innerText = suggest;
+    }, 0),
+  );
+
   $(util.toId(constant.SEARCH_FORM_CLASS)).keyup(
     util.debounce(async function () {
       const searchWord = $(util.toId(constant.SEARCH_FORM_CLASS)).val();

src/shortcutObserver.js

@@ -7,11 +7,18 @@ export function shortcutObserver(
   historyItemClass,
   bookmarkItemClass,
   searchClass,
+  suggestClass,
+  storeSuggestCandidatesFn,
 ) {
   $(window).keydown(function (e) {
     const $focused = $(":focus");
     const clazz = $focused.attr("class");
 
+    if (e.code === "Enter") {
+      const searchedText = $(util.toId(searchClass)).val();
+      storeSuggestCandidatesFn(searchedText);
+    }
+
     // Move next/prev history/bookmark
     if ((e.ctrlKey && e.code === "KeyN") || e.code === "ArrowDown") {
       if (clazz?.includes(searchClass)) {
@@ -75,6 +82,15 @@ export function shortcutObserver(
       }
     }
 
+    // Apply suggestion
+    if ((e.ctrlKey && e.code === "KeyE") || e.code === "Tab") {
+      if (clazz?.includes(searchClass) && $(util.toId(searchClass)).val()) {
+        const suggestion = document.getElementById(suggestClass).innerText;
+        $(util.toId(searchClass)).val(suggestion);
+        e.preventDefault();
+      }
+    }
+
     // Focus search box
     if (e.metaKey && e.code === "KeyF") {
       $(util.toId(searchClass)).focus();

src/suggest.js

@@ -0,0 +1,35 @@
+import * as constant from "./const.js";
+
+export async function storeSuggestCandidates(candidate) {
+  const oldCandidates = await fetchSuggestCandidates();
+  const newCandidates = appendSuggestion(oldCandidates, candidate);
+  chrome.storage.local.set({ suggestCandidates: newCandidates });
+}
+
+export async function findSuggestCandidate(word) {
+  const candidates = await fetchSuggestCandidates();
+  const suggest = candidates.find((c) => {
+    if (c.startsWith(word)) {
+      return c;
+    }
+  });
+  return suggest;
+}
+
+//////////////////
+// Private Methods
+//////////////////
+
+async function fetchSuggestCandidates() {
+  const { suggestCandidates } = await chrome.storage.local.get({
+    suggestCandidates: [],
+  });
+  return suggestCandidates;
+}
+
+function appendSuggestion(candidates, candidate) {
+  let _candidates = structuredClone(candidates);
+  _candidates.unshift(candidate);
+  _candidates.reverse().slice(constant.MAX_SUGGEST_CANDIDATES).reverse();
+  return _candidates;
+}