{"id":1930,"date":"2010-10-19T17:30:11","date_gmt":"2010-10-20T00:30:11","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=1930"},"modified":"2010-10-19T17:30:11","modified_gmt":"2010-10-20T00:30:11","slug":"zero-to-add-on-in-five-minutes","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/","title":{"rendered":"Zero to Add-on in Five Minutes"},"content":{"rendered":"<p>Several months ago, I built an add-on in five minutes in front of a live audience at the <a href=\"https:\/\/wiki.mozilla.org\/Summit2010\">2010 Mozilla Summit<\/a> to demonstrate the benefits of <a href=\"https:\/\/builder.mozillalabs.com\/\">Add-on Builder<\/a>, Mozilla&#8217;s new web app for building add-ons for Firefox.<\/p>\n<p>The <a href=\"http:\/\/blog.mozilla.org\/addons\/2009\/03\/18\/video-tutorial-extensions-bootcamp-zero-to-hello-world-in-45-minutes\/\">last time I taught traditional add-on development using XUL<\/a>, it took an hour and a half to walk students through the process of setting up a development environment and building a simple &#8220;Hello, World!&#8221; add-on. This time, using Add-on Builder, I was able to demonstrate the process of building a useful add-on that translates text on web pages in five minutes.<\/p>\n<p>Not all add-ons will be so simple to create, of course. And walking students through the process of building that same add-on takes a little longer.<\/p>\n<p>But walking them through building a &#8220;Hello, World!&#8221; add-on really does take five minutes, because Add-on Builder provides a simple, web-based development environment, takes care of cumbersome configuration and packaging tasks, and exposes intuitive, high-level APIs using web technologies for common tasks (like adding an item to a context menu and changing a web page), making it much easier to build add-ons for Firefox.<\/p>\n<p>It&#8217;s literally as simple as going to <a href=\"https:\/\/builder.mozillalabs.com\/\">Add-on Builder<\/a>, pressing the <strong>Create Add-on<\/strong> button (signing in\/up as needed), then entering <code>console.log(\"Hello, World!\");<\/code> into the editor and pressing the <strong>Test<\/strong> button (installing <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/182410\/\">Add-on Builder Helper<\/a> as needed). &#8220;Hello, World!&#8221; will then appear in the Error Console. You don&#8217;t even need to restart Firefox!<\/p>\n<p>See for yourself! Check out the video of my demonstration (<a href=\"http:\/\/www.youtube.com\/watch?v=xaCRlhTVo_w\">full-size version<\/a>):<\/p>\n<p><video width=\"450\" height=\"253\" controls><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/mdn\/myk_jetpack_summit_2010\/myk_jetpack_summit_2010.mp4\" type='video\/mp4'><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/mdn\/myk_jetpack_summit_2010\/myk_jetpack_summit_2010.webm\" type='video\/webm'><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/mdn\/myk_jetpack_summit_2010\/myk_jetpack_summit_2010.ogv\" type='video\/ogg'><object width=\"450\" height=\"278\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/xaCRlhTVo_w?fs=1&amp;hl=en_US\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/xaCRlhTVo_w?fs=1&amp;hl=en_US\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"450\" height=\"278\"><\/embed><\/object><\/video><\/p>\n<p>Then check out the <a href=\"https:\/\/builder.mozillalabs.com\/addon\/1000190\/latest\/\">code on Add-on Builder<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Several months ago, I built an add-on in five minutes in front of a live audience at the 2010 Mozilla Summit to demonstrate the benefits of Add-on Builder, Mozilla&#8217;s new &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/\">Read more<\/a><\/p>\n","protected":false},"author":229,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zero to Add-on in Five Minutes - 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\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Myk Melez\" \/>\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\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/\",\"name\":\"Zero to Add-on in Five Minutes - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"datePublished\":\"2010-10-20T00:30:11+00:00\",\"dateModified\":\"2010-10-20T00:30:11+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/3d09c88e5d13be3ed73df012f0ab0e1f\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Zero to Add-on in Five Minutes\"}]},{\"@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\/3d09c88e5d13be3ed73df012f0ab0e1f\",\"name\":\"Myk Melez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c8a27f1c79d0e7fafc8faa2c5ab6df3a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c8a27f1c79d0e7fafc8faa2c5ab6df3a?s=96&d=mm&r=g\",\"caption\":\"Myk Melez\"},\"description\":\"Myk is a Principal Software Architect and in-house entrepreneur at Mozilla. A Mozillian since 1999, he's contributed to the Web App Developer Initiative, PluotSorbet, Open Web Apps, Firefox OS Simulator, Jetpack, Raindrop, Snowl, Personas, Firefox, Thunderbird, and Bugzilla. He's just a cook. He's all out of bubblegum.\",\"sameAs\":[\"http:\/\/www.mykzilla.org\/\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/mykmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Zero to Add-on in Five Minutes - 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\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/","twitter_misc":{"Written by":"Myk Melez","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/","url":"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/","name":"Zero to Add-on in Five Minutes - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"datePublished":"2010-10-20T00:30:11+00:00","dateModified":"2010-10-20T00:30:11+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/3d09c88e5d13be3ed73df012f0ab0e1f"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2010\/10\/19\/zero-to-add-on-in-five-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Zero to Add-on in Five Minutes"}]},{"@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\/3d09c88e5d13be3ed73df012f0ab0e1f","name":"Myk Melez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c8a27f1c79d0e7fafc8faa2c5ab6df3a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c8a27f1c79d0e7fafc8faa2c5ab6df3a?s=96&d=mm&r=g","caption":"Myk Melez"},"description":"Myk is a Principal Software Architect and in-house entrepreneur at Mozilla. A Mozillian since 1999, he's contributed to the Web App Developer Initiative, PluotSorbet, Open Web Apps, Firefox OS Simulator, Jetpack, Raindrop, Snowl, Personas, Firefox, Thunderbird, and Bugzilla. He's just a cook. He's all out of bubblegum.","sameAs":["http:\/\/www.mykzilla.org\/"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/mykmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/1930"}],"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\/229"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}