Posts Tagged ‘javascript’

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