Edit and Note - Welcome
 Page contents

Collapse AllExpand All Expand/Collapse Content


Creating this extension emerged from two of my ideas:

The base idea is because of: There are many very good on-line social bookmarking sites, for sharing and contributing, bookmarking any web page,  some offer annotating them with floating stickies,  but basically hosted on their server only. However neither of them allow only little capability for local maintenance of the annotated relevant details. There is also only few extensions which allow creating a sticky on a web page, but either of them can not be rich text edited, or also can not be saved locally.

I wished to care about my collected information myself at first, individually housed and arranged them on my computer, additionally, I also wished to see the headings, bookmarks embedded into a web-page, and take some own ones too, during the reading. I have found until one of best firefox extension's SCRAPBOOK (Gomita) which met with my all of claims.  It can capture any site similar to off-line browsing,  allows  customization of  directories, furthermore one can clip, arrange the relevant details for his own interest on his local computer, even more one can create some annotation with this tool. 

Furthermore, I 'm also using in my everyday work a very powerful desktop sticky application too, (Stickies 6.7a) which helps me remembering to To-Dos, and or it is very useful taking and sharing relevant notes , for example about the found errors while testing, writing natty infos being at my fingertip on screen, or organized locally the saved ones, etc.

Let me seize the oppurtunity to recommend the most recent Aml Pages 9.21 what is a professional desktop notes organizer-outliner. It keeps track all your notes, information, passwords, emails and URLs, can save web pages (or fragments) using a feature rich UI. Supports plain text, rich text, tables and figures, attachments, iconized tree. Aml Pages offers several of plugins some of them built-in and many can additionally installed which further broadens its functionality. For example the built in Aml Assist or the addtionally installable IE2Aml IE toolbar plugin integrate its work (supporting Drag and Drop or in the latter case saving immediately from the browser toolbar) with browsers both IE, FF, Chrome, Safari and many well known application MsWord, MsOutlook, Ms Visal Studio, Evernote. Plugins provide rich funcionalites as much as text auto completion, inserting any picture JPEG, GIF, PNG, TIFF, Bitmap, Icon, Windows Metafiles, exporting Aml Pages document into a tree of folders and files, has customized themes, viewing Aml Pages documents immediately from Totalcommander. One can work in tandem with LeaderTask - which is a business organizer for planning tasks and project management, and also can play with integrating it with Freeplane mind mapper. Even developers can use it for code segment gathering helping them with syntax highlighting. If you ever used any Tree Outliners like Treepad, Maple, KeyNote you will really appreciate the rich functionality and its clever UI of this software for further improving of your any research work! See some video giving some basic tips how to use Aml Pages in tandem with Edit and Note.

The  second idea arose from my that long run problem: I created until very much of web site layout, however when I had arrived to fill them with content I often ran afoul of such routinely executed tasks as collecting the headings, building from them a Page Content, inserting site navigations, and note references (similarly as MSWord does the footnotes), inserting special divisions too, I wished to appear on my pages. I'm using several of professional sophisticated web development tools i.e. Ms FrontPage,  Macromedia/Adobe Dreamweaver, Visual Studio, also the very powerful NotePad++, making the hard work with my own hand. But, this very spade-work gave the inspiration for writing my own few JavaScript routines which do the above mentioned repetitive works for me. Then I figured out how to immediately inserting  them into a web page in the browser, after the raw skeleton of the document had made.  At first I ran those JavaScript routines from the Custom Buttons2  customizable toolbar  extension. Stepping toward, when I had been experiencing with Mozile rich text editing extension (which had been running on yet only older FF2), but found later released this capability in the new generation browser Firefox 3 recently,  I picked up that more crazy idea how to edit/build a web-page on-line, immediately editing it in the browser. How to create pages from an absolutely scratch blank page, or a pre-built simple template and stylesheet.

 Finally, integrating,  putting together all of my experiences concerning the written above fetched up creating my own extension, which has two goals to accomplish:

