google: support memex results

assets/chrome_webstore_description.txt

@@ -1,5 +1,8 @@
 ## Changelog
 
+0.4.13
+* Google: add options for adding WorldBrain's Memex extension results
+
 0.4.12
 * Fix issue with options saving
 

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Web Search Navigator",
-    "version": "0.4.12",
+    "version": "0.4.13",
     "description": "Keyboard shortcuts for Google, YouTube, Github, Amazon, Scholar, and Startpage.",
     "author": "Web Search Navigator",
     "icons": {

src/options.js

@@ -24,6 +24,13 @@ const DEFAULT_CSS = `/* NOTE:
     border: 1px solid black !important;
 }
 
+.wsn-google-focused-memex-result {
+    border: 1px solid black !important;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
 /* Startpage has dark themes where a black outline won't be visible */
 .wsn-startpage-focused-link {
     outline: 1px solid #435a69 !important;
@@ -105,6 +112,7 @@ const DEFAULT_OPTIONS = {
   hideOutline: false,
   delay: 0,
   googleIncludeCards: true,
+  googleIncludeMemex: false,
   customCSS: DEFAULT_CSS,
 };
 

src/options_page.html

@@ -27,6 +27,11 @@ <h2>Google specific settings</h2>
                 <input type="checkbox" id="google-include-cards"> Include cards (top stories, twitter, videos) in regular Google search page
             </label>
         </div>
+        <div class="option">
+            <label for="google-include-memex">
+                <input type="checkbox" id="google-include-memex"> Include WorldBrain's Memex extension results in Google
+            </label>
+        </div>
     </section>
     <section id="keybindings-container">
         <h2>Keybindings</h2>

src/options_page.js

@@ -152,7 +152,9 @@ class OptionsPageManager {
     setOpt('delay',
         document.getElementById('delay').value);
     setOpt('googleIncludeCards',
-        document.getElementById('google-include-cards').value);
+        document.getElementById('google-include-cards').checked);
+    setOpt('googleIncludeMemex',
+        document.getElementById('google-include-memex').checked);
     // Handle keybinding options
     for (const [key, optName] of Object.entries(KEYBINDING_TO_DIV)) {
       // Keybindings are stored internally as arrays, but edited by users as
@@ -227,6 +229,8 @@ class OptionsPageManager {
     document.getElementById('delay').value = getOpt('delay');
     document.getElementById('google-include-cards').checked =
       getOpt('googleIncludeCards');
+    document.getElementById('google-include-memex').checked =
+      getOpt('googleIncludeMemex');
     // Restore options from divs.
     for (const [key, optName] of Object.entries(KEYBINDING_TO_DIV)) {
       // Keybindings are stored internally as arrays, but edited by users as

src/search_engines.js

@@ -143,18 +143,12 @@ class GoogleSearch {
         document.querySelector('#searchform.minidiv'), element);
   }
   onChangedResults(callback) {
-    if (!this.isImagesTab_()) {
-      return;
+    if (this.isImagesTab_()) {
+      return this.onImageSearchResults_(callback);
     }
-    const container = document.querySelector('.islrc');
-    if (!container) {
-      return;
+    if (this.options.googleIncludeMemex) {
+      return this.onMemexResults_(callback);
     }
-    const observer = new MutationObserver(async (mutationsList, observer) => {
-      callback(true);
-    });
-    observer.observe(container,
-        {attributes: false, childList: true, subtree: false});
   }
 
   isImagesTab_() {
@@ -252,6 +246,17 @@ class GoogleSearch {
           },
       );
     }
+    if (this.options.googleIncludeMemex) {
+      includedElements.push(
+          {
+            nodes: document.querySelectorAll(
+                '#memexResults ._3d3zwUrsb4CVi1Li4H6CBw a'),
+            // anchorSelector: nearestChildOrParentAnchor,
+            // highlightedElementSelector: nearestCardContainer,
+            highlightClass: 'wsn-google-focused-memex-result',
+          },
+      );
+    }
     // People also ask. Each one of the used selectors should be sufficient,
     // but we use both to be more robust to upstream DOM changes.
     const excludedElements = document.querySelectorAll([
@@ -261,6 +266,32 @@ class GoogleSearch {
     return getSortedSearchResults(includedElements, excludedElements);
   }
 
+  onImageSearchResults_(callback) {
+    const container = document.querySelector('.islrc');
+    if (!container) {
+      return;
+    }
+    const observer = new MutationObserver(async (mutationsList, observer) => {
+      callback(true);
+    });
+    observer.observe(container,
+        {attributes: false, childList: true, subtree: false});
+  }
+
+  onMemexResults_(callback) {
+    const container = document.querySelector('#rhs');
+    if (!container) {
+      return;
+    }
+    const observer = new MutationObserver(async (mutationsList, observer) => {
+      if (document.querySelector('#memexResults') != null) {
+        callback(true);
+      }
+    });
+    observer.observe(container,
+        {attributes: false, childList: true, subtree: true});
+  }
+
   get imageSearchTabs_() {
     const visibleTabs = document.querySelectorAll('.T47uwc > a');
     // NOTE: The order of the tabs after the first two is dependent on the