PDA

View Full Version : a few simple bookmarklets



brothercake
03-18-2003, 09:20 PM
Here's a small collection of bookmarklets for disecting your own (or other people's!) websites. They do things like, show all TABLE elements with a red border, hide non-link images, and so on.

I'm assuming people know what bookmarklets are, and how to install them? Please say if not, and I'll post instructions.

I'm also open to suggestions, and I'd love to see other people's ... :)

beetle
03-18-2003, 10:30 PM
Ya, can you help me install these? I'm kinda new to javascript.


Ok, kidding aside, I didn't write this one, but it's a view-source bookmarklet that does syntax highlighting! Interesting indeed. If it doesn't work after copy-pasting, let me know, I may need to upload it as a text-file.

javascript:document.body.innerHTML=String(document.documentElement.outerHTML).replace(/(<!--[\s\S]*?-->)/g,"$1").replace(/>/g," &gt;").replace(/</g," &lt;").replace(/(&lt;)([\/a-zA-Z]+)/g,"$1$2").replace(/ /g,"&nbsp;").replace(/\n/g,"<br>").replace(//g,"red>").replace(//g,"</font>").replace(/([^;=]+)=/g,"blue>$1=</font>").replace(//g,'"').replace(//g,"=").replace(/ /g,'="teal"><b>').replace(//g,"</b></font>").replace(//g,'<i>').replace(//g,"</i>").replace(//g,"<font color")

brothercake
03-18-2003, 10:41 PM
I'm seeing some special characters that are unidentified, eg

"$1"


As for installing them - well the file I posted you can just import with "Bookmarks > Manage Bookmarks > File > Import" in moz, and "File > Import and Export" in IE

To make you new ones you start with an empty bookmark - like "about:blank" and any name, and then edit its properties - change the name, and write the syntax like inline javascript:

javascript:var something=function();void(null);

where void(null) stops it from trying to open a new document. It doesn't have to be null - you can go void('your message here');

liorean
03-18-2003, 11:25 PM
Hey - that's my speciality...

ViewStyles: javascript:(function(){var s='http://liorean.web-graphics.com/bookmarklets/viewstyles.js', t='text/javascript',q='\u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&amp;&amp;/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='\u003cscript type='+q+t+q+' src='+q+s+q+'\u003e\u003c/script\u003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void('Coded by liorean');

ViewScripts: javascript:(function(){var s='http://liorean.web-graphics.com/bookmarklets/viewscripts.js', t='text/javascript',q='\u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&amp;&amp;/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='\u003cscript type='+q+t+q+' src='+q+s+q+'\u003e\u003c/script\u003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void('Coded by liorean');

ToggleStyles: javascript:(function(){var s='http://liorean.web-graphics.com/bookmarklets/togglestyles.js', t='text/javascript',q='\u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&amp;&amp;/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='\u003cscript type='+q+t+q+' src='+q+s+q+'\u003e\u003c/script\u003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void('Coded by liorean');

GraphicsInfo: javascript:(function(){var s='http://liorean.web-graphics.com/bookmarklets/graphicsinfo.js', t='text/javascript',q='\u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&amp;&amp;/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='\u003cscript type='+q+t+q+' src='+q+s+q+'\u003e\u003c/script\u003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void('Coded by liorean');


Sources can be found from the link in my sig.

Borgtex
03-19-2003, 12:01 AM
There is a great table bookmarklet from http://sam-i-am.com/work/bookmarklets/dev_debugging.html that also shows the amount of nested tables with diferent colors

brothercake
03-19-2003, 12:07 AM
Excellent; those are fantastic, particularly that script and css extractor :D

I made a simple view-source as well:

javascript:document.body.innerHTML=('<xmp><html>'+document.getElementsByTagName('html')[0].innerHTML+'</html></xmp>');void(null);


And then this one - a Lynx Emulator - try it out on this page :)

javascript:var db=document.body;var el=['img','object','embed','html','body','table','td','div','span','strong','i','blockquote','abbr','acc ronym','q','em','ol','ul','li','cite','a','p','small','label','legend','input','button','select','te xtarea'];var bgLen=el.length;var e,eleLen,i,j;for(i=0;i<bgLen;i++){e=document.getElementsByTagName(el[i]);for(j=0;j<e.length;j++){if(i<3){e[j].style.display='none';}else{e[j].align='left';e[j].style.backgroundColor='#bbb';e[j].style.fontStyle='normal';e[j].style.textDecoration='none';(el[i]=='a')?e[j].style.color='#900':e[j].style.color='#000';e[j].style.fontSize='16px';if(el[i]=='input'||el[i]=='button'||el[i]=='select'||el[i]=='textarea'){e[j].style.borderStyle='none';e[j].style.borderBottom='1px solid #000';}if(el[i]=='i'||el[i]=='em'||el[i]=='cite'||el[i]=='q'){e[j].style.color='#990099';}e[j].style.fontFamily='courier,monotype';}}}var h=db.innerHTML;h=h.replace(/<\/tr>/ig,'<br>');h=h.replace(/<[bh]([1-6]|ig)[^>]*>/ig,'<b>');h=h.replace(/<\/[bh]([1-6]|ig)>/ig,'</b>');h=h.replace(/<[\/]?[ftc][eobard](nter|ble|ody|nt)?[^>]*>/ig,'');db.innerHTML=h;void('Lynx Emulator by brothercake');


I've noticed that after a certain length in only works in mozilla. So for big ones, presumably it's better to create an element and call a remote script?

Borgtex
03-19-2003, 02:21 AM
Originally posted by brothercake
I've noticed that after a certain length in only works in mozilla. So for big ones, presumably it's better to create an element and call a remote script?

For some reason, IE6 introduced a limit of characters (500 or smthg like that) for bookmarklets, so it literally cuts the script

joh6nn
03-19-2003, 03:03 AM
figures that when you post this i'd be on vacation and away from all my bookmarklets. i don't even remember what all i've got.

liorean
03-19-2003, 09:33 AM
ie6w has a 508 character limit in bookmarklets. Not on javascript: links in pages, though.

nn4 has different limits in different versions - 2kb and 4 kb resp.

I'm not aware of any limit in mozilla, but then I've never tried to break it either.

As for Konq/Saf, Opera, IEMac, I have no idea, except I know there was a browser with a 1059 byte limit at some time, that I broke by two bytes.



For a list of good bookmarklet sites, see Webgraphics (http://www.web-graphics.com/). on the bottom of the linklist to the right.

jalarie
03-19-2003, 02:19 PM
I have a few posted on the "Samples of my work > Bookmarklets" page at:

&nbsp;http://spruce.flint.umich.edu/~jalarie/

And an editor for them linked from that same page.

brothercake
03-20-2003, 01:37 AM
Very nice :)

joh6nn
03-24-2003, 10:55 PM
most of the ones that i have, are things that most people could put together themselves. Change Text Color, Change Background Color, Remove Background Picture, Whois This Site, Toggle Images' Visibility, things like that.

I'm working on one that will list all the javascript functions on the page, and let you kill any you don't want to run, and one that will translate the page you're looking at.

cg9com
03-28-2003, 02:53 AM
Originally posted by brothercake
Here's a small collection of bookmarklets for disecting your own (or other people's!) websites. They do things like, show all TABLE elements with a red border, hide non-link images, and so on.
couldnt you do that with a user stylesheet? *feeling dumb*

brothercake
03-28-2003, 09:32 AM
Originally posted by cg9com
couldnt you do that with a user stylesheet?
Yeah, just as easily; but this is convenient because it's a link - ergo, a button on the toolbar rather than something I have to go to preferences to change ;)

liorean
03-28-2003, 01:48 PM
There's a mozilla add-on that might interest you, called ContextMenu Extensions (http://white.sakura.ne.jp/~piro/xul/_ctxextensions.html.en). With it you can add custom stylesheets and javascripts to the context menu, create local javascripts and stylesheets for single pages or domains, and a lot more. In fact, it's one of the more useful mozilla add-ons, as is the Tabbrowser Extionsions from the same source. Those two, checky and optimoz mouse gestures are the basic must-haves for mozilla.

brothercake
03-28-2003, 02:29 PM
Good tips; thanks.

But the mouse-gesture add on is seriously flawed IMO - it uses gestures from the left button instead of the right, so DHTML drag and drop becomes unuseable.

liorean
03-28-2003, 02:40 PM
You can use left, middle or right mouse button, with ctrl, alt and/or shift modifiers - you just have to set it up the way you like before you use it.

brothercake
03-28-2003, 03:26 PM
Originally posted by liorean
You can use left, middle or right mouse button, with ctrl, alt and/or shift modifiers
Can you ... I must have missed that. Thanks - gestures are so useful, particularly for webpages that try to stop you going 'back'

liorean
03-28-2003, 04:03 PM
Well, this bookmarklet may be useful to some of you:

java&#0115;cript:(function(){var t=['oncontextmenu','onmousedown','onmouseup','onclick','onkeypress','onkeydown','onkeyup'];while(t.length)window[t.pop()]=null;})();void('Coded by liorean');


It removes no-rightclick and no-contextmenu scripts.

I'm currently working on a bookmarklet that allows displaying the original and current source, colour coded. If I really feel like it, I might even add some kind of edit-current-source interface. (So it can be used like the DOM Inspector can in Moz.) Implementing something like that would take huge amounts of time to get working, though.

brothercake
03-28-2003, 11:49 PM
Is it possible to create a bookmark that opens a URL *and* runs some javascript on it? So you could, for example, open a page but suppress its body onload event?

liorean
03-29-2003, 12:09 AM
Yes, it's possible, but you'll need to work through some frame/iframe or object element, or through one of the xml loading interfaces for ie and moz.

Concept 1:
- Clean current document.
- Remove margins, border and padding on html, body.
- Create an object element (or iframe) linking to the page in question.
- Clear the window.onload on the page.

Concept 2:
- Load xml document.
- Add script element to head.
- Script contains onload=null and thus clears the onload event handler.
- Do one of the following:
* Create DocumentFragment containing the children of html element from xml file, replace current html with DocumentFragment.
* Create object or iframe and write xml to it.
* Open new window, serialize xml to a string and write contents.

Concept 1 should be compatible with more browsers while concept 2 is the most likely to actually work. Both are untested.l

joh6nn
03-29-2003, 09:32 PM
i don't think either would work, because of cross domain problems

liorean
03-29-2003, 09:49 PM
Well, if so, ie5.5 should still be able to do it - that browser allow cross-domain reach by the XMLHTTP object.

This should be easier to do serverside though - a php script that takes a URI, loads it, removes any onload="[...]" on the body tag, and inserts a script containing onload=null; at the end of the head tag. You can then use a bookmarklet such as this to load it:

java&#0115;cript:document.location='http://example.com/script?uri='+escape(prompt('Enter uri to load',document.URI));void('Coded by liorean');

beetle
04-02-2003, 05:27 PM
One I use when I need to know a keycode real quick (IE version)

javascrip&#116;:void(document.body.onkeypress=function(){window.status=event.keyCode;});