Yesterday I read " rel="nofollow">this blog by GuiedGui on making copy and pasting possible on the Nintendo DSi browser. I liked the idea and had some ideas to improve upon it, so I gave it a shot and came up with this version of copy and paste, that allows you to select text from any website and paste it in text inputs on any other website!

I couldn't get the bookmarks to work in the BBCode links unfortunately, so instead I set up this page: Copy paste installation page

With these two bookmarks you can copy selected text with your bookmarks, and paste them in text inputs (even if the text input is on a completely different website!). The project was actually much more complex and challenging than I initially thought it would be, so I'm going to document exactly how the development of these bookmarks went, for the wizkids here

IF YOU JUST WANT TO TRY COPY/PASTE, SIMPLY GO TO THE INSTALLATION PAGE AND IGNORE THE REST OF THIS POST






The development process and countless challenges
Okay, so initially my idea was to just use javascript to get the selected text and send it to my own webserver using a HTTP request. Then I would create a second bookmark that connects to this server, retrieves the stored text, and then does something with it that allows you to put it in a textbox. Sounds easy enough, right? WRONG.

Big problem number one: HTTP requests to another URL are disabled by the Nintendo DSi browser, even if your webserver accepts connections from all sources! This is most likely a very grave protection measure against data leaks and stuff like that. Well, this is a problem, because if we can't find another way to communicate data to the outside somehow, our plan is doomed from the very start.

Okay, let's try to pull a sneaky one on the DSi browser instead We won't send data using a HTTP request... No, we'll simply open an iframe to a page on my server, and read the contents of the iframe! I did this and the iframe opened with no problem at all. Now let's simply read the data from the iframe and... ERROR. Permission denied. Again! Okay, good, DSi browser, but I got another ace up my sleeve. Instead of trying to read the data from the iframe, I will approach it from the other way around instead: I will run code in the iframe that sends data to the page that opened it instead, muahaha! PERMISSION DENIED. Once again. I've tried many different things, and I couldn't find any way to get data from the iframe to the page that opened it in any way. The protection measures do a good job at keeping me out of that.

So if HTTP requests don't work, and neither do iframes... I've got one more idea. Images! I can simply request an image from my webserver. I could make my webserver encode data in the form of an image. Then the client can read the image data and extract the original data! Kinda convoluted, but I'm getting desperate here, okay? Okay, so I'm making the DSi open an image from my webserver... Now I extract the data from that image... DENIED, SUCKER! Once again, the DSi thwarts my efforts to receive data from my webserver.

I've been denied three times, and I'm getting at the end of my wits. However, I have one idea left. Probably the worst idea for communication I've ever had. But it's so stupid that it could actually work. I may not be able to get the pixel data from the image that I download from my server, but there is ONE type of data I can access... And that is the size of the image. The DSi browser lets me access the dimensions of the image. So hear me out... What if we would somehow encode the stored text into a length and width of an image? Sounds stupid? Well, that's exactly what we're going to do.

Every character in a text is stored in a certain format. ASCII is the most widely used one on the internet. Basically, every character (letter, number or symbol) has a value between 0 and 127 attached to it. Now I'm going to take that value and represent it as image height and width. That means that by making my server generate an image with a height and width between 0 and 127 pixels, I can encode two ASCII characters. In other words... Every time I request an image from my server, I can send two characters of data back using this obscure method. Now if I keep requesting images from my server, I can slowly collect the entire text that is stored on my server. One image at a time. So I put on my super hacker glasses and wrote some PHP an javascript code that makes this all work. By downloading images in the background in the page, I can now retrieve the stored text from my server.

In case it wasn't clear yet, sending data was never the problem. I can simply request "image.php?text=My_copied_text_here" to my server to let my server know what data I want to store on the server. So I now have a way to send copied data to my server and retrieve it. Now I just need to do something with the retrieved text to put it in an input field. I wanted to make it so that the user can click on any text input, and the text will then get pasted at the end of the content that that input currently has. However, when you click a box, it immediately opens the on-screen keyboard, which stops javascript from running, which means I can't append the text to the box. Quite annoying. Initially I tried to add the property "disabled" to all text inputs on the page so that clicking the inputs wouldn't open the keyboard, but now my click even won't register either. Well, long story short, later on I found out about the "readonly" attribute that text inputs can have that make them, well, read only. This solves my problem, because now I can stop the on screen keyboard from opening and allow the user to click the box they want to paste in. After pasting, I remove the "readonly" attribute from all text inputs again to return the page to the normal state, and voila, the copy and paste is done!

Now all that's left to do is make this javascript code available as a bookmark. Voila, it's done! Let's open the bookmark, aaaaanndddd... Nothing happens. At first I thought maybe I introduced an error in the code when turning it into a bookmark, but close inspection reveals I didn't. After some investigation I found out that my code is too long... And now I'm scared. I have no idea now long the DSi allows bookmarks to be, and I have quite a bit of code to make the copy paste work. I tried a lot of different sizes of test programs as bookmarks to find out the limit of how many characters a javascript bookmark can be. The result? Almost 1000 characters. What is the size of my program? 3000 characters. Wow. My program, which is still relatively small, is three times too big. The first thing I did was throw the code into an automatic compiler that makes the code smaller. Now my code is 2200 characters. Okay, good, but still not even remotely close. Okay, let's turn the compression up a notch. 1900 characters. And now the DSi won't execute the code anymore because it doesn't support some of the new syntax. Damn. Looks like I'm going to have to manually look through every nook and cranny of my code and heavily optimize it in terms of size.

This was a BATTLE. After carefully analyzing, implementing and trying a lot of approaches, my code gradually shrunk, ocasionally breaking in the process, which makes me learn which syntaxes the DSi understands and what it doesn't understand. Some optimizations include wrapping normal system functions such as "document.getElementsByTagName" into shorter one-character-name functions. Basically I'm bundling up any piece of code that can be found twice into these one-letter functions. Even attributes such as "readonly" get stored in a variable (like "r" in this example) to save space. The url that gets called on my webserver is http://home4dsi.com/paste.php?step=x (where x is a variable). Not good enough. http://home4dsi.com/p?s=x? Much better. I keep shaving and shaving and shaving and get closer and closer to that golden 1000 character limit. But I can't quite get there. When every single variable and function has been turned into a one or two letters variable or function, and every single useless whitespace has been removed, I still have a little bit over 1000 characters. So I scrap a feature. I said the images that get the copied text from the server get opened in the background, right? So you won't see them? Well, not anymore. If you look at the bottom of the page now, you can see black squared images quickly opening and closing. Modern art. I guess this is what they call "it's not a bug, it's a feature". I still have a little bit too many characters left, so I use my last trump card. I reduce the text that the user gets to see. Who needs to see "The copied text is ready. Click the text input where you want to paste it." if "Paste where?" can do the trick? That's what I thought, nobody.

And with that final trump card, the file size finally gets under 1000 characters. It has been done. I have conquered the limitations of the Nintendo DSi browser. You were a formidable opponent, but in the end, it is the legendary copy/paste system that triumphs.




P.S.: A big thank you to GuiedGui for inspiring me to make this! I thoroughly enjoyed this. These "simple" problems with insanely complex and mundane solutions that are right on the edge of what is possible are the best kind of puzzles to me! Now there's just one thing left to do, I guess, and that's to find a straight forward way to not only copy text from pages, but also from text inputs, and create a third bookmark for that purpose


Edit: After more investigating, I found another way to do the data transfer between the DSi and my server using injected external Javascript files. This makes the paste functionality much faster than it was before. Enjoy!