search

salcido / discogs-enhancer

100% vanilla JS Chrome extension that adds useful features and functionality to Discogs.com
https://www.discogs-enhancer.com
GNU General Public License v3.0
108 stars 15 forks source link
chrome-extension discogs

readme

Discogs Enhancer

Chrome Web Store Chrome Web Store License GPL 3.0

Project Overview

100% vanilla JS Chrome extension for Discogs.com.

https://www.discogs-enhancer.com

Chrome Webstore Link

https://chrome.google.com/webstore/detail/discogs-enhancer/fljfmblajgejeicncojogelbkhbobejn

A Web Extension for Chrome

Discogs Enhancer adds extra features to both Discogs.com and Chrome. You can block sellers, use a dark theme, see price comparisons, get feedback notifications, convert foreign currencies, search Discogs and other online record shops with any highlighted text, improve tracklist readability, customize lots of Marketplace aspects, and more! Every feature is optional so you can choose the features you want to use.

Features

Performance

Discogs Enhancer gets a near perfect score with Google's Lighthouse when it comes to impact on user experience. Audit was performed using Exhouse in June of 2019.

Discogs Enhancer flow overview

Overview

Discogs Enhancer flow overview

Installation

Running / Development

Building

🏗 Adding a Feature

In order to add a togglable feature to the extension you'll need to update the files listed below. This guide assumes you've added a new <feature>.js file to js/extension/features/ and that it does not require additional CSS files, configuration pages, or submenus. Features that require their own configuration pages or submenus are more complex and are out of scope for this guide.

1️⃣ background.js

2️⃣ user-preferences.js

Example:

  if ( prefs.featureName ) {

    let featureName = document.createElement('script');

    featureName.type = 'text/javascript';
    featureName.src = chrome.runtime.getURL('js/extension/features/feature-name.js');
    featureName.className = 'de-init';

    elems.push(featureName);
  }

3️⃣ popup.html

Example:

    <!-- title of the new feature -->
    <div class="toggle-group">
      <p class="label">title of the new feature</p>
      <div class="meta hide">Keywords that represent the feature go here. These are used as metadata when searching.</div>

      <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleNewFeatureName" checked>
        <label class="onoffswitch-label" for="toggleNewFeatureName">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>

      <div class="help feature-name">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" color="#384047"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
        <div class="help-bubble">
          <div class="help-text">
            A short description of the new feature goes here.
          </div>
          <div class="arrow-right stroke"></div><div class="arrow-right"></div>
        </div>
      </div> <!-- /.help -->
    </div>

4️⃣ utils.js

Example:

export function applySave(message, event) {

  let prefs = {
    ...
    featureName: document.getElementById('toggleFeatureName').checked,
    ...
  }
}

5️⃣ popup.js

Make the following changes to popup.js:

6️⃣ learn.html

Add the feature description to learn.html. Make sure to insert the new markup block in the correct alphabetical order.

Example:

    <div class="feature-block">
      <!-- Feature Name -->
      <h2 id="featureName">Feature Name</h2>

      <p>Supporting text describing how the feature works.</p>
      <!-- supporting image(s) if needed -->
      <img src="https://github.com/salcido/discogs-enhancer/raw/master/./img/learn/feature-image.png" class="max-width" />
    </div>

📦 Build The Extension

Since changes have been made to webpack, the extension will need to be rebuilt by running npm run build. Once the build is finished, load the extension in Chrome by going to chrome://extensions. Make sure Developer Mode is checked, then click 'Load unpacked' and choose the newly exported dist folder. You should now be able to enable the feature from the popup menu.

Author

License

This project is licensed under the GPL License - see the LICENSE file for details