Archive for the ‘Opera Extensions’ Category

Help Translate Noteit Posts

May 16th, 2011

The next version of Noteit Posts (v1.3-0) will support multiple languages. But I can only speak English fluently, so I will need help. If you can help translate Noteit Posts into another language, please read on.

Translating Noteit Posts

All text in Noteit Posts is stored in the file lang.js. This file can be provided in multiple languages, allowing for easy translation of the Noteit Posts interface.

Download the original lang.js file.

Open the downloaded lang.js file in a text editor, such as notepad, you should see something like this:

Noteit Posts Localization File v1.3-0
Language: EN-gb (Default)
Translator: James Glover
Contact: (Optional: Useful to notify you of updates)
Short Desc: Add notes to a URL or domain to remind you of the important things.
Long Desc: Noteit posts allows for the addition of persistent notes to any webpage. A simple interface allows for notes to be edited freely, recoloured, and moved about and resized through a simple drag and drop interface. Notes can be tied to a single page, or and entire domain, and can easily be managed, edited and deleted from a centralised interface.

var string = { //Declare the String variable
lang: "en-gb", //Language code
credit: "Default English translation by James Glover.", //eg. Translated into British English by James Glover
1: "Create Note", //Mouseover text of button
2: "EXTENSION ERROR: Can't read ", //path
3: "Database creation error: ",
4: "Database creation failed without error",
87: "Display create note button on extension bar",
88: "Duplicate ID detected!",
89: "No ID detected!"

The top section, between the stars/asterisks provides information about the translation and the mod in general.

Language: Defines the language of the translation. Please include the language code here, you can include a full text description in brackets afterwards. Specifying regional variations (eg. fr-CA) is not necessary but can be included.

Translator: Your name. This is purely for administrative purposes and is optional.

Contact: An E-mail address. This provides contact details in the language file itself. It is optional. While the information will not be displayed by the extension it WILL be accessible to anyone who looks at the extensions files.

Short Desc: The extension short description, used in the extension catalogue. To avoid confusion, please translate the English text, rather than writing a different description.

Long Desc: The extension long description, used in the extension catalogue and the manage extensions page. To avoid confusion, please translate the English text, rather than writing a different description.

The next section defines the text which will be used in the extension itself. It includes error messages, preferences screen text, and text displayed by the extension itself. The var string = { //Declare the String variable line is important and should not be modified.

lang: “en-gb” Defines the language of the translation. Replace en-gb with the language code here as in the header. Do not include other text.

credit: “…” Displayed on the preferences screen when your translation is being used. Replace the text between the quotes (“) to give yourself credit. If you do not wish to be credited, leave this blank.

The remaining lines each follow the same: format: number: "text",. In each case, simply translate the text between the two quotation marks. Leave the number alone and do not remove the quotes or the comma. Some lines contain // followed by a comment. These comments provide more information to help your translation, they do not need to be translated.

Completed Translations

en-gb Me
en-us Me

Noteit Posts

Mar 9th, 2011

About the Extension

An example screenshot of noteit posts in use.

Noteit posts can easily be created, edited, resized and recoloured.

Noteit Posts is an extension for the Opera web browser, that allows for the addition of persistent notes to any webpage. A simple interface allows for notes to be edited freely, recoloured, and moved about and resized through a simple drag and drop interface. Notes can be tied to a single page, or and entire domain, and can easily be managed, edited and deleted from a centralised interface.

An example screenshot of the config screen

The configuration screens provide a quick and easy overview of all your notes, as well as means for altering the default note appearence.


  • Easily create notes from the extension’s button.
  • Notes are persistent and will remain on the page on future visits.
  • Notes are stored in the extensions webSQL database, so will not be lost if you clear your cookies.
  • Notes can easily be moved, resized and recoloured using the simple interface.
  • Attach a note to a page or a domain as you decide!
  • A central configuration page allows complete control over all your created notes.
  • Easily choose default note appearance.
  • Create notes via a customizable keyboard shortcut (Ctrl+# by default)
  • Import and export notes via XML

Got other ideas? Use the suggestions tab on the left hand side of this page to make or vote on suggestions. Alternatively visit the suggestions page directly.


This extension requires that you be using the Opera browser, at version 11.0 or above. It was developed and tested with Opera 11.0.1 under windows, but should work in the Mac and Linux versions. This extension will not work with Opera mini, Opera mobile, or other embedded versions, such as the Wii browser.

Download the extension using the link further down this page. Extensions can be installed by opening them, or by dragging and dropping them onto Opera. When prompted, confirm that you wish to install the extension. I eventually hope to get the extension listed on the extension’s catalogue.

To create a new note, simply click the orange pencil symbol Orange pencil extension icon in the opera extensions tool-bar. This will usually be located to the right of the address bar. This will create a note on the webpage you are currently viewing. If the icon is greyed out, ensure you have an active tab selected, and that the page has finished loading. It is not possible to add notes to the Opera speed dial page, or other elements of the Opera interface.

The newly created note should look like this:

An Example Note

An Example Note

To add content to the note, click within the dotted box and begin typing. Once done, just click elsewhere on the page, and the note will save. To move the note, click on the dark bar at the top, while holding down your mouse button, drag the note around, just as you would move a window using its title bar. To resize a note, place your pointer over the dark triangle in the bottom right hand corner, the pointer should turn into diagonal arrows. Simply click and drag to resize the note, just as you would a window.


Notes can be closed by clicking the X symbol in the top right hand corner. Be aware, this will also delete the note from your database. Once closed, a notes contents is lost and can’t be recovered. Adjacent to the close button is the minimize button _, this will shrink the note down to the size of the dark bar, and is useful if you wish to temporarily see the underlying website. Minimized notes can be restored by clicking the restore button #, that will replace the minimize icon.

The configuration panel can be accessed via the configure icon C in the top left hand corner. The configuration panel allows you to set the colour of a note, or alter whether it is attached to the page, or the domain. For example, if you created a note while viewing this post, ‘page’ would ensure that it only appeared when you were reading this post. However, if you choose ‘domain’ then the note will appear on any page at

The Preferences Page

If you right click on the noteit orange pencil and select preferences, you will enter the Noteit posts preferences page. Here you can tweak the default settings, and manage your notes database.

The about section contains information about the extension, including the version you have installed.

The options section allows you to change the default settings for newly created notes. Width and height control the size of the note in pixels. Left and top control where the note will appear on the page, a value of 0 for both for instance will have the note appearing in the top left hand corner. Colour can be used to set the default note colour, whereas ‘page or domain’ determines if a note is associated with the page or the domain by default.

The stored notes section provides a table showing all notes you have created. ‘Refresh table’ will reload the table, displaying any changes that may have been made since the preferences page was opened. This is especially useful if you have had the page open in the background, and have modified notes in other tabs. ‘Delete Selected’ will remove any selected notes from your database, preventing them from displaying in future. Notes can be selected by ensuring that there is a check mark in the box in their row of the table. Finally, ‘Reset Database’ will clear all notes, and rebuild the table. This action will cause you to lose all notes and is not recommended.

By clicking the ‘configure’ button next to each note, it is possible to manually tweak a notes size, position, colour, content, and even associated page. This feature allows you to modify notes, without requiring that you visit their containing page. It is also the only way to move a note from one domain to another.


v0.0.1 – Limited First release (Released as 1.0)
v0.0.2 – Change UID to blog post
– Converted urls to lowercase before comparison as well as storage
v0.0.3 – Switched the default setting to page specific, rather than domain
– Switching the note from domain mode to page mode now ties it to the current page
– Increased security to validate field names
– Ensure that pages making changes to, or deleting notes are those which own the note.
v0.0.4 – Fixed a but introduced just prior to release that prevented minimization.
v0.0.5 – Removed implication that the stored notes feature is incomplete.
v1.0.0 – Added link to website
– Added timed onInput event to save notes in case focus is not lost before the page is left.
– Added ability to position notes relative to viewport
v1.0.1 – Corrected bug, opera doesn’t recognise ‘input’ for content editable divs
– Corrected code that had previously not been running as a result
V1.1.0 – Minimization state of notes is now saved as intended
– Minimizing and restoring notes no longer results in errors
v1.1.1 – Changes to default note height now saved correctly.
v1.1.3 – Unofficial release: Carriage returns correctly saved. (Should also solve some issues with other ‘special’ characters.)
v1.2.0 – Added the ability to customize note fonts.
– Added link to suggestions page.
– Menubar now displays a preview of each note to allow easy identification when minimized.
– More tightly defined the style of notes to increase consistency across pages.
v1.3.0 – Added lang.js file to allow for easy localisation
– Reorganization and optimisation of code to allow for easier maintenance
– New lines in note body no longer cause HTML to appear in note title on refresh
– Dragging/resizing notes no longer selects underlying text
– The note edit area will have a scrollbar if the contents become too long, the edit area will still adjust as the note resizes
– Font inheritance now occurs as expected: Font no longer lost if press return.
– New paragraphs in notes no longer result in a large top-margin
– Minor spelling and grammatical errors corrected.
– Added ability to create notes via keyboard short-cut (Ctrl-# by default, user customizable).
– Extension bar icon now optional.
– Further improvement of stylesheets to maintain note appearance.
– Added ability to export and import notes to allow for backing up

Download Extension

Noteit Posts is now available from the Opera extensions catalogue, it is recommended that you install the extension from there as this will allow for easy auto-updating. It is strongly recommended that users of the version hosted on this website export all their notes and import them into the version hosted on the extensions catalogue.
Visit the extension page (Recommended)
Download Version v1.3.0 (58.7 KB) (Extension Catalogue Version Recommended)
Bugs, suggestions? Use the suggestions tab on the left hand side of this page to make or vote on suggestions. Alternatively visit the suggestions page directly.
Noteit posts is a free extension, however, if you would like to show your thanks:

Learning the script: Noteit – An Opera Extension

Mar 8th, 2011

Web standards can be split into three major elements: HTML, CSS and javascript. HTML controls content, and gives it meaning and semantic structure. CSS controls style and form, it gives web documents their colour and shape. The third element, javascript, can be used to control the activity of the other two; it instils interactivity and makes the content dynamic and responsive.

I’ve been familiar with both HTML and CSS for a few years now, and, while caught in the dull cycle of job searching, I decided it was a good time to add javascript to my belt as well. I had already dabbled with a few other programming languages, many of which used similar mark-up to javascript, so was already familiar with the overall concepts, which meant I felt happy starting with a reasonably ambitious goal. I would make an Opera extension.

Opera extensions are built on the technology of the web, as this makes them ideal for interacting with web content. As a result, by choosing to make an Opera extension, I would also learn valuable lessons that could apply to more traditional web content, as well as familiarising myself with the Opera extension API. I also already had an idea, and one which would take me through several different lessons.

When looking for jobs, I would sometimes find myself looking at an advert I had already read, trying to work out why I had rejected it. Often these reasons were buried deep in the job advert, and I’d waste time trying to re-find them. Unfortunately, while job sites make it easy to mark jobs you are interested in, they rarely make it easy to indicate those you aren’t. If only I could stick a post-it note on the page, which would stay there if I returned. I quickly formulated a plan for the extension I wanted to make.

The Requirements

In order of importance.

  1. Clicking a button in the menubar would add a ‘post-it’ note to the page.
  2. The contents of this note could be edited from the keyboard.
  3. The note would be saved, and would reappear on the page if I were to return to it.
  4. The note could be moved about the page, and resized at will. Ideally through a similar mechanism to moving and resizing windows. The size and position of the note would be remembered.
  5. The note could be recoloured.
  6. Notes could be attached to a specific page, or a whole domain.
  7. Notes would remain until specifically deleted. They would not disappear over time, or on simple cookie deletion.
  8. Notes could be administered from a central interface.
  9. The central interface could be used to change the default note settings.

This list of requirements hinted at a neat work flow, and ensured I covered a range of topics, from simple manipulation of the DOM, communication between the browser and the web page and setting up a suitable storage system.

Introducing Noteit Posts

Today I finished the first version of the extension, which meets all the criteria listed above. While it is complete, it hasn’t been extensively tested, and could probably do with some optimisation. Additionally, there are a couple of minor issues that I’d like to get solved:

  1. Saved notes are loaded onto the website with the DOMContentLoaded event. Loosely speaking this means when the base of the website has finished loading. With larger websites or slow servers this can introduce unsatisfactory delay. Ideally I want the notes to appear as soon as I can add children to the document body.
  2. Searching the database for saved notes is unsuccessful with more complicated URL’s. I’m assuming that this is an issue with how some characters are processed before being added to the database. I’ve found the cause of this bug. I converted everything into lower-case before storing in the database, and then forgot to do the same before checking it. Ironically I did the first step to avoid case sensitive situations just like this one. I’ll correct it in the next version.
  3. In a couple of cases, by WebSQL transactions are composed dynamically. While security is unnecessary in this extension, and all content directly editable by the user is scrubbed, I realise that this is not best practice and would love to avoid it is possible. If anyone has any advice on how best to accomplish something like the following, it would be greatly appreciated: transaction.executeSql('UPDATE Notes SET '+field1+'=? WHERE id=?',[value1,id], null, function (transaction,error) {errorhandle('updatenote',transaction,error);})

I’m making this early version available for anyone who wishes to play around with it, for the purposes of beta testing. If you have any issues, please let me know. Also, if you are familiar with javascript, and opera extension development, then please feel free to look at my code. Any feedback, especially with respect to ‘bad practice’ would be greatly appreciated.

Edit: Uploaded a new version to correct the case-sensitivity bug. Additionally modified the version number to be more suitable for pre-official release version, and altered the ID to refer to this blog post, as Opera seem to like URLs as IDs.

Edit: Version 0.0.3 uploaded to provide increased security, and to ensure that posts are correctly assigned to the current page when switching from domain mode to page mode.


Download Noteit Posts 0.0.3