Utilize a suite of customizable reverse image search options in a convenient context menu.
“Somebody listens! The ability to fine tune a context add-on. This one lets you open in a new tab OR window, choose which search engines or another program to search in, as well as save your preferences. Good Show!”
Thank you to everyone who submitted extensions to the Firefox Quantum Extensions Challenge!
Our judges reviewed more than 100 submissions and have selected the finalists for each prize category. Now, it’s time for the add-on community to vote for the winners. Use Firefox Beta or Firefox Developer Edition and take these extensions for a test drive (many of the APIs used are not yet available on Firefox 59, the current release), then vote for your favorites here. (And hey, if you really love an extension, maybe consider writing a review?)
Voting closes at 11:59 p.m. PDT on April 29, 2018. Winners will be announced on May 8, 2018.
Please meet our newest Friend of Add-ons, Viswaprasanth Ks! Viswa began contributing to Mozilla in January 2013, when he met regional community members while participating in a Firefox OS hackathon in Bangalore, India. Since then, he has been a member of the Firefox Student Ambassador Board, a Sr. Firefox OS app reviewer, and a Mozilla Rep and Tech Speaker.
In early 2017, Viswa began developing extensions for Firefox using the WebExtensions API. From the start, Viswa wanted to invite his community to learn this framework and create extensions with him. At community events, he would speak about extension development and help participants build their first extensions. These presentations served as a starting point for creating the Activate campaign “Build Your Own Extension.” Viswa quickly became a leader in developing the campaign and testing iterations with a variety of different audiences. In late 2017, he collaborated with community members Santosh Viswanatham and Trishul Goel to re-launch the campaign with a new event flow and more learning resources for new developers.
Viswa continues to give talks about extension development and help new developers become confident working with WebExtensions APIs. He is currently creating a series of videos about the WebExtensions API to be released this summer. When he isn’t speaking about extensions, he mentors students in the Tamilnadu region in Rust and Quality Assurance.
These experiences have translated into skills Viswa uses in everyday life. “I learned about code review when I became a Sr. Firefox OS app reviewer,” he says. “This skill helps me a lot at my office. I am able to easily point out errors in the product I am working on. The second important thing I learned by contributing to Mozilla is how to build and work with a diverse team. The Mozilla community has a lot of amazing people all around the world, and there are unique things to learn from each and every one.”
In his free time, Viswa watches tech-related talks on YouTube, plays chess online, and explores new Mozilla-related projects like Lockbox.
He’s also quick to add, “I feel each and every one who cares about the internet should become Mozilla contributors so the journey will be awesome in future.”
If that describes you and you would like get more involved with the add-ons community, please take a look at our wiki for some opportunities to contribute to the project.
Thank you so much for all of your contributions, Viswa! We’re proud to name you Friend of Add-ons.
Are you an extensions enthusiast? Do you want to help people find excellent ways to improve their browsing experience? If so, please consider applying to join our Featured Extensions Community Board!
Every six months, we assemble a small group of dedicated community members to help nominate and select new featured extensions for addons.mozilla.org (AMO) each month. Their picks help millions of Firefox users discover top-quality extensions.
The current board is currently wrapping up their six-month term, and we are now assembling a new board of talented contributors for the months July – December.
All active members of the add-ons community — including fans, developers, and advocates — are invited to apply to join the board. Priority will be given to applicants who have not served on the board before, followed by those with previous experience, and finally from the outgoing board. You can learn more about the duties of the Featured Add-on Advisory Board on MDN web docs.
To apply, please send us an email at amo-featured [at] mozilla [dot] org with your name, a few sentences about how you’re involved with AMO, and why you are interested in joining the board. The deadline is Monday, April 30, 2018 at 23:59 PDT. The new board will be announced shortly thereafter.
That’s because we’re having a contest! Develop an extension for Firefox and enter it into the Firefox Quantum Extensions Challenge by April 15, 2018. Your extension could win you a brand-new Apple iPad Pro or a $250 gift card to Amazon.
And if you want to make your extension even better, consider using some of the new WebExtensions API discussed below. These new and improved API are available in Firefox 60, recently released to the Beta Channel.
A Profusion of Theme Properties
Since “Best Dynamic Theme” is one of the award categories for the Firefox Quantum Extension Challenge, let’s start with improvements to Themes. Release 60 adds a pile of new items to the list of elements that can be themed, doubling the number of individual components. These include:
tab_line – Line color of the selected tab.
tab_selected – Background color of the selected tab.
popup – The background color of popups (such as the arrow panels).
popup_border – The border color of popups.
popup_text – The text color of popups.
tab_loading – The color of the tab loading indicator and the tab loading burst.
icons – The color of toolbar icons.
icons_attention – The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.
frame_inactive – The same as “accentcolor”, but only applied to inactive windows, provided for Chrome compatibility.
button_background_active – The color of the background of pressed toolbar buttons.
button_background_hover – The color of the background of toolbar buttons on hover.
toolbar_field_separator – The color of separators inside the URL bar (also available in Firefox 59; note that in Firefox 58 it was implemented under toolbar_vertical_separator)
toolbar_vertical_separator – The color of the separator next to the application menu icon (also available in Firefox 59; note that in Firefox 58 it corresponds to the color of separators inside the URL bar).
Also new for Firefox 60, the headerURL property is no longer mandatory, removing a somewhat arbitrary condition that made themes a bit clunky in the past.
Remember, the contest awards a prize for the best Dynamic Theme, so use the theme API to control and change the various UI elements in creative ways. Want an awesome tutorial that talks about Dynamic Themes? Check out the video below.
More Tab Features
Consistent with each release since Quantum 57, tabs remain a focus of WebExtension growth and improvement. Several bigger features will land in release 61 (expert Bugzilla miners are likely aware of them already), but Firefox 60 still offers a number of important items:
The tabs API now supports a tabs.captureTab method which can be passed a tabId to capture the visible area of the specified tab (as opposed to the tabs.captureVisibleTab API, which only captured the active tab of a window).
The proxy API is quickly maturing, and Firefox 60 adds more functionality by adding the asynchronous proxy.onRequest API. This API is ideal for extensions looking to deal with proxy requests in a background script. Details are still being documented on MDN at the time of this writing but should be available soon.
Network Extensions Get DNS
Extensions now have access to Firefox’s DNS service to resolve hostnames. The new browser.dns() API takes a hostname string (with optional parameters) and resolves it to a DNS record for that hostname. To use this new API, your extension must declare the “dns” permission.
Dynamic Keyboard Shortcuts
Two new API were added to the Commands namespace that allow extensions to change their keyboard shortcuts at runtime. The first, commands.update, allows an extension to change the shortcut key and/or description associated with a command, while the second, commands.reset, reverts a command back to the keyboard shortcut and description originally specified in the manifest file.
Keeping Users Informed
In keeping with our mission to ensure that users are always informed and in control of what extensions are doing, a few new messages have been added to the browser interface:
The items mentioned above highlight some of the bigger and/or more visible changes that appear in Firefox 60. As always, though, many other minor or less visible improvements to WebExtensions also landed, including:
This post is going up a bit later than normal and there are already several additions and changes to the WebExtensions API in progress for Firefox 61, so continue watching this space for more information. In the meantime, please continue to send us your feedback.
Correction An earlier version of this article incorrectly stated that the theme properties popup_highlight and popup_highlight_text were available in Firefox 60, and that popup and popup_text could be used to style the URL and search bar autocomplete panels. All four of those things will actually appear in Firefox 61 (which is available in the Firefox Nightly channel right now).
For the last five years, Mozilla has participated in the Outreachy program to provide three-month internships for people from groups traditionally underrepresented in tech. From December 2017 – March 2018, interns Ravneet Kaur and Natalia Milavanova worked under the guidance of Christopher Grebs and Luca Greco to improve the add-ons linter.
The add-ons linter is a tool that warns of potential problems within an extension’s code. Developers can use the web-ext command line tool to run the linter locally to check for potential issues during development, and addons.mozilla.org (AMO) uses it to validate an extension during the submission process.
Ravneet’s internship project was to land a localization feature to the add-ons linter. By offering the option to see errors and warnings in multiple languages, the linter can be more accessible to add-on developers who prefer to work with non-English languages. Ravneet successfully adapted Pontoon’s localization method for the add-ons linter and extracted about 19,000 lines of code in the process.
Outreachy internships are a great way to gain real-world experience working with distributed teams and grow software development skills. “This project was the first time I was introduced to the idea of bundling code using technologies like webpack,” Ravneet says. “After going through its documentation and reading blog posts about it, I was fascinated about the idea of bundling code together and building small, minimalistic projects in production, while having a wide variety of maintainable files and folders in the project’s source.”
Natalia tackled a different challenge: improve the linter’s validation by rewriting a large chunk of the code and test suite into async functions. For a long time, the linter’s code had been cumbersome to work with. After refactoring the code, Natalia removed approximately 3% of the code. Luca notes, “Thanks to Natalia’s hard work on this this project, our ability to debug and handle errors in the add-ons linter has been greatly improved. It’s now easier to read and understand the sources, and prepare for the changes that are coming next.”
Thank you for all of your contributions, Natalia and Ravneet! We look forward to seeing your future accomplishments.
If you’re interested in learning more about Outreachy, please visit their website. While you’re at it, check out our own Outreachy alum Shubheksha Jalan’sblog post about her experience applying to the program.
You’re invited to use your skill, savvy, and creativity to create great new extensions for the Firefox Quantum Extensions Challenge. Between March 15 and April 15, 2018, use Firefox Developer Edition to create extensions that make full use of available WebExtensions APIs for one of the prize categories. (Legacy extensions that have been updated to WebExtensions APIs, or Chrome extensions that have been ported to Firefox on or after January 1, 2018, are also eligible for this challenge.)
A panel of judges will select three to four finalists in each category, and the community will be invited to vote for the winners. We’ll announce the winners with the release of Firefox 60 in May 2018. Winners in each category will receive an iPad Pro and promotion of their extensions to Firefox users. Runners-up will receive a $250 USD Amazon gift card.
This article is written by Michael de Boer, Mozilla Engineering Manager working on the Firefox Frontend team. Mike has been actively involved in themes for a long time and is excited to share the improvements coming to the WebExtensions Theme API.
Last spring we announced our plans to improve themes in Firefox and today I’d like to share our progress and what you can expect in the next few releases!
We started off with laying the groundwork to get a new type of Theme supported; a new ‘theme’ WebExtension namespace was created and we made the Addon Manager aware of WebExtension Themes.
Our first milestone was to completely support the LightWeight Theme (LWT) features, because they’re so simple. This way we had our first new-style themes that are able to change the background image, background color and foreground text color working very quickly. We continued to implement more properties on top of this solid base and are moving toward Chrome compatibility at a good pace.
What you can use today
We fondly call them ‘dynamic themes’, because you can mix and match WebExtension APIs to create wholly unique browser experiences that may reactively update parts of the browser theme.
In Firefox Quantum 57 you can use the following methods:
theme.update([windowId]), with which you can update the browser’s’ theme and optionally do that only for a specific window.
theme.reset([windowId]), which removes any theme updates made in a call to `theme.update()`. The optional windowId argument allows you to reset a specific window.
theme.onUpdated, an event that’s fired whenever the active theme is updated.
As you might have noticed, the theme.update() method is where the magic happens. But it only does something pretty when you feed it a bag of properties that you want it to change.
These properties are defined in the schema and the current set is:
headerURL: Some of you might recognise this property from LWTs; it may be used to set the topmost background image of a browser window.
theme_frame: Alias for the ‘headerURL’ property, which is there for compatibility with Chrome themes.
accentcolor: Use this property to change the background color of a browser window. Usually, this will be set to look pretty next to the ‘headerURL’ you provide. This is also a property that comes from LWTs.
tab_background_text: Alias for the ‘textcolor’ property, providing compatibility with Chrome Themes. (Since Firefox 59.)
bookmark_text: Alias for the ‘toolbartext’ property, providing compatibility with Chrome themes. (Since Firefox 58.)
frame: Alias for the ‘accentcolor’ property, providing compatibility with Chrome themes.
tab_text: Alias for the ‘textcolor’ property, providing compatibility with Chrome themes.
textcolor: Use this property to change the foreground color of a browser window and is used for the tab titles, for example. This is also a property the comes from LWTs.
toolbar: Change the background color of browser toolbars using this property. This property is also supported by Chrome themes.
toolbar_text: And this property can be used to change the foreground color inside browser toolbars, like button captions.
toolbar_field: Use this property to change the background color of the Awesomebar. This property is also supported by Chrome themes.
toolbar_field_text: Use this property to change the foreground color of the Awesomebar, thus the text you type in it. This property is also supported by Chrome themes.
toolbar_field_border: Use this property to change the color of border of textboxes other than the Awesomebar inside toolbars. (Since Firefox 59.)
toolbar_top_separator: Use this property to change the color of the top border of a toolbar that visually separates it from other toolbars above it. (Since Firefox 58.)
toolbar_bottom_separator: Use this property to change the color of the bottom border of a toolbar, that visually separates it from other toolbars below it. (Since Firefox 58.)
toolbar_vertical_separator: The color of the separator next to the application menu icon. (Since Firefox 58.)
toolbar_field_separator: The color of separators inside the URL bar.
At this moment of writing, we’ve implemented most of the properties that Chrome supports to theme the browser. Going beyond that, we’re looking to add support for about:home custom themes and possibly for other in-content pages as well.
A group of students from Michigan State University (MSU) will be working on adding the remainder of Chrome properties and more.
One of the most exciting things to come in the near future is the ‘Theme Experiments’ API: on the Nightly channel, you can write an extension that is able to style a part of the browser UI that we haven’t implemented yet, using CSS selectors to make up your properties for it. This way it’s possible to propose new manifest properties to be added to the current set and have them become a part of Firefox, so every theme author can use it and every user may enjoy it!
Our hope is that with this in place the Theming API will evolve continuously to adapt to your needs, because we know that a good API is never ‘done’.