Sanitize image URL; set openerTabId instead of index when creatin…

…g the search tab

README.md

@@ -5,6 +5,10 @@ This Firefox extension adds an option to the context menu when right-clicking im
 
 ## Changelog
 
+### [1.6] – 2019/01/18
+- Better compatibility with image URLs that contain query strings
+- The extension now respects the user's preference whether or not to open new tabs right after the current one
+
 ### [1.5.1] – 2018/11/11
 - Added Russian and Ukrainian translations
 
@@ -37,3 +41,4 @@ This Firefox extension adds an option to the context menu when right-clicking im
 [1.4]: https://github.com/Sukigu/search-by-image-on-google/releases/tag/v1.4
 [1.5]: https://github.com/Sukigu/search-by-image-on-google/releases/tag/v1.5
 [1.5.1]: https://github.com/Sukigu/search-by-image-on-google/releases/tag/v1.5.1
+[1.6]: https://github.com/Sukigu/search-by-image-on-google/releases/tag/v1.6

background.js

@@ -1,23 +1,30 @@
 'use strict';
 
+// Create the context menu item
 browser.menus.create({
 	id: 'action-search',
 	title: browser.i18n.getMessage('actionSearchImage'),
 	contexts: ['image']
 });
 
+// Add a listener for the context menu item
 browser.menus.onClicked.addListener(function(info, tab) {
-	if (info.menuItemId === 'action-search') {
-		const getOpenInBackgroundPref = browser.storage.sync.get({
-			openInBackground: true
-		});
-
-		getOpenInBackgroundPref.then(function(result) {
-			browser.tabs.create({
-				url: 'https://www.google.com/searchbyimage?image_url=' + info.srcUrl,
-				active: !result.openInBackground,
-				index: tab.index + 1
-			});
-		});
+	if (info.menuItemId !== 'action-search') {
+		return;
 	}
+
+	// URL encode '?' and '&' in the original image's URL
+	const sanitizedImageUrl = info.srcUrl.replace(/\?|&/g, match => match === '?' ? '%3F' : '%26');
+
+	// Get the open in background option, defaulting to 'true' if it doesn't exist
+	const getOpenInBackgroundPref = browser.storage.sync.get({ openInBackground: true });
+
+	// Create the search tab
+	getOpenInBackgroundPref.then(function(result) {
+		browser.tabs.create({
+			url: 'https://www.google.com/searchbyimage?image_url=' + sanitizedImageUrl,
+			active: !result.openInBackground,
+			openerTabId: tab.id
+		});
+	});
 });

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "__MSG_extensionName__",
-	"version": "1.5.1",
+	"version": "1.6",
 
 	"description": "__MSG_extensionDescription__",
 

options.js

@@ -1,28 +1,31 @@
 'use strict';
 
-function saveOptions() {
-	browser.storage.sync.set({
-		openInBackground: document.getElementById('input-open-background').checked
+function init() {
+	// Get localized text
+	document.getElementById('lbl-open-background').textContent = browser.i18n.getMessage('lblOpenInBackground');
+
+	// Get the open in background option, defaulting to 'true' if it doesn't exist
+	const getOpenInBackgroundPref = browser.storage.sync.get({ openInBackground: true });
+
+	// Set the preference's initial state
+	getOpenInBackgroundPref.then(function(result) {
+		document.getElementById('input-open-background').checked = result.openInBackground;
 	});
 }
 
-function restoreOptions() {
-	const setCurrentChoice = function(result) {
-		document.getElementById('input-open-background').checked = result.openInBackground;
-	};
-
-	document.getElementById('lbl-open-background').textContent = browser.i18n.getMessage('lblOpenInBackground');
-
-	const getOpenInBackgroundPref = browser.storage.sync.get({
-		openInBackground: true
-	});
-
-	getOpenInBackgroundPref.then(setCurrentChoice);
+function saveOptions() {
+	const isOpenInBackgroundPrefChecked = document.getElementById('input-open-background').checked;
+	browser.storage.sync.set({ openInBackground: isOpenInBackgroundPrefChecked });
 }
 
-document.addEventListener('DOMContentLoaded', restoreOptions);
+document.addEventListener('DOMContentLoaded', init);
 document.getElementById('input-open-background').addEventListener('change', saveOptions);
 
-if (!['en', 'pt', 'es', 'ru', 'uk'].includes(browser.i18n.getUILanguage().substring(0, 2))) {
+const SUPPORTED_LANGUAGES = ['en', 'pt', 'es', 'ru', 'uk'];
+const browserLang = browser.i18n.getUILanguage().substring(0, 2);
+
+// Show message inviting the user to contribute with translations,
+// but only if their browser language is not supported by the extension
+if (!SUPPORTED_LANGUAGES.includes(browserLang)) {
 	document.getElementById('msg-translate').removeAttribute('style');
 }