Eli Grey

JavaScript Shell 1.4 Extended

By Eli Grey Comment

Whenever I open up the JavaScript Shell 1.4 to test some JavaScript out, I don’t like that I have to use the default JavaScript version while testing out code. Generators, let expressions, and various other improvements to JavaScript can be pretty useful but they require an explicit JavaScript version to be declared, so I modified it and added support that will allow JavaScript code up to 2.0 (you can test higher versions by increasing _JS_version_check.end). I call it JavaScript Shell 1.4 Extended. Think of it as the unofficial 1.5 version. If you want the bookmarklet, it’s on this bookmarklet page.

This works by redefining the main shell input eval function multiple times under different JavaScript versions, incrementing by 0.1 for each tag added (they are later removed).

There are also a few other various modifications which you can read about on my JavaScript Shell Extended project page.

Tagged: , , ,
❧

Cross-browser accessors

By Eli Grey Comment

Xccessors is a script I made which implements the legacy methods for defining and looking up object accessors (getters and setters) of objects in JavaScript using ECMAScript 3.1’s accessors standard. This is aimed at adding support for the legacy method in IE8 RC1. Read more on the Xccessors project page. There is also a demo you can try out.

Update: I just tested the script in IE8 RC1 and it seems that IE8 RC1 only supports getters and setters on the DOM and the window object. So as long as you are setting an accessor on the window object or a DOM element, Xccessors should work fine.

Tagged: , , , ,
❧

HTML 5 dataset support

By Eli Grey 10 comments

Update: Getting (not setting) data-* attributes through Element.dataset now works in IE8 with the help of Xccessors.

I have made an implementation of HTML 5 dataset (data-* attributes) support that almost conforms to the HTML 5 spec* and works in Firefox 1.5+, Opera 9.5+, Safari, and Google Chrome. It uses getters and setters to simulate a psuedo-native HTML 5 dataset API. The code is licensed CC GNU LGPL and can be downloaded here. I have uploaded a demo (also in XHTML 5) that you can try out. The script includes these extra functions: Element.removeDataAttribute(name), Element.setDataAttribute(name, value), and Element.setDataAttributes() (all explained below).

*You cannot set new items the standard way like Element.dataset.name = value (already existing items can though). You either have to add new items by doing Element.setDataAttribute(name, value) for single additions and Element.setDataAttributes(object full of {name, value:String} pairs) to add multiple items at once. Instead of delete element.dataset[name], you must use element.dataset[name] = undefined or Element.removeDataAttribute(name) to remove data-name. Example of setting values:

var foo = document.createElement('div');
foo.setDataAttributes({'bar':'blah', 'lorem':'Lorem ipsum.'});
foo.dataset.bar == 'blah';
foo.dataset.bar = 'eligrey.com';
foo.dataset.bar == 'eligrey.com';
foo.setDataAttribute('foobar', foo.dataset.lorem);
foo.dataset.foobar == 'Lorem ipsum.'
Tagged: , , , ,
❧

CiteDrag drag and drop script

By Eli Grey Comment

Firefox 3.1 beta 2 recently added support for the standard drag and drop model (also with some extra Mozilla-only ones). I had an idea to automatically add citation info to text dragged from websites to plain and rich text editors using this newly supported API. I named the finished script CiteDrag, which requires no setup other than adding a single script tag anywhere in your website’s page. CiteDrag is licensed GNU LGPL and free to download in two flavors: CiteDrag and CiteDrag + Drag Image. CiteDrag + Drag Image is all of the normal CiteDrag code with some additional code to give a fancy canvas-generated drag image that shows the text content being dragged. CiteDrag is mostly useful for when someone blogs about another person’s blog post. Having the text automatically go into a cited blockquote and having a link back is very useful. I have installed CiteDrag on this blog and I have a demo of it and a rich text area you can use to test out CiteDrag fully.

