Sticky Notes

By panzi Last update Jul 27, 2010 — Installed 8,735 times.

Script Summary: add sticky notes to websites

Using this script you can add sticky notes to any website.

Update 2:

I changed many internal things and the export format (it's now JSON) so in order to migrate from the old version to the new one you have to install this migration version first. On first run it will migrate all sticky notes and display an alert message saying migration went ok. After that you can install the newest version. However, because of the changes you have to uninstall the script before you install the new version or otherwise the default style sheet doesn't get loaded. The saved sticky notes do not get deleted when you uninstall the greasemonkey script, but if you want to play it safe you can export the sticky notes using the migration version before you uninstall the script.

Update 1:

With a little help from Mihai I added support for custom stylesheets. Now you can theme your sticky notes as you wish.

It's also possible to add a bookmarklet with which you can add sticky notes. Just create a bookmark with the location javascript:void(window.addStickyNote());. See my blog for a link you can bookmark via right-click (because it is not possible to post javascript: links here).

I changed the import/export/edit stylesheed dialogs to be overlays instead of popup (because of security restrictions in newer Firefox versions that prevent JavaScript to manipulate the content of popup windows). I also added a dialog with which you can view and if you want delete all your sticky notes. These dialogs are also styleable which forced me to reset all already existing custom styles so the interface is not broken because of incomplete styles. Sorry.


Use the in the "User Script Commands" Menu three entries will be added:
  • Add Sticky Note: Inserts a new sticky note at the left hand upper side of the currently viewed page.
  • Export Sticky Notes...: Opens a new window which shows all your sticky notes in a text format that can be saved to a file.
  • Import Sticky Notes...: Opens a new window which shows a text area in which you can insert previously exported sticky notes.
  • Edit Sticky Note Stylesheet...: Opens a new window where you can edit or reset the stylesheet of your sticky notes.

To edit the text of a sticky note just double click it. You can use HTML in your sticky notes. However, for convenience reason newlines are automatically converted into <br/>.

You can move sticky notes by dragging them and resize them by dragging the bottom right corner of the sticky note.


Development Repository:

You can find the repository on bitbucket:

Clone the repository:

$ hg clone