1
edit
Changes
→How to Launch Add-on
== Project Name ==
CSS Checker JetPack Add-on SDK Extension 0.03
== Project Description ==
* [[User:David.humphrey|Dave Humphrey]]
== How to Launch Add-on ==
# Get [https://jetpack.mozillalabs.com/ Add-on SDK]
# Get [https://github.com/manoutoftime/cssChecker/ the code]
# Put the code under <code>jetpack_folder/packages/</code>
# Execute <code>cfx run -b /path/to/minefield/firefox.exe</code> under <code>jetpack_folder/packages/css-checker/</code> folder
# Try it out with on the examples in <code>css-checker/example/</code> folder
== Project Details ==
'''Add-on SDK Code'''
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/main.js main.js] - executed upon launch; connects UI, pagemods and utility functions together.
:* Populates UI
:* Attaches pagemod.js to loading web pages
:* Downloads external files
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/funcs.js funcs.js] - a library with utility functions.
:* <code>parseCSS(css)</code> - parses CSS
::* Arguments: CSS Style Sheet in String format
::* Returns: Array of Objects with selector, property and value properties
:* <code>cssToXPath(rule)</code> - converts CSS Selector to XPath
::* Arguments: CSS Selector in String format
::* Returns: CSS Selector in XPath format
::* Note: stolen from Firebug project
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/ui.js ui.js] - a library that deals with User Interface.
:* <code>populateUI()</code> - populates widget
::* Arguments: None
::* Returns: None
::* Dependencies: panel.html, panel.js
:* <code>getStatus()</code> - returns status of whether or not to modify web pages
::* Arguments: None
::* Returns: status, possible values: "Enabled", "Disabled".
'''Content Scripts'''
* [https://github.com/manoutoftime/cssChecker/blob/master/data/pagemod.js pagemod.js] - a script that is attached to all loading webpages.
:* Sends CSS either as clear text or as a link to the add-on.
:* Receives a list of styles to be applied and XPath to apply styles to.
* [https://github.com/manoutoftime/cssChecker/blob/master/data/panel.js panel.js] - a script that modifies and sends status information to the add-on.
'''UI Component'''
* [https://github.com/manoutoftime/cssChecker/blob/master/data/panel.html panel.html] - UI elements that is displayed on widget click.
== Releases ==
{| class="wikitable" border="1"
! Release !! Notes !! Status
|-
| 0.1 || rewritten as of 0.3 || Done
|-
| 0.2 || rewritten as of 0.3 || Done
|-
| 0.3 || Added UI, Page-mods, content scripts, XMLHttpRequest. Removed: a lot of useless code. || Done
|-
| 0.4 || Write tests for funcs.parseCss and funcs.cssToXPath. Fix bugs if any come up. Release add-on on AMO. || In progress
|}
== Project News ==
* [http://manoutoftime.wordpress.com/2010/10/22/release-0-1 0.1 Release]
* [http://github.com/manoutoftime/cssChecker GitHub Repo]
* [http://manoutoftime.wordpress.com/2010/11/15/release-0-2/ 0.2 Release]
* [http://manoutoftime.wordpress.com/2010/12/05/release-0-3/ 0.3 Release - UI, Rewriting of 0.1 and 0.2]
* [http://manoutoftime.wordpress.com/2010/12/10/release-0-3-1/ 0.3.1 Release - Rewriting of 0.1 and 0.2, Updates for Add-on SDK 1.0]
