100% vanilla JS Chrome extension for Discogs.com.
https://www.discogs-enhancer.com
https://chrome.google.com/webstore/detail/discogs-enhancer/fljfmblajgejeicncojogelbkhbobejn
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.
- Block Sellers
- Block Buyer Shortcuts
- Favorite Sellers
- Compare suggested prices to listed prices
- Contextual menu searching
- Ask for confirmation before removing items from your Collection
- Quick currency conversion
- Dark Theme (WCAG 2.0 AA compliant)
- Demand Index
- Scan Artist/Label releases for comments
- Scan your seller inventory for items priced below the median Marketplace value
- Tweak Artist/Label Discriminators
- Everlasting Collection
- Everlasting Marketplace
- Buyer/Seller feedback notifications
- Seller inventory ratings
- Get larger BAOI fields when editing releases
- Tag Sellers based on reputation
- Filter Marketplace items by media condition
- Filter Marketplace items by sleeve condition
- Filter Marketplace items by shipping country
- Filter Marketplace items by availability
- Filter Marketplace items by price
- Open items in Lists in new tabs
- Editing notepad for Releases
- Search Google for releases by clicking on the release title
- Hide Min, Median, Max columns on the Collection page
- Marketplace Media/Sleeve condition highlights
- See the number of ratings/votes a release received in the Marketplace
- See icons next to seller's names in the Marketplace when you have items of theirs in your cart
- See release ratings/votes expressed as a percentage
- Notes character counter
- See actual dates an item was added to your Collection/Wantlist
- See the relative date an item was last sold in the Marketplace
- See the average sale price on the Release page
- Tag seller's names with an icon in the Marketplace when you have an item of theirs in your cart
- View a random item from your collection from any page
- Remove an item from your Wantlist directly from the Marketplace
- See the total playing time for any release when track times are provided
- Sort dialog boxes and Marketplace filters alphabetically
- Easily format comments/reviews using Text Formatting Shortcuts
- Improve Tracklist readability
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.
git clone https://github.com/salcido/discogs-enhancer.git
- change into the new directory
npm install
- Watch for changes:
npm run watch
-
Run
unauthenticated
functional tests:npm test
-
Run
authenticated
functional tests:Note: If you want to run authenticated tests you'll need an account to log in with and run them with one of the commands below. When running the
authenticated
tests, theunauthenticated
tests will also be run.env USERNAME=<username> env PASSWORD=<password> npm test
- This will try to log you in automatically using Discogs authentication.
env USEOAUTH=true npm test
- This will pop up the login page to allow you to manually login via supported OAuth providers; Google, Facebook, or Apple.
- Export the extension to
dist
directory:npm run build:production
- Go to
chrome://extensions
in a new Chrome tab - Click "Developer Mode" in the upper-right corner
- Click "Load Unpacked" and choose the exported
dist
folder and you're done!
Test Checklist (33/37)
- Better Collection UI
- Block Buyers (Requires user w/ sales history)
- Everlasting Collection
- Feedback Notifications (Requires user w/ Buyer/Seller feedback)
- Hide Min/Med/Max columns
- Larger BAOI Fields
- Notes Counter
- Random Item
- Remove From Wantlist Shortcuts
- Seller Items In Cart
- Show Actual Add Date
- Show Average Prices
- Suggested Prices
- Text Format Shortcuts
- Block Sellers
- Blurry Image Fix
- Favorite Sellers
- Filter Sleeve Condition
- Inventory Ratings
- Seller Rep
- Currency Converter
- Dark Theme
- Everlasting Marketplace
- Filter Media Condition
- Filter Shipping Country
- Large YouTube playlists
- Lists In New Tabs
- Marketplace Condition Highlights
- Quick Search
- Rating Percentage
- Relative Last Sold Dates
- Release Durations
- Release Ratings
- Release Scanner
- Sort Buttons
- Tracklist Readability
- Tweak Discriminators
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.
-
Add a new property to the
prefs
object ofbackground.js
. It should be aboolean
and have a unique name that easily identifies the feature. Make sure to add the property in the correct alphabetical position. -
Add a conditional check for the new
prefs
property under theUser Preferences
comment block. This should check the preference and create a DOM element that contains the necessary script files for the new feature.
Example:
if ( result.prefs.featureName ) {
let featureName = document.createElement('script');
featureName.type = 'text/javascript';
featureName.src = chrome.extension.getURL('js/extension/features/feature-name.js');
featureName.className = 'de-init';
elems.push(featureName);
}
- Modify
popup.html
with the new preference menu option. Update the markup with a uniqueid
, help-bubble text, and meta keywords. Make sure to add the markup in the correct alphabetical position.
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>
- Modify
manifest.json
andwebpack.config.js
with the paths to the new feature files.
Example:
manifest.json
"js/extension/features/feature-name.js",
webpack.config.js
[features + 'feature-name']: `${features}feature-name.js`,
- Update the
applySave
method inutils.js
with the same property name used inbackground.js
. Be sure to reference theid
set in thepopup.html
markup and add the property in the correct alphabetical position.
Example:
export function applySave(message, event) {
let prefs = {
...
featureName: document.getElementById('toggleFeatureName').checked,
...
}
}
Make the following changes to popup.js
:
- Update the
load
eventListener with the new property. - Add a new
change
eventListener under theEvent listeners for toggles
comment block. - Update the
chrome.storage.sync.get
callback with the new property.
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="../img/learn/feature-image.png" class="max-width" />
</div>
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.
- Matthew Salcido - salcido
![Buy Me A Coffee](https://github.com/salcido/Discogs-Enhancer/raw/master/img/learn/coffee-btn.png)
This project is licensed under the GPL License - see the LICENSE file for details