{"id":7882,"date":"2016-07-27T09:00:27","date_gmt":"2016-07-27T16:00:27","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7882"},"modified":"2016-08-24T13:32:43","modified_gmt":"2016-08-24T20:32:43","slug":"linting-and-automatically-reloading-webextensions","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/","title":{"rendered":"Linting and Automatically Reloading WebExtensions"},"content":{"rendered":"<p>We <a href=\"https:\/\/blog.mozilla.org\/addons\/2016\/04\/14\/developing-extensions-with-web-ext-1-0\/\">recently announced web-ext 1.0<\/a>, a command line tool that makes developing <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\">WebExtensions<\/a> more of a breeze. Since then we\u2019ve fixed numerous bugs and added two new features: automatic extension reloading and a way to check for \u201clint\u201d in your source code.<\/p>\n<p>You can read more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Getting_started_with_web-ext\">getting started with web-ext<\/a> or jump in and install it with <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a> like this:<\/p>\n<pre><code>npm install --global web-ext<\/code><\/pre>\n<h3>Automatic Reloading<\/h3>\n<p>Once you\u2019ve built an extension, you can try it out with the run command:<\/p>\n<pre><code>web-ext run<\/code><\/pre>\n<p>This launches Firefox with your extension pre-installed. Previously, you would have had to manually re-install your extension any time you changed the source. Now, <code>web-ext<\/code> will <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Getting_started_with_web-ext#Automatic_extension_reloading\">automatically reload the extension<\/a> in Firefox when it detects a source file change, making it quick and easy to try out a new icon or fiddle with the CSS in your popup until it looks right.<\/p>\n<p>Automatic reloading is only supported in Firefox 49 or higher but you can still <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Getting_started_with_web-ext#Testing_in_Firefox_48\">run your extension in Firefox 48<\/a> without it.<\/p>\n<h3>Checking For Code Lint<\/h3>\n<p>If you make a mistake in your <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/manifest.json\">manifest<\/a> or any other source file, you may not hear about it until a user encounters the error or you try submitting the extension to <a href=\"https:\/\/addons.mozilla.org\/\">addons.mozilla.org<\/a>. The new <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Getting_started_with_web-ext#Checking_for_code_lint\">lint command<\/a> will tell you about these mistakes so you can fix them before they bite you. Run it like this:<\/p>\n<pre><code>web-ext lint<\/code><\/pre>\n<p>For example, let\u2019s say you are porting an extension from Chrome that used the <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/API\/history\">history API<\/a>, which <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1208334\">hasn\u2019t fully landed in Firefox<\/a> at the time of this writing. Your manifest might declare the history permission like this:<\/p>\n<pre><code>{\r\n  \"manifest_version\": 2,\r\n  \"name\": \"My Extension\",\r\n  \"version\": \"1.0\",\r\n  \"permissions\": [\r\n    \"history\"\r\n  ]\r\n}<\/code><\/pre>\n<p>When running <code>web-ext lint<\/code> from the directory containing this manifest, you\u2019ll see an error explaining that <i>history<\/i> is an unknown permission.<\/p>\n<p>Try it out and let us know what you think. As always, you can <a href=\"https:\/\/github.com\/mozilla\/web-ext\/issues\">submit an issue<\/a> if you have an idea for a new feature of if you run into a bug.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We recently announced web-ext 1.0, a command line tool that makes developing WebExtensions more of a breeze. Since then we\u2019ve fixed numerous bugs and added two new features: automatic extension &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/\">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,121,278886],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Linting and Automatically Reloading WebExtensions - 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\/27\/linting-and-automatically-reloading-webextensions\/\" \/>\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=\"2 minutes\" \/>\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\/27\/linting-and-automatically-reloading-webextensions\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/\",\"name\":\"Linting and Automatically Reloading WebExtensions - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"datePublished\":\"2016-07-27T16:00:27+00:00\",\"dateModified\":\"2016-08-24T20:32:43+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Linting and Automatically Reloading WebExtensions\"}]},{\"@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":"Linting and Automatically Reloading WebExtensions - 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\/27\/linting-and-automatically-reloading-webextensions\/","twitter_misc":{"Written by":"kumar303","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/","url":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/","name":"Linting and Automatically Reloading WebExtensions - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"datePublished":"2016-07-27T16:00:27+00:00","dateModified":"2016-08-24T20:32:43+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/27\/linting-and-automatically-reloading-webextensions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Linting and Automatically Reloading WebExtensions"}]},{"@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\/7882"}],"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=7882"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7882\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=7882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=7882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=7882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}