{"id":8262,"date":"2017-09-28T13:32:31","date_gmt":"2017-09-28T20:32:31","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8262"},"modified":"2018-09-03T12:44:54","modified_gmt":"2018-09-03T19:44:54","slug":"webextensions-in-firefox-57","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2017\/09\/28\/webextensions-in-firefox-57\/","title":{"rendered":"WebExtensions in Firefox 57"},"content":{"rendered":"

Firefox 57<\/a> has reached Beta, and a bevy of new APIs and improvements have landed that will put us in a good place for the Firefox Quantum launch in November.<\/p>\n

Legacy add-ons no longer load in Firefox 57, but there is still time to migrate<\/a> (almost 5,000<\/a> have migrated so far!), and you can do so even after it lands in release. Just update your listing with the new code and your users will automatically update to the compatible version. When you do, be sure to tell them<\/a> about it.<\/p>\n

Documentation for the APIs discussed here can be found on MDN Web Docs<\/a>.<\/p>\n

API changes<\/h2>\n

Tabs and Sessions APIs<\/h3>\n

Tabs now have a discarded state<\/a> added to the Tab<\/code> object. It will be set to true<\/code> if the tab is not loaded with content, for example when restored from a previous session. This is part of getting ready for a tabs.discard<\/code><\/a> API.<\/p>\n

The tabs.opener<\/code><\/a> API has now been implemented which means that openerTabId<\/code> is available to the update and create methods and on the Tab<\/code> object. This allows extensions to track the opener of tabs.<\/p>\n

Also, the tabs API can now open URLs that are view-source:<\/code><\/a> links and do a \u201cload replace<\/a>\u201d which changes the page and replaces the current history so that the back button is unaffected.<\/p>\n

The session API now has some APIs for setting, getting and removing data<\/a> on a per tab or per window basis. This allows information about tabs or windows to survive session restores without the data needing to be stored by individual extensions.<\/p>\n

webRequest API<\/h3>\n

The webRequest<\/code> details object now includes proxy information<\/a>. This proxy information will let webRequest<\/code> listeners determine how the request interacted with a proxy.<\/p>\n

A major new API for webRequest<\/code> is now available which allows an extension to filter the HTTP response bodies<\/a> as they come in. The code below alters the text on example.com<\/a>. You could do this through a content script, but being able to alter the HTTP response body gives a whole new set of possibilities:<\/p>\n

function listener(details) {\r\n let filter = browser.webRequest.filterResponseData(details.requestId);\r\n let decoder = new TextDecoder(\"utf-8\");\r\n let encoder = new TextEncoder();\r\n\r\n filter.ondata = event => {\r\n    let str = decoder.decode(event.data, {stream: true});\r\n    str = str.replace(\/Example\/g, 'WebExtension Example');\r\n    filter.write(encoder.encode(str));\r\n    filter.disconnect();\r\n }\r\n\r\n return {};\r\n}\r\n\r\nbrowser.webRequest.onBeforeRequest.addListener(\r\n listener,\r\n {urls: [\"https:\/\/example.com\/*\"], types: [\"main_frame\"]},\r\n [\"blocking\"]\r\n);<\/pre>\n
Storage API<\/h3>\n
A basic implementation of chrome.storage.managed<\/code><\/a> has landed. This allows administrators or other applications to configure extensions for users. In Firefox you can place a JSON file in a directory, just like for native messaging<\/a>. For example, a file called favourite-colour-examples@mozilla.org.json<\/code><\/a> could be placed in the appropriate place:<\/p>\n
{\r\n \"name\": \"favourite-colour-examples@mozilla.org\",\r\n \"description\": \"ignored\",\r\n \"type\": \"storage\",\r\n \"data\": {\r\n    \"colour\": \"blue!\"\r\n }\r\n}<\/pre>\n
Then in the favourite-colour-examples@mozilla.org<\/a> extension:<\/p>\n
 browser.storage.managed.get('colour').then((colour) => {\r\n   console.log(colour);\r\n });<\/pre>\n
Would output \u201cblue!\u201d.<\/p>\n
Clipboard API<\/h3>\n
A new clipboard API has been added to allow the copying of images to the clipboard. The clipboard.setImageData<\/code><\/a> allows you to populate the clipboard with image data. This API is compatible with the Chrome apps API<\/a>, but at this point it should be considered experimental. This API requires the clipboardWrite<\/code> permission.<\/p>\n
Developer Tools API<\/h3>\n
The developer tools gained the panels.elements.createSidebarPane<\/code><\/a> API and a panels.elements sidebar.setExpression<\/code><\/a> method. This lets extensions create sidebars in the developer tools. Here\u2019s an example extension that parses jQuery variables:<\/p>\n
\"\"<\/a><\/p>\n
Find API<\/h3>\n
A find<\/code><\/a> API has landed in Firefox. This allows extensions to call the Firefox find API on a tab and get information about the results. It can then add or remove syntax highlighting from that tab, based on the previous search.<\/p>\n
This example extension uses the API to search across multiple tabs and highlights them:<\/p>\n
\"\"<\/a><\/p>\n
Miscellaneous changes<\/h3>\n