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(/()/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/(<)([\/a-zA-Z]+)/g,"$1$2").replace(/ /g," ").replace(/\n/g," ").replace(//g,"red>").replace(//g,"").replace(/([^;=]+)=/g,"blue>$1=").replace(//g,'"').replace(//g,"=").replace(//g,'="teal">').replace(//g,"").replace(//g,'').replace(//g,"").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)&&/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)&&/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)&&/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)&&/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/bookmarklet...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

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,' ');h=h.replace(/<[bh]([1-6]|ig)[^>]*>/ig,'');h=h.replace(/<\/[bh]([1-6]|ig)>/ig,'');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

Quote:

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. 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:

 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

Quote:

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

Quote:

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. 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.