Monday, 2 April, 2018 UTC
Summary
Many people read this blog because they’ve written extensions for Firefox in the past. Others, though, know some HTML, CSS, and JavaScript and have been thinking about writing their first extension. Either way, now is the perfect time to jump into the WebExtensions ecosystem.
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 URL bar dropdown and the arrow panels).
- popup_border – The border color of popups.
- popup_highlight – The background color of items highlighted using the keyboard inside popups (such as the selected URL bar dropdown item).
- popup_highlight_text – The text color of items highlighted using the keyboard inside 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 (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 (note that in Firefox 58 it corresponds to the color of separators inside the URL bar).
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).
- For those experimenting with hidden tabs, they are now restored when the extension that hid them is removed. Also, tab hiding shutdown now happens even if the API is unused, removing the possibility of hidden tabs staying erroneously hidden.
- The tabs.saveAsPDF API was enhanced with a print progress listener and the addition of four more edge properties to the pageSettings object.
- The memory consumption of extensions which use tabs.insertCSS was significantly improved.
- tabs.query() returns highlighted tabs when querying for highlighted tabs.
Several new additions landed that make the debugging and development of extensions easier, including:
- Firefox 60 now supports the devtools.network.onRequestFinished API to better support extension developers who are interested in extending the built-in Firefox developer tools.
- The devtools.network API also added the devtools.network.getHAR method which returns a HAR log for the devtools window. This is fully compatible with the Chrome version of this API.
- Dramatically improved the information on where errors triggered by asynchronous APIs come from. This makes debugging extensions much easier.
- DOMNodes and cyclic objects can now be rendered with the sidebar.setExpression API method.
- Fixed a bug that prevented the developer tools panel drop down from expanding as they should.
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:
- about:preferences now shows when an extension is controlling proxy preferences.
- Clearer messages were added to show when an extension is controlling the New Tab and Home pages.
The browserAction, pageAction, and sidebarAction are three of the most commonly used WebExtension features, and all three get some improvement in Firefox 60:
- The pageAction and sidebarAction APIs were updated to be consistent with changes to the browserAction API, allowing NULL to be passed to unset a property.
- The browserAction, pageAction, and sidebarAction APIs all now support querying whether they are currently enabled/shown/open, respectively.
- Disabled pageActions no longer show a context menu item.
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:
- The menus and contextMenus APIs have been enhanced to support onShown and onHidden events.
- Reduced the amount of FOUC by running document_idle after DOMContentLoaded and after the layout has had a chance to start.
- Opening a popup now gets focus (this author’s personal note: YES!)
- Fixed an issue where extension sidebars reload unnecessarily.
- Removed some innerHTML (and fixed some bolding broken by sanitization in 1432966) and some more (in dynamic install prompt messages).
- The runAt option for the contentScripts.register API now defaults to document_idle.
- The key combination to open a WebExtension sidebar is now shown in the switcher dropdown and the sidebar menu.
A total of 63 features or improvements were landed for WebExtensions as part of Firefox 60 Beta. Thank you to our many contributors for this release, especially our community volunteers including: Tim Nguyen, Oriol Brufau, Richard Marti, Prathiksha Guruprasad, Vinicius Costa e Silva, Vivek Dhingra, Zhengyi Lian, Connor Masini, DW-dev, Bogdan Podzerca, and Dylan Stokes. As always, we sincerely appreciate you helping ensure that individuals have the ability to shape the Internet and their own experiences on it. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.
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.
The post Extensions in Firefox 60 appeared first on Mozilla Add-ons Blog.