Add experimental amazon.com support

assets/chrome_webstore_description.txt

@@ -1,8 +1,8 @@
 New in 0.4.0
 * Support for navigating to Top Stories, Twitter, Videos, and callouts
 * Support for remapping keys with key sequences
-* Initial support for Youtube and Startpage (optional, needs to be enabled in
-  options)
+* Experimental support for Youtube and Startpage (optional, needs to be enabled
+  in options)
 * Bugfixes
 
 New in 0.3.3

src/manifest.json

@@ -21,7 +21,8 @@
         "https://startpage.com/*",
         "https://www.startpage.com/*",
         "https://www.youtube.com/*",
-        "https://scholar.google.com/*"
+        "https://scholar.google.com/*",
+        "https://www.amazon.com/*"
     ],
     "options_page": "options_page.html",
     "options_ui": {

src/options_page.html

@@ -39,11 +39,18 @@ <h3>Google specific settings</h3>
         </div>
     </div>
     <div id="search-engines-container">
-        <h3>Alternative search engines</h3>
+        <h3>EXPERIMENTAL: Alternative search engines</h3>
         <div class="option">
-            <input type="checkbox" id="startpage" name="startpage">Add Startpage</input>
-            <input type="checkbox" id="youtube" name="youtube">Add Youtube</input>
-            <input type="checkbox" id="google-scholar" name="google-scholar">Add Google Scholar</input>
+            <input type="checkbox" id="startpage" name="startpage"> Add Startpage</input>
+        </div>
+        <div class="option">
+            <input type="checkbox" id="youtube" name="youtube"> Add Youtube</input>
+        </div>
+        <div class="option">
+            <input type="checkbox" id="google-scholar" name="google-scholar"> Add Google Scholar</input>
+        </div>
+        <div class="option">
+            <input type="checkbox" id="amazon" name="amazon"> Add Amazon</input>
         </div>
     </div>
     <div id="keybindings-container">

src/options_page.js

@@ -14,6 +14,10 @@ const OPTIONAL_PERMISSIONS_URLS = {
     'https://www.youtube.com/*',
   ],
   'google-scholar': ['https://scholar.google.com/*'],
+  'amazon': [
+    'https://www.amazon.com/*',
+    // TODO: Add other Amazon domains (UK etc).
+  ],
 };
 
 const DIV_TO_OPTION_NAME = {
@@ -58,6 +62,10 @@ class OptionsPageManager {
     googleScholar.addEventListener('change', () => {
       this.setSearchEnginePermission(googleScholar);
     });
+    const amazon = document.getElementById('amazon');
+    amazon.addEventListener('change', () => {
+      this.setSearchEnginePermission(amazon);
+    });
     // NOTE: this.saveOptions cannot be passed directly or otherwise `this`
     // won't be bound to the object.
     document.getElementById('save').addEventListener('click', () => {
@@ -82,6 +90,8 @@ class OptionsPageManager {
         'youtube').checked;
     options.searchEngines.googleScholar = document.getElementById(
         'google-scholar').checked;
+    options.searchEngines.amazon = document.getElementById(
+        'amazon').checked;
     // Handle keybinding options
     for (const [key, optName] of Object.entries(DIV_TO_OPTION_NAME)) {
       // Options take commands as strings separated by commas.
@@ -138,6 +148,10 @@ class OptionsPageManager {
         (url) => {
           return permissions.origins.includes(url);
         });
+    const amazon = document.getElementById('amazon');
+    amazon.checked = OPTIONAL_PERMISSIONS_URLS['amazon'].every((url) => {
+      return permissions.origins.includes(url);
+    });
   }
 
   /**

src/search_engines.js

@@ -484,6 +484,47 @@ class GoogleScholar {
   }
 }
 
+class Amazon {
+  constructor(options) {
+    this.options = options;
+  }
+  get urlPattern() {
+    return /(www\.)?amazon\.com\/s\?/;
+  }
+  get searchBoxSelector() {
+    return '#twotabsearchtextbox';
+  }
+
+  getSearchResults() {
+    const includedElements = [
+      {
+        nodes: document.querySelectorAll(
+            '.s-search-results h2 .a-link-normal.a-text-normal'),
+        highlightClass: 'amazon-focused-search-result',
+        // containerSelector: (n) => n.closest('.sg-row').parentElement.closest('.sg-row')
+      },
+      {
+        nodes: document.querySelectorAll('.a-pagination a'),
+        highlightClass: 'amazon-focused-search-result',
+      },
+    ];
+    return getSortedSearchResults(includedElements, []);
+  }
+
+  get tabs() {
+    const pagesTabs = {
+      navigateNextResultPage:
+          document.querySelector('.a-pagination .a-last a'),
+    };
+    const paginationContainer = document.querySelector('.a-pagination');
+    if (paginationContainer && paginationContainer.children[0] && !paginationContainer.children[0].classList.contains('a-normal')) {
+      pagesTabs.navigatePreviousResultPage =
+        paginationContainer.children[0].querySelector('a');
+    }
+    return pagesTabs;
+  }
+}
+
 // Get search engine object matching the current url
 /* eslint-disable-next-line no-unused-vars */
 const getSearchEngine = (options) => {
@@ -492,6 +533,7 @@ const getSearchEngine = (options) => {
     new StartPage(options),
     new Youtube(options),
     new GoogleScholar(options),
+    new Amazon(options),
   ];
   // Switch over all compatible search engines
   const href = window.location.href;

src/search_results.css

@@ -5,7 +5,9 @@
   position: absolute;
 }
 
-.google-focused-card {
+.google-focused-card,
+.google-scholar-next-page,
+.amazon-focused-search-result {
   /* NOTE: Without !important the style is overridden by Google stylesheets */
   border: 1px solid black!important;
 }
@@ -28,7 +30,3 @@
 .no-outline:focus  {
   outline: none;
 }
-
-.google-scholar-next-page {
-  border: 1px solid black!important;
-}