☰

CheapShark Steam Integration

Adds current pricing info from CheapShark for other stores to the Steam Store

  1. // ==UserScript==
  2. // @name CheapShark Steam Integration
  3. // @description Adds current pricing info from CheapShark for other stores to the Steam Store
  4. // @version 0.3.0
  5. // @author Phlebiac
  6. // @match https://store.steampowered.com/app/*
  7. // @connect www.cheapshark.com
  8. // @run-at document-end
  9. // @noframes
  10. // @license MIT; https://opensource.org/licenses/MIT
  11. // @namespace Phlebiac/CheapShark
  12. // @icon https://www.cheapshark.com/img/icons/round_114.png
  13. // @grant GM_addStyle
  14. // @grant GM_getValue
  15. // @grant GM_setValue
  16. // @grant GM_xmlhttpRequest
  17. // @grant unsafeWindow
  18. // ==/UserScript==
  19.  
  20. ;(async () => {
  21.   'use strict'
  22.  
  23.   const BASE_URL = 'https://www.cheapshark.com';
  24.   const API_URL = `${BASE_URL}/api/1.0/`;
  25.   const METACRITIC_BASE = 'https://www.metacritic.com';
  26.  
  27.   let userPrefs = {
  28.     open_in_new_tab: GM_getValue('open_in_new_tab', true),
  29.     show_metacritic: GM_getValue('show_metacritic', true),
  30.     store_info_cache: GM_getValue('store_info_cache', []),
  31.   }
  32.  
  33.   const appId = getCurrentAppId();
  34.   if (!appId) {
  35.     return;
  36.   }
  37.   injectCSS();
  38.  
  39.   if (!userPrefs.store_info_cache.length) {
  40.     log('Requesting store data...');
  41.     GM_xmlhttpRequest({
  42.       method: 'GET',
  43.       url: `${API_URL}stores`,
  44.       onload: buildStoreCache
  45.     });
  46.   } else {
  47.     //log(`Using cache of ${userPrefs.store_info_cache.length} stores`);
  48.   }
  49.  
  50.   GM_xmlhttpRequest({
  51.     method: 'GET',
  52.     url: `${API_URL}deals?steamAppID=${appId}&sortBy=Price`,
  53.     onload: addDealsToStorePage
  54.   })
  55.  
  56.   function getCurrentAppId() {
  57.     const urlPath = window.location.pathname;
  58.     const appId = urlPath.match(/\/app\/(\d+)/);
  59.     if (appId === null) {
  60.       log('Unable to get AppId from URL path:', urlPath);
  61.       return false;
  62.     }
  63.     return appId[1];
  64.   }
  65.  
  66.   function buildStoreCache(response) {
  67.     if (response.status === 200) {
  68.       try {
  69.         var stores = JSON.parse(response.responseText);
  70.         log(`Caching data for ${stores.length} stores`);
  71.         stores.forEach(store => { userPrefs.store_info_cache[store.storeID] = store; });
  72.         GM_setValue('store_info_cache', userPrefs.store_info_cache);
  73.       } catch (err) {
  74.         log('Unable to parse CheapShark response as JSON:', response);
  75.         log('Javascript error:', err);
  76.       }
  77.     } else {
  78.       log('Got unexpected HTTP code from CheapShark:', response.status);
  79.     }
  80.   }
  81.  
  82.   function addDealsToStorePage(response) {
  83.     if (response.status === 200) {
  84.       try {
  85.         var deals = JSON.parse(response.responseText);
  86.         //log(`Found ${deals.length} deals`);
  87.       } catch (err) {
  88.         log('Unable to parse CheapShark response as JSON:', response);
  89.         log('Javascript error:', err);
  90.       }
  91.     } else {
  92.       log('Got unexpected HTTP code from CheapShark:', response.status);
  93.     }
  94.     
  95.     let target = document.querySelector('.game_purchase_action');
  96.     if (target && deals.length > 0) {
  97.       var bestDeal = deals[0];
  98.       let node = Object.assign(document.createElement('span'), {
  99.         className: 'cheapshark_deals_row btnv6_blue_hoverfade btn_medium'
  100.       });
  101.       if (userPrefs.show_metacritic && bestDeal.metacriticScore > 0) {
  102.         node.appendChild(showMetaCritic(bestDeal));
  103.       }
  104.       node.appendChild(lowestPrice(bestDeal));
  105.       if (deals.length > 1) {
  106.         node.appendChild(listDeals(deals));
  107.       }
  108.       target.insertBefore(node, target.firstChild);
  109.       target.insertBefore(preferencesDialog(), node);
  110.     }
  111.   }
  112.  
  113.   function showMetaCritic(deal) {
  114.     let node = Object.assign(document.createElement('a'), {
  115.       className: 'cheapshark_metacritic',
  116.       href: `${METACRITIC_BASE}${deal.metacriticLink}`,
  117.       title: 'View on MetaCritic',
  118.       target: userPrefs.open_in_new_tab ? '_blank' : '_self'
  119.     });
  120.     node.appendChild(Object.assign(document.createElement('img'), {
  121.       src: `${METACRITIC_BASE}/MC_favicon.png`,
  122.       className: 'cheapshark_metacritic_img',
  123.       height: 20
  124.     }));
  125.     node.appendChild(Object.assign(document.createElement('span'), {
  126.       textContent: `${deal.metacriticScore}`,
  127.       className: `cheapshark_metacritic_score`
  128.     }));
  129.     return node;
  130.   }
  131.  
  132.   function lowestPrice(deal) {
  133.     var store = userPrefs.store_info_cache[deal.storeID];
  134.     let node = Object.assign(document.createElement('a'), {
  135.       className: 'cheapshark_lowest',
  136.       href: `${BASE_URL}/redirect?dealID=${deal.dealID}`,
  137.       title: `$${deal.salePrice} on ${store.storeName}`,
  138.       target: userPrefs.open_in_new_tab ? '_blank' : '_self'
  139.     });
  140.     node.appendChild(Object.assign(document.createElement('span'), {
  141.       textContent: `Lowest: $${deal.salePrice}`,
  142.       className: `cheapshark_lowest_price`,
  143.     }));
  144.     node.appendChild(Object.assign(document.createElement('img'), {
  145.       src: `${BASE_URL}${store.images.icon}`,
  146.       className: 'cheapshark_lowest_img' 
  147.     }));
  148.     return node;
  149.   }
  150.  
  151.   function listDeals(deals) {
  152.     // Build out a menu option for each store deal
  153.     let dealOptions = '';
  154.     for (const deal of deals) {
  155.       var store = userPrefs.store_info_cache[deal.storeID];
  156.       dealOptions = `${dealOptions}
  157. 				<div class="cheapshark_deal_option queue_menu_option">
  158. 					<div class="cheapshark_valign queue_menu_option_label">
  159. 						<a href="${BASE_URL}/redirect?dealID=${deal.dealID}" class="option_title">
  160. 						  <img class="cheapshark_valign" src="${BASE_URL}${store.images.icon}"> $${deal.salePrice} on ${store.storeName}
  161. 						</a>
  162. 					</div>
  163. 				</div>`;
  164.     }
  165.     return Object.assign(document.createElement('div'), {
  166.       className: 'cheapshark_deals_dropdown queue_control_button queue_btn_menu',
  167.       innerHTML: `
  168.         <div class="queue_menu_arrow">
  169. 					<span><img src="https://store.cloudflare.steamstatic.com/public/images/v6/btn_arrow_down_padded.png"></span>
  170. 			  </div>
  171. 			  <div class="cheapshark_menu_flyout queue_menu_flyout">
  172. 					<div class="queue_flyout_content">${dealOptions}
  173. 				  </div>
  174. 			  </div>`
  175.     });
  176.   }
  177.  
  178.   function preferencesDialog() {
  179.     const container = Object.assign(document.createElement('span'), {
  180.       className: 'cheapshark_prefs_icon',
  181.       title: 'Preferences for CheapShark Steam Integration',
  182.       textContent: '⚙'
  183.     })
  184.  
  185.     container.addEventListener('click', () => {
  186.       const html = `
  187.       <div class="cheapshark_prefs">
  188.         <div class="newmodal_prompt_description">
  189.           New preferences will only take effect after you refresh the page.
  190.         </div>
  191.         <blockquote>
  192.           <div>
  193.             <input type="checkbox" id="cheapshark_open_in_new_tab" ${ userPrefs.open_in_new_tab ? 'checked' : '' } />
  194.             <label for="cheapshark_open_in_new_tab">Open links in a new tab</label>
  195.           </div>
  196.           <div>
  197.             <input type="checkbox" id="cheapshark_show_metacritic" ${ userPrefs.show_metacritic ? 'checked' : '' } />
  198.             <label for="cheapshark_show_metacritic">Show MetaCritic score and link</label>
  199.           </div>
  200.         </blockquote>
  201.       </div>`
  202.  
  203.       unsafeWindow.ShowDialog('CheapShark on Steam Prefs', html);
  204.  
  205.       // Handle preferences changes
  206.       const inputs = document.querySelectorAll('.cheapshark_prefs input');
  207.  
  208.       for (const input of inputs) {
  209.         input.addEventListener('change', event => {
  210.           const target = event.target;
  211.           const prefName = target.id.replace('cheapshark_', '');
  212.  
  213.           switch (target.type) {
  214.             case 'text':
  215.               userPrefs[prefName] = target.value;
  216.               GM_setValue(prefName, target.value);
  217.               break;
  218.             case 'checkbox':
  219.               userPrefs[prefName] = target.checked;
  220.               GM_setValue(prefName, target.checked);
  221.               break;
  222.             default:
  223.               break;
  224.           }
  225.         })
  226.       }
  227.     })
  228.  
  229.     return container;
  230.   }
  231.  
  232.   function injectCSS() {
  233.     GM_addStyle(`
  234.       .cheapshark_deals_row {
  235.         border-style: solid;
  236.         border-color: black;
  237.         //padding: 0 0 2px 5px;
  238.         padding: 5px 5px 5px 5px;
  239.         background: #4d4b49;
  240.       }
  241.       .cheapshark_deals_row a:hover { 
  242.         color: white;
  243.       }
  244.       .cheapshark_metacritic {
  245.         margin-right: 6px;
  246.       }
  247.       .cheapshark_metacritic_img {
  248.         vertical-align: middle;
  249.         margin-right: 4px;
  250.       }
  251.       .cheapshark_metacritic_score {
  252.         font-size: 16px;
  253.         vertical-align: middle;
  254.       }
  255.       .cheapshark_lowest {
  256.         padding: 0 6px 0 6px;
  257.       }
  258.       .cheapshark_lowest_img {
  259.         vertical-align: middle;
  260.       }
  261.       .cheapshark_lowest_price {
  262.         font-size: 14px;
  263.         vertical-align: middle;
  264.         padding-right: 5px;
  265.       }
  266.       .cheapshark_deals_dropdown {
  267.         //margin: -6px 0 -6px 0;
  268.       }
  269.       .cheapshark_menu_flyout {
  270.         position: relative !important;
  271.         width: unset !important;
  272.         padding: 6px 6px;
  273.         margin: -34px -6px -6px -240px;
  274.         //position: absolute;
  275.         //left: 0px;
  276.         //margin-top: 5px;
  277.       }
  278.       .cheapshark_deal_option {
  279.         padding: 2px !important;
  280.       }
  281.       .cheapshark_valign {
  282.         vertical-align: middle;
  283.       }
  284.       .cheapshark_prefs_icon {
  285.         font-size: 20px;
  286.         padding: 0 2px;
  287.         //vertical-align: top;
  288.         cursor: pointer;
  289.       }
  290.       .cheapshark_prefs input[type="checkbox"], .cheapshark_prefs label {
  291.         line-height: 20px;
  292.         vertical-align: middle;
  293.         display: inline-block;
  294.         color: #66c0f4;
  295.         cursor: pointer;
  296.       }
  297.       .cheapshark_prefs blockquote {
  298.         margin: 15px 0 5px 10px;
  299.       }`)
  300.   }
  301.  
  302.   function log() {
  303.     console.log('[CheapShark Steam Integration]', ...arguments)
  304.   }
  305. })()