Today we’re going to take a look at writing scripts for the Greasemonkey add-on for Firefox. This add-on allows us to use JavaScript to make changes to the way webpages are displayed on our browser. These changes can only be seen by a copy of Firefox that is running a particular script. As an example, we’re going to write a script that adds a border to the banner image of each article on Hack a Day by overlaying the image you see above. Find out how it’s done after the break. Continue reading “How To Overlay Images By Using Greasemonkey”
javascript134 Articles
XMPP And Home Automation
[Matthias] from Intuity Media Lab put together a nice bit on controlling office lights with XMPP from his Android phone. In the article, he explains the components involved in the project, why he chose XMPP, and lists everything you need to replicate it. The project makes use of a wide variety of tools and libraries, weaving together code from multiple languages to achieve its goal. Overall, his project is a welcome change in a world full of Twitter–based solutions.
Streamfile Encrypted File Drop
There are myriad file transfer services on the web. Streamfile tries to set itself apart by providing a unique secure service. Their file upload system is all JavaScript and doesn’t rely on Flash. It uses SSL to secure the file transport. As soon as you start uploading the file, you can hand the link off to your recipient and they can start downloading without waiting for the upload to complete. The free limit is 150MB, but their PRO service allows 2GB files.
[via Download Squad]
Remote Image Processing In JavaScript
[youtube=http://www.youtube.com/watch?v=u3_cFel26J8]
[Tom] wrote in to tell us about his JavaScript project for motion detection. It ties together two ideas we’ve talked about recently. The first is doing image processing in-browser using Canvas(), which we’ve seen employed in captcha breaking. The second is offloading heavy processing to browsers, which we saw recently in the MapReduce implementation. [Tom] is using JavaScript to compare consecutive images to determine if there’s any motion. He did this as part of MJPG-Streamer, a program for streaming images from webcams. It can run on very limited hardware, but image processing can be very intensive. Doing the image processing in-browser makes up for this limitation and means that a custom client program doesn’t have to be written. You can find the code here and a PDF about the proof of concept.
Distributed Computing In JavaScript
We’ve heard about the idea of using browsers as distributed computing nodes for a couple years now. It’s only recently, with the race towards faster JavaScript engines in browsers like Chrome that this idea seems useful. [Antimatter15] did a proof of concept JavaScript implementation for reversing hashes. Plura Processing uses a Java applet to do distributed processing. Today, [Ilya Grigorik] posted an example using MapReduce in JavaScript. Google’s MapReduce is designed to support large dataset processing across computing clusters. It’s well suited for situations where computing nodes could go offline randomly (i.e. a browser navigates away from your site). He included a JavaScript snippet and a job server in Ruby. It will be interesting to see if someone comes up with a good use for this; you still need to convince people to keep your page open in the browser though. We’re just saying: try to act surprised when you realize Hack a Day is inexplicably making your processor spike…
[via Slashdot]
Curiosity Killed The Twit, Twitter Clickjacking
Twitter was flooded this morning with users posting “Don’t Click: http://tinyurl.com/amgzs6”. TinyURL has since terminated the URL. The original page doesn’t seem to be live either. It displayed a button that said “Don’t Click”. If the user happened to be logged into Twitter, it would automatically update their status. The instigator partially describes the method on his blog (translated). The page would load the user’s Twitter page in an invisible iframe. The status would be pasted in and the “Don’t Click” button is placed on top of the update button. You can find the code snippets here and the original author credits this post for the inspiration. Twitter has since added a JavaScript fragment to each page to break out of iframes.
if (window.top !== window.self) { window.top.location.href = window.self.location.href; }
MegaUpload Captcha Cracking In JavaScript
This was certainly the last thing we expected to see today. [ShaunF] has created a Greasemonkey script to bypass the captcha on filehosting site Megaupload. It uses a neural network in JavaScript to do all of the OCR work. It will auto submit and start downloading too. It’s quite a clever hack and is certainly helped by the simple 3 character captcha the site employs. Attempting to do the same thing with ReCAPTCHA has proven much more difficult.
UPDATE: [John Resig] explained of how it works.
[via Waxy]