{"id":7874,"date":"2016-07-21T10:51:08","date_gmt":"2016-07-21T17:51:08","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7874"},"modified":"2016-07-21T10:51:08","modified_gmt":"2016-07-21T17:51:08","slug":"new-webextensions-guides-and-how-tos-on-mdn","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/","title":{"rendered":"New WebExtensions Guides and How-tos on MDN"},"content":{"rendered":"<p>The official launch of WebExtensions is happening in <a href=\"https:\/\/wiki.mozilla.org\/RapidRelease\/Calendar\" target=\"_blank\">Firefox 48<\/a>, but much of what you need is <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\" target=\"_blank\">already supported<\/a> in Firefox and AMO (addons.mozilla.org). The best place to get started with WebExtensions is <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\" target=\"_blank\">MDN<\/a>, where you can find a trove of helpful information. I&#8217;d like to highlight a couple of recent additions that you might find useful:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/Comparison_with_the_Add-on_SDK\" target=\"_blank\">Comparison with the Add-on SDK <\/a>chart &#8211; SDK developers can see how different SDK APIs and techniques map to their equivalents in the WebExtensions world, so it&#8217;s easier to migrate. It&#8217;s not a one-to-one match, but it comes close at least for <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/SDK\/High-Level_APIs\" target=\"_blank\">high-level APIs<\/a>.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/Comparison_with_XUL_XPCOM_extensions\" target=\"_blank\">Comparison with XUL\/XPCOM extensions<\/a> chart &#8211; Similar to the SDK comparison chart, but a bit trickier to do, given the breadth of the XPCOM platform. We&#8217;re using the commonly-used components exposed in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/JavaScript_code_modules\/Services.jsm\" target=\"_blank\">Services.jsm<\/a> for the API mapping table. If you see anything missing on that table, please edit it yourself or let us know.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\" target=\"_blank\">How-to guides<\/a> &#8211; There&#8217;s a new <strong><em>How to<\/em><\/strong> section on the <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\" target=\"_blank\">WebExtensions home page<\/a> that guides you through some common add-on developer cases, like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/Intercept_HTTP_requests\" target=\"_blank\">intercepting web requests<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/Add_a_button_to_the_toolbar\" target=\"_blank\">adding a button to the toolbar<\/a>. Let us know if you have other requests for these how-to guides by commenting below, or joining the <a href=\"https:\/\/mail.mozilla.org\/listinfo\/dev-addons\" target=\"_blank\">dev-addons mailing list<\/a>.<\/li>\n<\/ul>\n<p>Thank you to <a href=\"https:\/\/mozillians.org\/u\/wbamberg\/\" target=\"_blank\">Will Bamberg<\/a> for doing the bulk of this work. Remember that MDN is a community wiki, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Community\" target=\"_blank\">so anyone can help<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The official launch of WebExtensions is happening in Firefox 48, but much of what you need is already supported in Firefox and AMO (addons.mozilla.org). The best place to get started &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/\">Read more<\/a><\/p>\n","protected":false},"author":173,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,295,278886],"tags":[278873,278876,766,278871],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New WebExtensions Guides and How-tos on MDN - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorge Villalobos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/\",\"name\":\"New WebExtensions Guides and How-tos on MDN - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"datePublished\":\"2016-07-21T17:51:08+00:00\",\"dateModified\":\"2016-07-21T17:51:08+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New WebExtensions Guides and How-tos on MDN\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\",\"name\":\"Jorge Villalobos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"caption\":\"Jorge Villalobos\"},\"description\":\"Jorge is the Product Manager for addons.mozilla.org\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New WebExtensions Guides and How-tos on MDN - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/","twitter_misc":{"Written by":"Jorge Villalobos","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/","url":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/","name":"New WebExtensions Guides and How-tos on MDN - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"datePublished":"2016-07-21T17:51:08+00:00","dateModified":"2016-07-21T17:51:08+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/21\/new-webextensions-guides-and-how-tos-on-mdn\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"New WebExtensions Guides and How-tos on MDN"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925","name":"Jorge Villalobos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","caption":"Jorge Villalobos"},"description":"Jorge is the Product Manager for addons.mozilla.org","url":"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7874"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/173"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=7874"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7874\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=7874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=7874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=7874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}