Add new selector; add 'additional selectors' option

.gitignore

@@ -1 +1,2 @@
-.idea/
+.idea/
+.DS_Store

README.md

@@ -12,14 +12,17 @@ This isn't a donation - it's a loan from you to those in need.  You get paid bac
 
 Changelog
 ---------
+0.14
+* Fix for new CSS classes. Adds 'additional selectors' option to support quick fixes for future Feedly markup changes.  Thanks @bbbrrriiiaaannn, @henley-regatta, @hudochenkov!
+
 0.13
 * Fix for another style change.  Thanks @hudochenkov
 
 0.12
-* Fix for React-based layouts.  Thanks @BrianCS
+* Fix for React-based layouts.  Thanks @bbbrrriiiaaannn
 
 0.11
-* Fix for scenarios I hadn't thought of - like non-expanded article.  Thanks @BrianCS
+* Fix for scenarios I hadn't thought of - like non-expanded article.  Thanks @bbbrrriiiaaannn
 
 0.10
 * For some instances, the 0.9 fix wasn't working.  Did a fallback for a fix that hopefully fixes this issue

src/js/keypress.js

@@ -3,18 +3,20 @@
  *
  * @author Aaron Saray (http://aaronsaray.com)
  */
+
 (function(){
 	/**
 	 * The selectors used to find the URL
 	 * @type {array}
 	 */
-    var selectors = [
+	var selectors = [
 		'div.selectedEntry a.title',			// title bar for active entry, collapsed or expanded
 		'.selectedEntry a.visitWebsiteButton',	// the button square button on list view
-		'.list-entries .selected a.visitWebsiteButton',	// the button square button on list view
+		'.list-entries .inlineFrame--selected a.visitWebsiteButton',	// the button square button on list view
 		'a.visitWebsiteButton',					// the floating one for card view
-		'.entry.selected a.title'				// title bar for active entry in React-based collapsed list view
-    ];
+		'.entry.selected a.title',				// title bar for active entry in React-based collapsed list view
+		'.list-entries .entry--selected .entry__title', // 2021 Block-Element-Modifier class syntax update
+	];
 
 	/**
 	 * Main feedlybackgroundtab constructor
@@ -27,17 +29,26 @@
 		 * @private
 		 */
 		var _triggerKeyCode = 59;
+		var selectorSet = ''
 
 		/**
 		 * Used to create the default key code from local storage
 		 * Also modifies the help popup
 		 */
 		this.init = function() {
-			chrome.storage.sync.get('shortcutKey', function(settings) {
-				if (settings.shortcutKey) {
-					_triggerKeyCode = settings.shortcutKey.charCodeAt(0);
+			selectorSet = selectors.join();
+
+			chrome.storage.sync.get(
+				['shortcutKey', 'selector'],
+				function(settings) {
+					if (settings.shortcutKey) {
+						_triggerKeyCode = settings.shortcutKey.charCodeAt(0);
+					}
+					if (settings.selector) {
+						selectorSet += `,${settings.selector}`;
+					}
 				}
-			});
+			);
 		};
 
 		/**
@@ -46,24 +57,27 @@
 		 * @param e
 		 */
 		this.keyPressHandler = function(e) {
+			if ( e.keyCode != _triggerKeyCode) {
+				return
+			}
+
 			var tag = e.target.tagName.toLowerCase();
-			if (tag != 'input' && tag != 'textarea') {
-				if ((!e.altKey && !e.ctrlKey) && e.keyCode == _triggerKeyCode) {
-                    var url;
-                    for (var x in selectors) {
-                        url = document.querySelector(selectors[x]);
-                        if (url) {
-                            break;
-                        }
-                    }
-					if (url) {
-						chrome.extension.sendMessage({url: url.href});
-					}
-                    else {
-                        console.log("Could not find any selectors from: " + selectors.join());
-                    }
-				}
+			if (tag == 'input' || tag == 'textarea') {
+				return;
+			}
+
+			if (e.altKey || e.ctrlKey ) {
+				return
 			}
+
+			const found = document.querySelector(selectorSet);
+
+			if( !found ) {
+				console.log("Could not find any selectors from: " + selectorSet);
+				return;
+			}
+
+			chrome.extension.sendMessage({url: found.href});
 		}
 	};
 

src/js/options.js

@@ -13,13 +13,13 @@
 	 * @todo figure out how to not refer to the querySelector so many times in the code
 	 */
 	function FBT_Options() {
-
 		/**
 		 * Validation messages
 		 */
 		var _messages = {
 			success: 'Options saved successfully.',
-			validateFailure: 'Please choose a shortcut key.'
+			keyValidateFailure: 'Please choose a shortcut key.',
+			selectorValidateFailure: 'Correct the CSS selector.',
 		};
 
 		/**
@@ -51,11 +51,12 @@
 		 * @private
 		 */
 		var _restoreOptions = function() {
-			chrome.storage.sync.get('shortcutKey', function(settings) {
+			chrome.storage.sync.get(['shortcutKey', 'selector'], function(settings) {
 				if (!settings.shortcutKey) {
 					settings.shortcutKey = _defaultShortcutKey;
 				}
 				document.querySelector('#fbt_shortcutkey').value = settings.shortcutKey;
+				document.querySelector('#fbt_selector').value = settings.selector ?? '';
 			});
 		};
 
@@ -64,12 +65,22 @@
 		 * @private
 		 */
 		var _validateAndSave = function() {
-			var key = document.querySelector('#fbt_shortcutkey');
-			if (key.value == '') {
-				_updateStatus(_messages.validateFailure, _messageTypes.failure);
+			var shortcutKey = document.querySelector('#fbt_shortcutkey');
+			if (shortcutKey.value == '') {
+				_updateStatus(_messages.keyValidateFailure, _messageTypes.failure);
 				return false;
 			}
 
+			const cssSelector = document.querySelector('#fbt_selector').value;
+			if( cssSelector !== '' ) {
+				try {
+					document.querySelector(cssSelector);
+				} catch {
+					_updateStatus(_messages.selectorValidateFailure, _messageTypes.failure)
+					return false;
+				}
+			}
+
 			_save();
 		};
 
@@ -80,9 +91,17 @@
 		 */
 		var _save = function() {
 			var shortcutKey = document.querySelector('#fbt_shortcutkey').value;
-			chrome.storage.sync.set({'shortcutKey': shortcutKey}, function () {
-				_updateStatus(_messages.success, _messageTypes.success);
-			});
+			const selector = document.querySelector('#fbt_selector').value;
+
+			chrome.storage.sync.set(
+				{
+					shortcutKey,
+					selector,
+				},
+				function () {
+					_updateStatus(_messages.success, _messageTypes.success);
+				}
+			);
 		};
 
 		/**

src/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Feedly Background Tab",
-	"version": "0.13",
+	"version": "0.14",
 	"manifest_version": 2,
 	"description": "Open Feedly Links in Background Tab using shortcut key",
 	"content_scripts": [

src/options.html

@@ -32,13 +32,18 @@
         #fbt_container h1 {
             margin-top: 0px;
         }
+        input.settingvalue {
+            font-size: 20px;
+            padding: 3px 5px;
+        }
         #fbt_shortcutkey {
             width: 20px;
-            padding: 3px 5px;
             font-weight: bold;
-            font-size: 20px;
             text-align: center;
         }
+        #fbt_selector {
+            width:200px;
+        }
         #fbt_status {
             font-weight: bold;
             border: 1px solid;
@@ -65,7 +70,11 @@ <h1>FeedlyBackgroundTab Chrome Extension Options</h1>
         <p>The following settings are used to modify the behavior of this extension.  Please click <strong>save</strong> when you have finished changing your settings.</p>
         <div>
             <label for="fbt_shortcutkey">Shortcut key:</label>
-            <input type="text" maxlength="1" id="fbt_shortcutkey">
+            <input type="text" maxlength="1" id="fbt_shortcutkey" class="settingvalue" />
+        </div>
+        <div>
+            <label for="fbt_selectors">Additional selectors:</label>
+            <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="fbt_selector" class="settingvalue" />
         </div>
         <div>
             <button id="fbt_submitbutton">Save</button>