Here are some examples of what it does when you drag various data types to various input areas: (Note wherever it says title, it will be replaced with the host name of the source page if there is no page title)

  • Drag a link or image (or linked image) to a normal text input: { [link URI] or [image URI] } via {source title} ( {source URI} )
    • Example:  http://example.com/ via Foobar ( http://foo.bar/post/example.com-ftw/ )
  • Drag a link or image (or linked image) to a rich text input: { [clickable link to link URI] or [image URI] or [clickable image linked to link URI] } via {clickable link to source page with title as text}
  • Drag formatted or non-formatted text to a normal text input: “{Text dragged}” ― {source title} ( {source URI} )
    • Example:  “Lorem ipsum dolor sit amet.” ― Eli Grey ( http://www.eligrey.com/ )
  • Drag formatted or non-formatted text into a rich text input: The dragged text goes into a <blockquote cite=”{source URI}”> and after the blockquote is ― {clickable link to source page with title as text}
    • Example:

      Lorem ipsum dolor sit amet.

Tagged: , , , , , , ,
❧

Passwords viewer

By Eli Grey Comment

Less than a year ago, I made a passwords viewer written in XHTML and JavaScript to view exported xml files from the Password Exporter Firefox addon. It was made to make human-readable (I know XML is readable but the exported XML can be much harder to read than tables and if you have it Base64 encoded you would have to decode all of the Base64 encoded attributes, one by one) text tables with the hosts, usernames, and passwords in the exported xml files for my personal use. The text table dynamically resizes with the longest values and is meant to be stored in a text file encrypted with a master password. I was using my passwords viewer today and thought I would share it with everyone else who uses Password Exporter.

You can download the passwords viewer (XHTML) or try out the online version (also XHTML) displaying a text table of a fake example passwords file. Due to this webapp being meant to help out people who use a certain Firefox addon, I only made it so it works in Firefox. Disregard that, I made it cross-browser* with 1 small tweak. The normal version is made for local use on your computer’s filesystem ONLY and the online version works both online and on your computer’s filesystem but requires you tto type out the filename instead of picking it with a file picker. Appending a query or hash string containing file=FILENAME to the end of the URI will auto-load the passwords file specified.

*Except for IE. I see no reason to waste my time on making something like this work in IE.

(more…)

Tagged: , , , ,
❧

Noteboard 2.0.4

By Eli Grey Comment

Noteboard 2.0.4 introduces some bugfixes and it also remembers what you last resized your Noteboard window to if you use the bookmarklet (Noteboard). Firefox doesn’t let JavaScript resize windows by default (even if they were created using JavaScript so I made the launcher close the launching window and make a new popup sized correctly for Firefox. Safari, on the other hand, allows JavaScript to resize windows created with JavaScript so it just resizes the launcher popup. Then it changes the window id to ‘noteboard’ instead of ‘noteboard_launcher’ and loads Noteboard into the same popup.

Tagged: , ,
❧

Noteboard tweaks and Safari support

By Eli Grey Comment

I am happy to say that Noteboard now supports Firefox 3+ AND Safari. It doesn’t support the current release of Safari so you have to use the Safari 3.1.2 nightlies as those builds include localStorage. Technically, I should be also be able to make Noteboard work with IE 8 beta 2 due to it also supporting localStorage, but I don’t want to waste my time making fixes for IE.

Now on to the tweaks for version 2.0.1:

  • Documents can now have custom titles instead of having the document name be the title.
  • The title quickly changes to “Noteboard” and changes back when you push Ctrl + D to bookmark Noteboard.
  • I stopped using uneval function built-into Firefox and took part of the JSON.stringify function from json.org’s JavaScript JSON script.
  • I added and changed these keyboard shortcuts:
    • Import is now Ctrl + Alt + 1
    • Export is now Ctrl + Alt + 2
    • To change the current document’s title, push Ctrl + Alt + T
  • Starting the open a document prompt (Ctrl + Alt + O), clicking OK, and leaving it blank opens up the shortcuts page.
  • The shortcuts page is no longer stored on your localStorage and is now a protected static document that can’t be edited/deleted.
  • A lot of code tidying up.
Tagged: , , , , , , , ,
❧

Noteboard 2.0

By Eli Grey Comment

I have almost completely re-wrote Noteboard from the scratch and made Noteboard 2.0 because I felt that Noteboard 1.0.1 was not that extensible. There are a TON of changes in Noteboard 2.0, most notibly, multiple-document support. Just the same as the original Noteboard, it’s Firefox 3+ (and maby 2+) only. The reason there are only keyboard shortcuts (hotkeys) to control Noteboard is so there are no other elements other than a single text box. The stats bar has been disabled by default and can be toggled on by pushing Alt + Ctrl + I. All of the keyboard shortcuts are on the first document, ‘shortcuts’. I don’t reccomend deleting this document until you get used to using Noteboard.

With multiple document support, you can now create as many documents as you like. To create a document, push either Alt + Shift + N or Alt + Shift + C and type in the name of the document. To open a document you can push either Ctrl + Alt + O or Alt + Shift + O. To delete a document, you push Alt + Shift + D. To rename the current document you’re viewing, push Alt + Shift + R. All documents (and document names) have full Unicode support so you may name them whatever you want to and put whatever you want in them.

Another cool feature introduced in Noteboard 2.0 is document autoload URLs. (more…)

Tagged: , , , , , , , , , , ,
❧

Noteboard 1.0.1 update

By Eli Grey Comment

I have recently updated Noteboard. This update includes various improvements. You can visit Noteboard through noteboard.eligrey.com and noteboard.nfshost.com.

  • Instead of using Mozilla’s non-standard storage interface, I changed the code to use the standard WhatWG Storage Interface. Using this interface lets Firefox 3.1+ manage the data set by going to Options -> Advanced -> Network -> Offline Storage.
  • Ctrl+S now saves the text. I recommend you do Ctrl+Alt+S to not trigger the “Save As” dialog box. I accidentally used to push Ctrl+S all the time forgetting that it will autosave when I close the window and it couldn’t save in mid-edit. I can’t override the default Save As dialog box without having access privlaged scripts which are only for addons, ect.
  • Alt+Ctrl+D deletes all the data stored by Noteboard on the domain it is currently on. Think of it as clearing your cookies if Noteboard actually set cookies. This is mostly needed as an alternative to using Firefox 3’s buggy offline storage management that doesn’t work most of the time.
  • When you Ctrl+V paste, the text is autosaved.
  • Will work on any browser that supports localStorage or globalStorage and will temporary store the data for browsers that only support sessionStorage

Update: I never mentioned this but the last version of Noteboard had a tiny update that never got a blog post about it because of the update being so small. The update allowed it to be served in data URIs opened through links or in iframes due to most browsers allowing data URIs to inherit the domain of the referrer. This means you can serve Noteboard 1.0.1 in data URIs now.

Tagged: , , , , , , , , ,
❧

bit.ly vulnerabilities

By Eli Grey Comment

The bit.ly long url shortening service has an API that is used by their bit.ly bookmarklet to view past bit.ly url shortenings which can be used by any website.

I for one don’t feel like bit.ly users’ shortened link histories should be accessible over an unauthenticated API. Website owners can use JavaScript to find out all the sites users have shortened using bit.ly. The history API is identical to the bit.ly url stats API except it has history.php as its endpoint instead of feed.php.

I have quickly thrown together an example of what I can do with your bit.ly history. This example only works in Firefox, Safari, and Google Chrome because I only spent a few minutes making it and only tested it in Firefox while I made it.

Update: Fixed it to stop saying “Loading” if you have never used bit.ly. It now gives you a message to use bit.ly on a few long URLs and reload the page.

Tagged: , , ,
❧