{"id":7762,"date":"2016-04-14T04:52:03","date_gmt":"2016-04-14T11:52:03","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7762"},"modified":"2016-04-13T16:54:19","modified_gmt":"2016-04-13T23:54:19","slug":"developing-extensions-with-web-ext-1-0","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/","title":{"rendered":"Developing Extensions With Web-ext 1.0"},"content":{"rendered":"<p>As the transition to <a href=\"https:\/\/developer.mozilla.org\/Add-ons\/WebExtensions\" target=\"_blank\">WebExtensions<\/a> continues, we are also building tools to make developing them faster and easier than ever. Our latest is a command line tool called <a href=\"https:\/\/github.com\/mozilla\/web-ext\" target=\"_blank\">web-ext<\/a>, which we released recently as an initial working version with some basic features.<\/p>\n<p>We built it because we want developing extensions to be fast and easy. Just as Firefox\u2019s <a href=\"https:\/\/developer.mozilla.org\/Add-ons\/WebExtensions\" target=\"_blank\">WebExtensions<\/a> API is designed for cross-browser compatibility, we want web-ext to eventually support platforms such as <a href=\"https:\/\/developer.chrome.com\/extensions\" target=\"_blank\">Chrome<\/a> or <a href=\"https:\/\/dev.opera.com\/extensions\/\" target=\"_blank\">Opera<\/a>. We will continue developing <a href=\"https:\/\/github.com\/mozilla-jetpack\/jpm\/\" target=\"_blank\">jpm<\/a> in parallel, as needed.<\/p>\n<p>To give it a try, you can install it from <a href=\"https:\/\/www.npmjs.com\/web-ext\" target=\"_blank\">npm<\/a>:<\/p>\n<pre><code>npm install --global web-ext<\/code><\/pre>\n<p>When developing an extension, here\u2019s how you can run it in Firefox to test it out:<\/p>\n<pre><code>cd \/path\/to\/your\/source\r\nweb-ext run<\/code><\/pre>\n<p>This is similar to how you can <a href=\"https:\/\/blog.mozilla.org\/addons\/2015\/12\/23\/loading-temporary-add-ons\/\" target=\"_blank\">load your source directly<\/a> on the <i>about:debugging<\/i> page.<\/p>\n<p>When you\u2019ve got your extension working, here\u2019s how to build an XPI file that can be submitted to <a href=\"https:\/\/addons.mozilla.org\/firefox\/\" target=\"_blank\">addons.mozilla.org<\/a>:<\/p>\n<pre><code>web-ext build<\/code><\/pre>\n<p>You can also self-host your XPI file for distribution but it needs to be <a href=\"https:\/\/developer.mozilla.org\/Add-ons\/Distribution\" target=\"_blank\">signed by Mozilla<\/a> first. Here\u2019s how to build and sign an XPI file:<\/p>\n<pre><code>web-ext sign<\/code><\/pre>\n<p>The end user documentation is <a href=\"https:\/\/developer.mozilla.org\/Add-ons\/WebExtensions\/web-ext\" target=\"_blank\">a work in progress<\/a> but you can reference all commands and options by typing:<\/p>\n<pre><code>web-ext --help<\/code><\/pre>\n<p>As you can see, this is a very early release just to get you started while we continue adding features. If you\u2019d like to help out on the development of <a href=\"https:\/\/github.com\/mozilla\/web-ext\" target=\"_blank\">web-ext<\/a>, check out the <a href=\"https:\/\/github.com\/mozilla\/web-ext\/blob\/master\/CONTRIBUTING.md\" target=\"_blank\">contributor guide<\/a> and take a look at <a href=\"https:\/\/github.com\/mozilla\/web-ext\/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+bug%22\" target=\"_blank\">some good first bugs<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As the transition to WebExtensions continues, we are also building tools to make developing them faster and easier than ever. Our latest is a command line tool called web-ext, which &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/\">Read more<\/a><\/p>\n","protected":false},"author":293,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,278886],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Developing Extensions With Web-ext 1.0 - 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\/04\/14\/developing-extensions-with-web-ext-1-0\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kumar303\" \/>\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\/04\/14\/developing-extensions-with-web-ext-1-0\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/\",\"name\":\"Developing Extensions With Web-ext 1.0 - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"datePublished\":\"2016-04-14T11:52:03+00:00\",\"dateModified\":\"2016-04-13T23:54:19+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developing Extensions With Web-ext 1.0\"}]},{\"@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\/aa2b14e555e8a5fec38a51659b15e3c4\",\"name\":\"kumar303\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g\",\"caption\":\"kumar303\"},\"description\":\"Kumar hacks on Mozilla web services and tools for various projects, such as those supporting Firefox Add-ons. He hacks on lots of random open source projects too.\",\"sameAs\":[\"http:\/\/farmdev.com\/\",\"https:\/\/www.facebook.com\/kumar303\",\"https:\/\/x.com\/kumar303\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/kmcmillanmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developing Extensions With Web-ext 1.0 - 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\/04\/14\/developing-extensions-with-web-ext-1-0\/","twitter_misc":{"Written by":"kumar303","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/","url":"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/","name":"Developing Extensions With Web-ext 1.0 - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"datePublished":"2016-04-14T11:52:03+00:00","dateModified":"2016-04-13T23:54:19+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Developing Extensions With Web-ext 1.0"}]},{"@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\/aa2b14e555e8a5fec38a51659b15e3c4","name":"kumar303","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g","caption":"kumar303"},"description":"Kumar hacks on Mozilla web services and tools for various projects, such as those supporting Firefox Add-ons. He hacks on lots of random open source projects too.","sameAs":["http:\/\/farmdev.com\/","https:\/\/www.facebook.com\/kumar303","https:\/\/x.com\/kumar303"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/kmcmillanmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7762"}],"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\/293"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=7762"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7762\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=7762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=7762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=7762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}