1. Improving the on-line research and contributing capabilities with such an annotation tool which allows  reviewed, noted, marked documents to be saved to anyone's local computer. Allowing the user to work up the material at  first off-line. Then later those  documents may be shared with the user's contributors for further annotating. Also providing the user to build the selected, clipped details later into his own site even more to be capable of referring to the original information also.

2. Turning your web browser into a word-processor (without using a composer) for on line WYSWYG editing a document/web page!

Naturally if you are a serious web developer you can not save labor of maintenance of your site, so this extension can only do for you the bases. Probably you need yet using the more advanced page creating tools simultaneously, as mentioned above. Naturally, there are even more professional tools for aggregating, sharing, contributing  rich text editing information on-line such as many knowledge base tools (wikies..etc.). I don't intend to offer using this extension to completely override such a professional ones. This extension is intended for creating quick and easy annotations, and simple even so good looking much rather informative than serious interactive web pages. 

As an example: This documentation was written immedately in the browser and experimented with this extension!
(If you are boring or do not like this turquoise look, change another style bluish or  lightgrey from your browser: View-Page Style menu.)

Well! If your claims or ideas somehow adjoins with mine  ...

Do not hesitate to experiment too!

General Description

What you can do with this extension

You can annotate any web page

inserting movable 10 colored bullets
(i.e.. you can mark with them certain points, links of documents which you are about to read or further process)
inserting movable, resize-able, collapsible 10 colored WYSWYG editable stickies
(i.e. you can append your own thoughts, remarks, notes, further links, pictures to any segment of the documents)

You can place as much your own bookmarks as you wish

either generated from a highlighted portion of the text or
placing a cursor to the appropriate point and inserting your own bookmark title.

You can insert two specially formatted editable (question/answer) divisions as a further contributing, or FAQ section writing capabilities

You can insert note references into the document

(i.e. you can give the appropriate links, mailto, even yet custom JavaScript, and title to the references which will be placed at the bottom of document as footnotes)
the reference text may be either generated from a highlighted portion of the text or
placing a cursor to the appropriate point and inserting your custom title

It offers few relevant document editing, styling and further processing possibilities

You can on-line WYSWYG edit a document in the browser starting:
from an absolutely scratch page (i.e blank-page)
(this and any else edited page by this extension will be compatible
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)

from your own template
You can attach to the raw edited document your own style
You can automatically generate a Page Content from inserted heading elements (additionally you can make an outline from the document headings)
You can place only, or place and write into the document site Global navigation, and Back/Next navigation elements which will be mapped to suitable LINK tags.
(i.e. start, next, previous, content, chapter, section, subsection, author, copyright, help, alternate). Additionally you can insert as many Custom and Language global navigation elements as you wish. You can attach to them your custom picture or you can modify your stylesheet based on the offered. You can add to them the navigation links or also allowed too writing a short JavaScript attached to the<a href="javascript:foo('p1','p2')", or one statement syntax.) This capability is fully corresponding to and usable together with the
Site navigation bar 1.1.3 extension https://addons.mozilla.org/hu/firefox/addon/1949

You can save the document locally and further use it:

