Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How To Write Your First Firefox Extension

85,780 views

Published on

Will give you an introduction how to write your first Firefox extension

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Y8gKsI ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Y8gKsI ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Plugin
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How To Write Your First Firefox Extension

  1. How to Write Your First Extension
  2. Bruce Willis Extension (Francois Mori/AP Photo)
  3. How to Write Your First Extension 1. Create development profile 2. Configuration settings 3. Pointing extension to your dev directory 4. Creating folder structure & files 5. Packaging & installing 6. Distributing your add-on
  4. Create Development Profile
  5. Keep a separate Firefox profile for extension development
  6. Windows: Start menu > Run (Windows key + R). Write firefox -P and press click OK. Mac OS X (in Terminal): Type in /Applications/Firefox.app/ Contents/MacOS/firefox - profilemanager Linux (in a terminal): Use cd to navigate to your Firefox directory and then enter ./firefox -profilemanager
  7. Pointing Extension to Your Development Directory
  8. Find your Profile directory
  9. Windows: Win XP: C:Documents and Settings[user name] Application DataMozillaFirefoxProfiles Vista: C:Users[user name]AppDataRoaming Mac OS X (~ = /Users/[user name]): ~/Library/Application Support/Firefox/Profiles/ Linux: ~/.mozilla/
  10. Go to [Dev Profile]/extensions/ folder
  11. Create empty file (no file extension!): brucewillis@robertnyman.com
  12. Point to your extension code, i.e. file path: Windows: E.g: C:devbrucewillis Mac/Linux: E.g: ~/dev/brucewillis/
  13. Configuration Settings
  14. 1. Open Firefox: - Have your development profile as default - or Through Profile Manager 2. Type in about:config
  15. Recommended settings: javascript.options.showInConsole = true nglayout.debug.disable_xul_cache = true browser.dom.window.dump.enabled = true
  16. • Optional settings: javascript.options.strict = true extensions.logging.enabled = true
  17. Creating Folder Structure & Files
  18. • Automatic creation of extension • Extension Developer extension
  19. install.rdf
  20. Information, IDs and metadata
  21. <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>brucewillis@robertnyman.com</em:id> <em:name>Bruce Willis demo extension</em:name> <em:version>1.0</em:version> <em:type>2</em:type> <em:creator>Robert Nyman</em:creator> <em:description>Finds document headings and replaces them with Die Hard movie titles</em:description> <em:homepageURL>http://www.robertnyman.com/</em:homepageURL> <em:optionsURL>chrome://brucewillis/content/preferences.xul</ em:optionsURL> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>2.0</em:minVersion> <em:maxVersion>3.1b2</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
  22. In the Description node
  23. em:id Your unique developer id, of your own choosing. Has to be the same as the pointer file you previously created, i.e. brucewillis@robertnyman.com em:name The name of your extension. em:version Current version of your extension. em:type The type declares that it is an extension, as opposed to, for instance, a theme. em:creator You! em:description Describes your extension functionality. Will be shown in the Tools > Add-ons window. em:homepageURL The URL of your extension’s web site. em:optionsURL The URL to where you will have your file for editing options/preferences.
  24. In the Description/ em:TargetApplication node
  25. em:id The actual id of Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}. Exchange this to develop for another app, like Thunderbird. em:minVersion The minimum version number of Firefox to run the extension. em:maxVersion The maximum version number of Firefox to run the extension. Valid alternatives for Firefox, Thunderbird etc and their corresponding versions
  26. <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>brucewillis@robertnyman.com</em:id> <em:name>Bruce Willis demo extension</em:name> <em:version>1.0</em:version> <em:type>2</em:type> <em:creator>Robert Nyman</em:creator> <em:description>Finds document headings and replaces them with Die Hard movie titles</em:description> <em:homepageURL>http://www.robertnyman.com/</em:homepageURL> <em:optionsURL>chrome://brucewillis/content/preferences.xul</ em:optionsURL> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>2.0</em:minVersion> <em:maxVersion>3.1b2</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
  27. More information in Install Manifests
  28. chrome.manifest
  29. File references and usage
  30. content brucewillis chrome/content/ content brucewillis chrome/content/ contentaccessible=yes overlay chrome://browser/content/browser.xul chrome:// brucewillis/content/browser.xul locale brucewillis en-US chrome/locale/en-US/ skin brucewillis classic/1.0 chrome/skin/ style chrome://global/content/customizeToolbar.xul chrome:// brucewillis/skin/skin.css
  31. # Content pointer content brucewillis chrome/content/ # Make content accessible from web pages in Firefox 3 content brucewillis chrome/content/ contentaccessible=yes # Overlay browser skin overlay chrome://browser/content/browser.xul chrome:// brucewillis/content/browser.xul
  32. # Language versions locale brucewillis en-US chrome/locale/en-US/
  33. # Setting reference to extension skin skin brucewillis classic/1.0 chrome/skin/ # Adding CSS to available toolbar buttons style chrome://global/content/customizeToolbar.xul chrome://brucewillis/skin/skin.css
  34. More information in Chrome Manifest
  35. Are you with me so far?
  36. chrome content folder
  37. XUL, JavaScript and content CSS
  38. XUL (“Zuul”) - XML User Interface Language http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
  39. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  40. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  41. <?xml version="1.0"?> <?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/ css"?> <!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd"> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul"> <script src="bruceWillis.js" /> <menupopup id="menu_ToolsPopup"> <menuitem label="&runbrucewillis;" key="brucewillis-run- key" oncommand="linkTargetFinder.run()"/> </menupopup> <keyset> <key id="brucewillis-run-key" modifiers="accel alt shift" key="B" oncommand="bruceWillis.run()"/> </keyset> <statusbar id="status-bar"> <statusbarpanel id="brucewillis-status-bar-icon" class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status- bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" /> </statusbar> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="brucewillis-toolbar-button" label="Bruce Willis" tooltiptext="&runbrucewillis;" oncommand="bruceWillis.run()"/> </toolbarpalette> </overlay>
  42. <?xml version="1.0"?> <?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/ css"?> <!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd">
  43. <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul"> <script src="bruceWillis.js" /> <!-- Content --> </overlay>
  44. <!-- Tools menu option and keyboard shortcut --> <menupopup id="menu_ToolsPopup"> <menuitem label="&runbrucewillis;" key="brucewillis-run- key" oncommand="linkTargetFinder.run()"/> </menupopup> <keyset> <key id="brucewillis-run-key" modifiers="accel alt shift" key="B" oncommand="bruceWillis.run()"/> </keyset>
  45. <!-- Statusbar icon --> <statusbar id="status-bar"> <statusbarpanel id="brucewillis-status-bar-icon" class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status- bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" /> </statusbar>
  46. <!-- Firefox toolbar button --> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="brucewillis-toolbar-button" label="Bruce Willis" tooltiptext="&runbrucewillis;" oncommand="bruceWillis.run()"/> </toolbarpalette>
  47. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  48. h1, h2, h3, h4 { font-family: Georgia, Times, serif; }
  49. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  50. var bruceWillis = function () { var prefManager = Components.classes["@mozilla.org/preferences-service; 1"].getService(Components.interfaces.nsIPrefBranch); return { init : function () { gBrowser.addEventListener("load", function () { var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun"); if (autoRun) { bruceWillis.run(); } }, false); }, run : function () { var head = content.document.getElementsByTagName("head")[0], style = content.document.getElementById("bruce-willis-style"), h1 = content.document.getElementsByTagName("h1"), h2 = content.document.getElementsByTagName("h2"), h3 = content.document.getElementsByTagName("h3"), h4 = content.document.getElementsByTagName("h4"); if (!style) { style = content.document.createElement("link"); style.id = "brucewillis-style"; style.type = "text/css"; style.rel = "stylesheet"; style.href = "chrome://brucewillis/content/bruce-willis.css"; head.appendChild(style); } for (var i=0, il=h1.length; i<il; i++) { h1[i].textContent = "Die Hard 1"; } for (var i=0, il=h2.length; i<il; i++) { h2[i].textContent = "Die Hard 2"; } for (var i=0, il=h3.length; i<il; i++) { h3[i].textContent = "Die Hard 3"; } for (var i=0, il=h4.length; i<il; i++) { h4[i].textContent = "Die Hard 4"; } } }; }(); window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  51. // Structure - Yahoo JavaScript Module Pattern var bruceWillis = function () { var prefManager = Components.classes["@mozilla.org/preferences- service;1"].getService(Components.interfaces.nsIPrefBranch); return { init : function () { // init method }, run : function () { // run method } }; }(); window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  52. // init method init : function () { gBrowser.addEventListener("load", function () { var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun"); if (autoRun) { bruceWillis.run(); } }, false); }
  53. // run method run : function () { var head = content.document.getElementsByTagName("head")[0], style = content.document.getElementById("bruce-willis-style"), h1 = content.document.getElementsByTagName("h1"), h2 = content.document.getElementsByTagName("h2"), h3 = content.document.getElementsByTagName("h3"), h4 = content.document.getElementsByTagName("h4"); if (!style) { style = content.document.createElement("link"); style.id = "brucewillis-style"; style.type = "text/css"; style.rel = "stylesheet"; style.href = "chrome://brucewillis/content/bruce-willis.css"; head.appendChild(style); } for (var i=0, il=h1.length; i<il; i++) { h1[i].textContent = "Die Hard 1"; } for (var i=0, il=h2.length; i<il; i++) { h2[i].textContent = "Die Hard 2"; } for (var i=0, il=h3.length; i<il; i++) { h3[i].textContent = "Die Hard 3"; } for (var i=0, il=h4.length; i<il; i++) { h4[i].textContent = "Die Hard 4"; } }
  54. // Run when DOM has loaded window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  55. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  56. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow title="Bruce Willis Preferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul"> <prefpane label="Bruce Willis Preferences"> <preferences> <preference id="brucewillis-autorun" name="extensions.brucewillis.autorun" type="bool"/> </preferences> <groupbox> <caption label="Settings"/> <grid> <columns> <column flex="4"/> <column flex="1"/> </columns> <rows> <row> <label control="autorun" value="Autorun"/> <checkbox id="autorun" preference="brucewillis-autorun"/> </row> </rows> </grid> </groupbox> </prefpane> </prefwindow>
  57. <!-- Connect element to extension preference --> <preferences> <preference id="brucewillis-autorun" name="extensions.brucewillis.autorun" type="bool"/> </preferences> <checkbox id="autorun" preference="brucewillis-autorun"/>
  58. chrome locale folder
  59. Offering localization
  60. translations.dtd: <!ENTITY runbrucewillis "Run Bruce Willis">
  61. chrome skins folder
  62. Skin your extension with CSS and images
  63. • skin.css • status-bar.png • toolbar-button.png
  64. /* skin.css */ /* Style in View > Toolbars > Customize */ #brucewillis-toolbar-button { list-style-image: url(chrome://brucewillis/skin/toolbar- button.png); } #brucewillis-status-bar-icon { width: 83px; margin: 0 5px; }
  65. /* status-bar.png */
  66. /* toolbar-button.png */
  67. preferences - defaults folder
  68. Setting default extension values
  69. // prefs.js pref("extensions.brucewillis.autorun", false);
  70. Packaging & Installing
  71. An XPI (“zippy”) is just a zipped file
  72. ZIP the contents of your extension folder (only the contents, NOT the folder itself)
  73. Windows: Mark all files, right-click and choose: Send To > Compressed Rename ZIP file to .xpi Mac OS X/Linux (in Terminal): Navigate to your extension files. Type in: zip -r BruceWillis.xpi *
  74. Drag your XPI file into Firefox - Voilà!
  75. What it looks like
  76. Before
  77. After
  78. Distributing Your Add-On
  79. addons.mozilla.org or through secure location (SSL) Successfully Getting your Addon Reviewed
  80. Downloads
  81. • Download Bruce Willis extension • Browse source files • Presentation slides at: http://robertnyman.com/speaking/
  82. Learn more
  83. Learn by looking at others
  84. In your Profile folder
  85. What you’ve learned
  86. 1. Create development profile 2. Configuration settings 3. Pointing extension to your dev directory 4. Creating folder structure & files 5. Packaging & installing 6. Distributing your add-on
  87. That’s it!
  88. Robert Nyman robert@robertnyman.com http://robertnyman.com Images: http://www.learningresources.com/product/teachers/shop+by+category/activity+kits/construction/m--8226- gears--174-+building+set.do http://www.soitenlystooges.com/item.asp?sku=FGSU578 http://www.flickr.com/photos/28791486@N03/2700643931/ http://www.fetasteutgavan.se/blogg/wp/?p=39 http://www.pixabella.com/plugin/tag/red-hearts http://www.woodlands-junior.kent.sch.uk/customs/xmas/calendar/day13.html http://www.intercan.org/coordinator_list.asp

×