Created in July 2018
This repository contains a template version of a simple extension I wrote for Mozilla Firefox to make searching for music on my favorite websites more convenient. I created it by myself, because I did not like the existing solutions. I use implementations of this extension almost every day and I wanted to share the code with the world, so everyone can create their own extension.
A simple template for a browser extension for Firefox that lets you search for some highlighted or link text in a new tab. It adds another context menu item when the user is right clicking either while hovering over a link or while text is highlighted. When clicked, the extension opens another browser tab and starts a search for that text on a website. There are a few add-ons out there that do similar things, but they all only add one context menu item that opens another dropdown menu from which to choose the website that should be opened. I wanted to have multiple menu items on the first level of the context menu, so I created an extension by myself.
An implementation of this extension I made for Bandcamp can be found on FirefoxBrowser Add-Ons: Context-Search: Bandcamp
It was featured on the FirefoxBrowser Add-Ons site in October 2018.
An implementation of this extension I made for Beatport can be found on FirefoxBrowser Add-Ons: Context-Search: Beatport
It was featured on the FirefoxBrowser Add-Ons site in October 2018.
Implementing this extension is very easy. It just requires a few string replacements and adding your own logos in the icons folder.
-
line 2: Replace the string
ENTER-AUTHOR-NAME-HEREwith your username -
line 4: Replace the string
ENTER-EXTENSION-NAME-HEREwith the name for your extension -
line 5: Replace the string
ENTER-EXTENSION-DESCRIPTION-HEREwith a short description for your extension -
line 9: Replace the string
ENTER-YOUR@EMAIL.HEREwith a real email address
-
line 1: Replace the string
https://www.your-url-here.com/search=with the url that should be called with your search term. You can just go to the website you want to create an extension for, search for anything and copy the url from the browser to get the right url. -
line 8: Replace the string
Your-Url-Herewith the name of the website you want to create an extension for -
line 16: Replace the string
Your-Url-Herewith the name of the website you want to create an extension for
Replace the two white square png's in the icons folder with real icons. The logo-48.png should be 48x48 pixels and the logo-96.png should be 96x96 pixels. You can use different file names, but then you have to change them in lines 15 & 16 in manifest.json aswell.
There are different ways to deploy a Firefox extension to your and / or other people's browsers
This is the easiest and fastest way to get an extension into Firefox. However, it is only useful during development, since the extension will be removed when you restart your machine. Keep the manifest.json, the background.js and the icons folder in a directory (as they are when you clone this repository), navigate to the Developer Tools Page in Firefox (enter about:debugging into the address bar) and click the Load Temporary Add-on button, navigate to that folder and select the manifest.json file.
To create an extension that can be permanently installed into Firefox, use this method. This is also the only way to make an extension available on addons.mozilla.org. For more information on signing, visit Firefox Support. There are different ways to sign the extension as described in Mozillas Extension Workshop. Please note that a user account for addons.mozilla.org is required for some.
As mentioned in Mozillas Extension Workshop, there are several versions of Firefox that allow the installation of unsigned extensions. If you don't want to go through the signing process and just want to use the extension for yourself, getting one of these Firefox versions might be the way to go for you.