cooperating  with ScrapBook (Gomita) extension: https://addons.mozilla.org/hu/firefox/addon/427
or saving with this extension five capacities:
1. you can save the edited page to that place where it was opened from, but you don't wish to save the additional components (it is useful until you raw edit the text and you need not for the built in stylesheets and js file)
2. you can save the edited page to that place where it was opened from with its components placed to same place(directory)(the components, built in stylesheets and js file and dependent pictures all will be saved to same directory, apart from your custom style declared pictures.)
3. you can alternatively save the edited page to a custom place allowed to be renamed, with its components placed to same chosen place (directory)(it is useful when you edit a template and you wish to rename and place it to an other place, but you want also attach all of its component too)
4. you can use the browser built in Save As command mapped to this toolbar. This will save by default the page additional components into a sub directory named \saved filename_files
5. you can save the document in (MHTM web archive) MHT format, immediately cooperating with  (if you have already installed ) the
UnMHT 5.3.0 extension: https://addons.mozilla.org/hu/firefox/addon/8051.
(It is very reliable for immediate or later sending the edited or annotated document as an attachment. You can use for immediate sending from the browser Send Page By Email 0.6.3 extension: https://addons.mozilla.org/hu/firefox/addon/2343 or later with any else  your preferred mailer program.)

I recommend too, using some reliable extensions which can aid you to properly amplify the on-line editing capabilities and amend the incompleteness of this tool.

Firebug 1.3.3:                               https://addons.mozilla.org/en-US/firefox/addon/1843?src=sharingapi  runs only on Firefox 3
(Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...) STRONGLY RECOMMENDED TO INSTALL
(* Although, there is newer version 1.4.2  presently you can download from the add-on site!
    If you would like working with the Edit and Note under Firefox3.5.2, I suggest downloading the last of Firebug releases tracing-enabled version from here
 ** See the notes under Bug, weakness report - Firebug bug)

ViewSourceWith 0.4.2:                https://addons.mozilla.org/en-US/firefox/addon/394?src=sharingapi
(The main goal consists to view page source with external applications but you can also...
- open page source as DOM document, read faq
- open CSS and JS files present on page)

Codetch 0.4.3:                              https://addons.mozilla.org/en-US/firefox/addon/1002
(Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.)

Web Developer 1.1.8:
(The Web Developer extension adds a menu and a toolbar with various web developer tools. )

If you wish editing a web page it is also advised to install the

Quick Locale Switcher 1.6.10
:      https://addons.mozilla.org/en-US/firefox/addon/1333
(Allows you to quickly switch to a different language (User Interface, Spell Checker Dictionary and Website content) in your Mozilla application.)
Dictionary Switcher 1.0:               https://addons.mozilla.org/hu/firefox/addon/3414
(Toggles between the installed dictionaries and displays the currently selected dictionary in the status bar ...)
Dictionaries & Language Packs:   https://addons.mozilla.org/en-US/firefox/browse/type:3

How you can work with this extension

Edit and Note Toolbar (and Sidebar) 1.0

When you install the extension the Edit and Note toolbar will be placed into the Firefox Navigation toolbar and will be initially visible. (You can toggle it on/off by right clicking on the main toolbar and check on/off its name). This editor toolbar is suited for doing the tasks written above.

If the toolbar does not fit to your screen the Editor Tools section will be scrollable.

Edit and Note Toolbar and Side Bar Controls

The toolbar initially collapsed and has only two control buttons.

Open Editor button -  with which you can open/toggle the Editor between two modes. 

Edit entire Page - Will put the whole page into a contenteditable region. You can WYSWYG edit, insert, format text, insert custom links, and pictures, tables and the above mentioned special things into the document. It give you a feel if you were working in a word-processor. There is not any risk to edit on-line a web document because of you can only save it locally!

Edit only Bullet, Sticky -  Only the inserted sticky bodies and question/answer divisions will be WYSWYG editable, respectively both the bullet and sticky color may be changeable.

When you are in Full Page or Sticky editor mode you can not navigate on either the links placed on page or links placed into stickies!. The link colors will be set to default browser setting and the hand cursor will be suspended. But, even yet you can open the links in New Tab, or New Background Tab using the right click menu. You will be informed about this once per browser session when you open the toolbar.

Switch Off - Edit Page - Temporarily disable both of the Editor modes.

The links will change corresponding to their given custom style and you can now navigate ordinarily on the links, or click properly on clickable images. You can switch back to any editor mode whenever you wish. You will be informed about this always you switch off the editor.

The actual state of switched modes will be noted on the Open Editor toolbar icon.

Visit Edit and Note web site - If you wish detailed help about working with the extension this menu point can navigate you to this site, where you can read more.

Toggle Side Bar button - will show you in the sidebar the all relevant information being inserted by you into the web page. (* click on the links you will get the picture)

1. Show all of inserted information (*, **)
    in that order they were  placed
2. Show all of inserted bullets and stickies (*, **)
3. Show all of inserted bookmarks (*,**)
    at first your own placed ones and under them separately the already included ones
4. Show all of questions/answers (*,**)
5. Show all of inserted note references (*, **)
6. Show all of embedded headings (**)
    this will not generate TOC from headings only list them

(*   you can sort by columns, and you can filter too).
(** you can jump  from here to the right place in the document)

Handling the navigation, close tab, reloading

Both three actions will close the editor toolbar.

When you navigate away from a page which was switched on editable,  you will be warned about leaving behind the edited page and saving it before closing. But if you return to this page either you were navigating in same tab, or focuses back to that tab, you will get back the editor toolbar, and you can continue editing.

When you close or reload  such a tab which you are currently editing you will be warned saving the page before closing. You can Cancel this opportunity however all edited content will be lost. If you choose OK you can save the page either with its original name and path, or you can give an else filename and path. But, all dependent content will be saved to the same path by default in this case.

If you just switched off the editor toolbar temporarily disabling the Editor mode either because of you wish to try the inserted links, or you wish click on clickable images to work well, and you are about to close or reload a tab in this phase you will be warned also to save the document.

Saving and reloading a page

When you are editing a page and you decide to save the actual modification advisedly in-between the editing phase or finishing it you can do this by four ways:

1. You can save the raw draft of text by choosing the Save page where it was opened from without its components. The edited text will be saved to that place where the document was opened from without asking you either the filename or path. But the dependent files will not be saved.

2. If you are editing a document and you have already been inserted any of specials (bullets, stickies, question, answer, note ref.) it is advised to save the document with its components. (i.e pictures, stylesheet, js file). You can choose Save page where it was opened from .. components saved to same path.

If you are editing a document using it as a template you may wish supposedly to save it  either with else name or path or both.

In this case you may choose either..or:

3. Save Page As to local name/folder .. component saved to same path. This same as above all dependent file will be saved to same directory however the file may be renamed and put into an else directory too. As normally as any else editor does the renamed page will be reloaded in the place of the old saved one.

4. Save Page As to local name/folder .. component saved to sub path.  This is same as you would had chosen the normal File Save As built-in command from the browser file menu. It is important using this command from the toolbar, because of some else function must be executed before saving. All dependent files will be saved to a sub directory name inherited from the given ..\filename_files. Because of this saving method uses the original browser save method, which also does not reload the saved page you must open that by yourself.

In both four saving cases the entire body editable regions  and also the editor toolbar will be switched off!
You will be noticed about the file  has been saved on which given pathname and state apart from choosing the built in save (4) case.  You will be  also warned about  loading of the newly saved page. Furthermore, you will observe also the links will change into their original state being controlled by the stylesheet you had given. In 1,2,4 cases you can safely reload the document after you have already saved it.

Working with the Scrapbook extension: If you are about to save the page with it please choose the followings before to properly work with the captured page.


Capture/Save with ScrapbookCapture/Sve with Scrapbook (* click on pictures to enlarge them)


Before initiating the below command temporarily disable the toolbar!

Choose the appropriate right click (or Scrapbook main) - Capture Page As menu point.

Check Images, Stylesheets, JavaScript Options in the Scrapbook - Capture Detail dialog.

Because of the Scrapbook extension will take a capture about that moment of the document editing it have just gone on, and will save its content to the Scrapbook extension generated place, thus, it will leave the document editing on, to be continued or not. You can either wish to save a copy at this moment of document to a local folder or not. 

Instructions for using Edit and Note with Scrapbook:

a. When there are such pages which you haven't saved yet with Scrapbook however you would like to save with it

Open the page first what you wish annotating

(Do not  capture it before editing)

Open Edit and Note one of its editors (sticky or Full page)

  1. Place stickies, and make some editing in the text if you wish before Scrapbook Capture
  2. Then  suspend the editor
  3. Choose either form the right click menu or Main Menu Scrapbook Capture As!
  4. Stick Styleheets, Pictures, JavaScript (* see the above picture) and capture the page
  5. After the capture open the page from Scrapbook folder in a new tab
  6. Open the Editor again, you can edit the sticky and or/edit the page again
  7. Then  save the page with the Scrapbook Save command from the Scrapbook Edit toolbar at the bottom of screen!
    (* If it is not seen right click on the Scrapbook icon on the status bar and stick Edit Toolbar)
  8. Open the page again in a new tab
  9. Open the Editor again, you can edit the sticky and or/edit the page again
  10. Save again with Scrapbook save command (7.)

b.  Second case is when you have already saved pages with Scrapbook. If you haven't edited yet something in it (only captured it) or  if you had, even either it is not so big  problem re-Capture As (but only once!) again, then delete the previously captured page.

Open the page which you wish editing from the previously captured Scrapbook folder in a tab

Duplicate the tab

(* The first will contain the originally captured page the second which will be re-Captured  As - It would be a little trick to make a note in Scrapbook, or give something in the comment at Capture As, remarking  which was the original, but you can otherwise see if you open)

Repeat the above steps 1-10

Delete the original one.

The page will be saved only once with Scrapbook Capture As, and then again again with its normal save! (NOT with EDIT and NOTE any Saving command!)

Thus, you need not as many times invoking a Captures As command as you wish editing a sticky. Only once must be saved, the stylesheet and javascript which make the sticky appearing well and handling it. Then you can use the Scrapbook normal Save command as many times as you wish, which will overwrite your pages! The Edit and Note saving commands are suited for saving to your local system directories. (They may  work also with scrapbook folder too, I think. But the Scrapbook save is better for that, because they
can save more this extension save commands. I.e. Scrapbook can save your custom stylesheet dependent pictures too, this add-on can not! Rather use that!

 Unfortunately you can not edit with this extension those stickies which you had already made with Scrapbook sticky feature! Although this editor is able to set the entire page into a contenteditable region even either you can not edit the Scrapbook stickies, because of those are written into a textarea. (* Read about some technical information if you are interesting at http://www.google.hu/search?q=textarea+contenteditable&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:hu-HU:official&client=firefox-a. This extension technically uses content editable div-s for creating stickies.). If you wish using Edit and Note extension WYSWYG editable sticky feature on an already saved page with Scrapbook, either you need to create again those stickies with this extension, and copy the Scrapbook stickies' content into them, then delete the Scrapbook ones,  or leave the old stickies and follow the above 1-10 steps creating new ones. 

How to use more saving commands together:

1. When you are working with/editing documents  opened from a Scrapbook folder in more than one tabs you may be warned by Edit and Note extension saving the page! DO NOT SAVE them with Edit and Note extension only if you wish to save somewhere locally too. Save the page after you edit with Scrapbook Save, and Cancel alert!

2. If you wish save the pages to any of your local directories besides Scrapbook even either, SAVE IT WITH Edit and Note EXTENSION Save As to same path..

3. If you wish using MHT format, install the UnMHT extension in your Firefox browser. Hit the Save As MHT... (* see below)

You can use both three Save commands suggested in this order.

To save the edited document in MHT format you must install the UnMHT extension before!

Choose the Save page As MHTM Web archive (* see above MHT format). If you have already installed the UnMHT extension, the Edit and Note extension will capable of saving the document with this format immediately cooperating with the saving command of that extension. Then you can dispatch, e-mail such a packaged document as an attachment either immediately from the browser or later with any else mailing program you use. You need using this saving format for working properly, since you can not send simply as an attachment such kind of documents which contain many dependent files. Owing to they must be packaged in one before sending. If you do not install the UnMHT extension,  or it is yet installed but temporarily disabled the Save page As MHTM Web arhive command will not be available.

When you are creating and annotating a page for document sharing, contributing, the saved pages will contain the stickies, bullets, bookmarks i.e. everything you placed into the document. The output pages are optimized for using/reading with both Firefox 3+, 3.5+ and IE 7,8.  (However the look may differ a little between FF and IE. Because of these pages were edited under FF, I may suggest to use/read then rather in FF.)

The output page is also suited for to switch between the editor modes also, so when you send such a page as a packaged MHT document, your recipient will be able to see and minimally (text) edit also the whole document, and stickies or question answers, and he will be suited also for further processing moving, resizing, deleting the placed things into it, even yet without using the Edit and Note toolbar.  When you are browsing such a page either in IE or FF without using the Edit and Note toolbar you will see a little icon scrolling with the browser window in the lower right corner of the screen. You can toggle between the editor modes, because of the links and clickable images will work well when the whole body contenteditable property is switched off. 

(* click on the picture to enlarge it)

The IE has built in feature opening MHT documents, but Firefox has not!

If you send to somebody an MHT document inform him to install the UnMHT extension for opening it in FF! Furthermore, inform him with a short instruction how he can use the editor-lite toolbar being seen at the lower right corner, switching off/on and this is a shortened version of the full editor what he can dowload free! 

Save your document with 2, 3 normal save before you also save it as an MHT, too! 

Editing a blank page

If you would like to edit starting form an absolutely blank page you can open a blank tab. If you are currently editing on an else tab and you open the blank page immediately following that the editor toolbar will be closed. You will be warned about the navigation and not forgetting to save the edited one. Also the blank page  must be saved at first before editing. You will be offered to choose saving the dependent file to same path by default. If you abandon the saving it will happen nothing. Only a pre-inserted text "write here" will remain in the blank page. Close this blank page and open a new one.The toolbar will be closed both cases either you had saved the document or not. If you saved the  blank page with any given name it will be automatically reloaded into that tab in which the blank page was earlier opened, and you can start the typing  where the "write here" text had been inserted, after reopening the editor toolbar Edit entire page menu.

Change log

This is the first version of Edit and Note toolbar.

Version: 1.0

Revision date: 10. Aug 2009

Compatibility: Firefox 3.0 - 3.5

Tested on:     Firefox/3.0.13  - Build ID: 2009073022

     Firefox/3.5.2    - Build ID: 20090729225027

     WINDOWS XP SP3 (* not guaranteed/tested to run on else OS)

* Some of its code which would had been written better optimized on FF 3.5, but had been left to be backward compatible with the FF 3.0.

Version: 1.01

Revision date: 14. Aug 2009

Bug fixes:

! Important
* minor

Version: 1.02

Revision date: 16. Aug 2009

Bug fixes:

! Important
* minor

Bug, weakness report

#weak1 (?)

When the whole page editable or there are editable sections the links either on the entire page or on the editable regions are suspended. The link colors will be set to default browser setting and the hand cursor will be suspended. A resolution to allow the links working well - You must temporarily switch off the editor toolbar!

Technically: When closing the editor all contenteditable regions /attributes will be removed.

There is also a weak, or not(?) but, anyway it is confusing. You will be given a notice about it once during a browser session when you put any page into fully editable mode.  Please read this information with perusal.

While you are editing in Full page Editor mode, you will get a Move/Resize box around the positioned elements, and pictures. This is a built in editor feature in FF3+, and I couldn't yet override. Please cautiously use this! Moving the box around the element may unfortunately cause the page appearing obscured. I  don't recommend using this box Move/Resizing capability! Instead of Click to anywhere (for example editing a sticky) from the sticky body, which will remove the surrounding box and use the sticky own moving and resizing feature. This also is the case with clickable images, also when you wish to change the bullet color by the eyedropper. If you wish to use changing the bullet color and both bullet and sticky opacity, or initiating a clickable image to work, please temporarily disable - close the Editor toolbar, then switch back again. Unfortunately if you once switched the Full page Editor mode the Move/Resize box will also appear around the editable regions even when you only switched back to Edit only Bullet, Sticky.

other weakness, bugs:  

In this version of Edit and Note you can not edit a document which has frames or iframes in it. However you can right click on a particular frame/iframe you can open it choosing the browser right click menu Frame open in new tab or window command, then you can edit that as an individual document. You will be informed when a page contains frames or iframes.
Although all of above mentioned  save capabilities are able to save a document to such a directory which contains non-standard foreign characters and spaces in their name, however there would be problems with the images inserted from and links pointing to  such named local directories.
I do recommend using with this extension such directories at least in their name the spaces are substituted with  for example '_' character and do not contain any special localized characters. It would be a great limitation, but technically speaking it is the best stable working to avoid any problem occurring from properly encoding/decoding URLs escape/unescape UTF characters.
This also is the case with using bookmarks, and giving such id-s which would be a bookmark target, also class names used in custom stylesheet. I recommend using  '_' char instead of space in any given name. This editor will automatically substitute all of spaces with '_' in hrefs and id-s and custom anchor names, before saving even either when you see space in a bookmark title, or heading title.
There would be such stylesheet designs (for example this one is such, but disabled yet in this style sheet due to the reported error) containing fixed or absolutely positioned divisions with set of bottom:0, and , overflow, overflow-x, overflow-y, scroll, or auto, in which you can  not navigate back on bookmark links.
(* See: recently reported possible bug in Firefox 3, 3.5 at https://bugzilla.mozilla.org/ - bug #507184).

Other weakness,  indications meanwhile editing are reported on the documentation page. (See the warning icons)

Compatibility issues working with else extensions
If you are using NoSquint extension or you altered the default minimum Font size in Font/Colors setting in the browser Options/Content menu the editor Font Size menu will not work properly, either on Firefox 3 or Firefox 3.5.

If you are using this extension with Firebug 1.4.1/1.4.2 recent version on Firefox 3.5.x there would be problems with the Firebug Console inserted secondary BODY element. If you enable Firebug on a page which you are currently editing and you reload the document allowing the Firebug Console to work (as it is instructed in Firebug 1 4.1 there will be inserted a secondary <body">..</body"> tag into the document, by Firebug. I can not at the moment foresee whether it affects further anything or not.  But, I observed, and I had been also reported yet there would have been cases when Firebug inserts  into the main <body id="firebugBody" ...which might bring forth  unfortunately deleting the whole document body.
(*See: recently reported bug: http://code.google.com/p/fbug/issues/detail?id=2068, this bug had been fixed in  release of the Firebug 1.5a21 what you can download from the above mentioned Firebug site link)

The Edit and Note extension will automatically purge the not necessary Firebug inserted elements before document saving. Strongly recommended switching off Firebug on the edited page before saving it!

There would some else elements inserted into your document which does not regard to immediately what you edited. These codes occur from working with some else extensions, for example Inspect context may put <popupset...> element at the end of your document code. This does not disturb your work, you can delete it by hand with any html or text editor later or Firebug before save.

Do not use the otherwise very good XRAY Bookmarklet with this extension. The two scripts will not work together!

Edit and Note is a free Firefox Add-On, thus I do not claim any copyright! It is for everyone who sees this extension useful, and I am glad to offer it  presently in its very elementary form.

Although, this extension surely involves in itself several of possibilities for further improvement  for example: adding support  for filling the Font list, amplifying Format Block and Insert element attributes button menu, refining the table formatting, link inserting abilities, probably adding a date picker, stabilizing the encoding issues or extending to use frame documents. However, I am not planning to develop toward this extension myself! Thus, everybody who take fancy to use and change anything in this extension do not hesitate to do it by oneself! You can freely change the code, or develop toward by your own! At best estimate you can drop in a message about it on my Contact pagen, and take a reference for its original idea and author.

I look forward to hearing from anyone, if he/she has any suggestion, improvements, mainly when one has a notice about any else confusing error experienced at run. Please also drop in a remark at my Contact page.


You can download the extension from the official Mozilla Add-On site.

Here is the link : https://addons.mozilla.org/hu/firefox/addon/13625


You can download here the extension:(* right click and Save Link as)

Edit_and_Note1.02_3.6.xpi (works on Firefox 3.6.x)

or you can click on the download picture on the top right corner.


You can download here a sample template page of this site (without any content involved in it, the content  was/would be written on-line in the browser :)

(* right click and Save Link as)


You can also download the sample Css - turquoise



(* download also the suggested extensions from the above written links to improve your work.)

Thanks giving

Thanks for every brain who contributed his knowledge, ideas, experiences, tricks and <script>s either on MDC Developer pages or on any else forums, or further else places,  who aid me in this work creating this extension usable. There are so many ones for thanks giving I can not list here them. Thus, I send them my thanks by this way.

Further, thank to my daughter for her several of useful ideas given me during the development, for her web design.