checkpointing progress

background.js

@@ -22,10 +22,38 @@ chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
 
 // });
 
-function sendMessage(obj) {
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-        chrome.tabs.sendMessage(tabs[0].id, obj, function(response) {
-          console.log(response.farewell);
-        });
+// function sendMessage(obj) {
+//     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+//         chrome.tabs.sendMessage(tabs[0].id, obj, function(response) {
+//           console.log(response.farewell);
+//         });
+//     });
+// }
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.queryBody.length) {
+      // sendResponse({text: "tada!"})
+      // return new Promise((resolve, _reject) => {
+      //   chrome.bookmarks.search(query, resolve);
+        // });
+      chrome.bookmarks.search(request.queryBody, results => {
+        console.log(results);
+        sendResponse({text: "tada!"})});
+    } else {
+        // return Promise.resolve([]);
+      sendResponse({text: ''});
+    }
+  }
+);
+
+
+function searchBookmarks() {
+  if (query.length) {
+    return new Promise((resolve, _reject) => {
+      chrome.bookmarks.search(query, resolve);
     });
-}
+  } else {
+      return Promise.resolve([]); 
+  }
+}

manifest.json

@@ -15,6 +15,10 @@
         "default_popup": "popup.html",
         "default_icon": "icon128.png"
     },
+    "background": {
+        "scripts": ["background.js"],
+        "persistent": false
+    },
     "content_scripts": [
         {
             "matches": ["https://*/*"],

overlay.js

@@ -3,17 +3,41 @@ document.addEventListener('keydown', event => {
     if (event.ctrlKey && event.key === 'l') {
         const overlayDiv = createOverlayDiv();
         const searchDiv = createSearchDiv();
+        const resultsDiv = createSearchResultsList();
 
+        overlayDiv.appendChild(resultsDiv);
         overlayDiv.appendChild(searchDiv);
         document.body.appendChild(overlayDiv);
 
         getSearchInputElement().focus();
+
+        // now the magic
+        const searchInput = getSearchInputElement();
+        searchInput.addEventListener('keyup', async function(event) {
+            const query = searchInput.value;
+            const searchResults = searchBookmarks(query);
+            // refine results
+            if (typeof searchResults != 'undefined') {
+                const refinedResults = refineResults(searchResults, query);
+                updateSearchText(refinedResults);
+                updateLinkEventListeners();
+            }
+            if (event.key === "Enter") {
+                // go to first event in the list
+                const top_result = refinedResults[0];
+                window.open(top_result.url)
+            }
+        });
     }
 });
 
 function getSearchInputElement() {
     return document.getElementById("searchInput");
-  }
+}
+
+function getSearchResultsElement() {
+    return document.getElementById("searchResults");
+}
 
 function createOverlayDiv () {
     const overlayDiv = document.createElement('div');
@@ -29,4 +53,76 @@ function createSearchDiv() {
     searchDiv.class = "";
     searchDiv.autocomplete = "off";
     return searchDiv
-}
+}
+
+function createSearchResultsList() {
+    const ul = document.createElement('ul');
+    ul.id = "searchResults";
+    return ul
+}
+
+function refineResults(searchResults, query) {
+    return searchResults.filter(result => {
+      // cuts bookmark Title down to a substring for closer matching
+      const queryLen = query.length;
+      const queryLower = query.toLowerCase();
+      const bookmarkTitle = result.title.substring(0, queryLen).toLowerCase();
+      return bookmarkTitle.includes(queryLower) & result.hasOwnProperty('url');
+    });
+  }
+
+
+function updateLinkEventListeners() {
+    const links = document.querySelectorAll(".link");
+    if (links.length) {
+        links.forEach(link => {
+        link.addEventListener('click', event => {
+            const ctrlPressed = (event.ctrlKey || event.metaKey);
+            const url = event.target.href;
+            chrome.tabs.create({'url': url, active: !ctrlPressed});
+        }, false); 
+    });
+}
+}
+
+function updateSearchText(results) {
+    const resultsDiv = getSearchResultsElement();
+    // wipes the unordered list
+    resultsDiv.innerHTML = '';
+    results.forEach(result => {
+        resultsDiv.appendChild(
+            createListItem(result)
+        );
+    });
+}
+
+function createListItem(result) {
+    const listElement = document.createElement('li');
+    const listURL = document.createElement('a');
+    listURL.class = "link";
+
+    if (result.title.length > 27) {
+        listURL.innerHTML = result.title.substring(0, 27) + '...';
+    }
+    else {
+        listURL.innerHTML = result.title;
+    }
+    listURL.href = result.url;
+    listElement.appendChild(listURL);
+    return listElement
+}
+
+function focusInput() {
+    getSearchInputElement().focus();
+}
+
+function searchBookmarks(query) {
+    if (query.length > 3) {
+        chrome.runtime.sendMessage({queryBody: query}, response => {
+            debugger
+            console.log(response)
+            return response
+
+        });
+    }
+}