Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


Handy Bookmarklets

  • Please log in to reply
No replies to this topic

#1 Andrew


    Bleepin' Night Watchman

  • Moderator
  • 8,250 posts
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:10:23 AM

Posted 29 October 2007 - 11:57 PM

Bookmarklets are little javascript commands that are stored as bookmarks in your web browser. All modern browsers (that I know of) support them, though javascript must be enabled and IE doesn't seem to support numbers 2 and 3.

Note: Due to limitations of the forum, in each example remove the space between java and script.
  • Display all named anchors in a page.
    named anchors are those little things that let you jump to a spcific area of a page. These are often used for table of contents and for thos "Retrun to top" links at the bottom of pages.
    java script:(function(){var atags,i,name,a; anchs = document.anchors; for(i=0; i<anchs.length; ++i) { a = anchs[i]; name = a.name; a.appendChild(document.createTextNode(%22#%22 + name)); a.style.border = %221px solid%22; a.href = %22#%22 + name; } })();
  • Execute custom scripts against the current page.
    This one opens up a little javascript editing window that allows you to run your own javascript commands on the page you're currently viewing. Must see to understand/believe. It's very long, but very cool.
    java script:with(window.open(%22%22,%22_blank%22,%22width=%22+screen.width*.6+%22,left=%22+screen.width*.35+%22,height=%22+screen.height*.9+%22,resizable,scrollbars=yes%22)){document.write(%22<head><title>JavaScript Development Environment 2.0.1</title></head><frameset rows=\%2225,*,*\%22>\n\n  <frame name=\%22toolbarFrame\%22 src=\%22about:blank\%22 noresize=\%22noresize\%22>\n\n  <frame name=\%22inputFrame\%22 src=\%22about:blank\%22>\n\n  <frame name=\%22outputFrame\%22 src=\%22about:blank\%22>\n\n</frameset>\n\n%22);document.close(); frames[0].document.write(%22<head><title>toolbarFrame</title>\n\n\n\n<style type=\%22text/css\%22>\nhtml,body { width: 100%25; height: 100%25; border: none; margin: 0px; padding: 0px; }\nbutton { height: 100%25; }\n</style>\n\n<script type=\%22text/javascript\%22>\n\nvar outputFrame = parent.outputFrame;\nvar inputFrame = parent.inputFrame;\nvar framesetElement = parent.document.documentElement.getElementsByTagName(\%22frameset\%22)[0];\n\nvar savedRows;\n\n\n// Need to use C-style comments in handleError() and print() \n// because IE retains them when decompiling a function.\n\n\n\nfunction print(s, c) {\n  var outputFrame = parent.outputFrame; /* duplicated here in case this function is elsewhere */\n  var doc = outputFrame.document;\n\n  var newdiv = doc.createElement(\%22div\%22);\n  newdiv.appendChild(doc.createTextNode(s));\n  if \n    newdiv.style.color = c;\n  doc.body.appendChild(newdiv);\n}\n\nfunction handleError(er, file, lineNumber) \n{\n  print(\%22Error on line \%22 + lineNumber + \%22: \%22 + er, \%22red\%22); \n    \n  /* Find the character offset for the line */\n  /* (code adapted from blogidate xml well-formedness bookmarklet) */\n  var ta = inputFrame.document.getElementById(\%22input\%22);\n  var lines = ta.value.split(\%22\\n\%22);\n  var cc = 0; \n  var i;\n  for(i=0; i < (lineNumber - 1); ++i) \n    cc += lines[i].length + 1;\n\n  /* Hacky(?) workaround for IE's habit of including \\r's in strings */\n  if (ta.value.split(\%22\\r\%22).length > 1)\n    cc -= lineNumber - 1;\n\n  /* Select the line */\n  if(document.selection) { \n    /* IE (Leonard Lin gave me this code) */\n    var sel = ta.createTextRange(); \n    sel.moveStart(\%22character\%22, cc); \n    sel.collapse(); \n    sel.moveEnd(\%22character\%22, lines[i].length); \n    sel.select();\n  } else { \n    /* Mozilla */\n    ta.selectionStart = cc; \n    ta.selectionEnd = cc + lines[i].length; \n  }\n \n  /* return true; */ /* nah, let the error go through to IE's js consolish thing! */\n}\n\n\n\n\n\nfunction showHideOutput()\n{\n  if (outputFrame.document.body.clientHeight > 100) {\n    // hide\n    savedRows = framesetElement.rows;    \n    framesetElement.rows = \%2225,*,0\%22;\n  }\n  else {\n    // show. use the previous size, if possible\n    if (savedRows) {\n      framesetElement.rows = savedRows;\n      savedRows = null;\n    }\n    else {\n      framesetElement.rows = \%2225,*,*\%22;\n    }\n  }\n}\n\nfunction refocus()\n{\n  inputFrame.document.getElementById(\%22input\%22).focus();\n}\n\n\nfunction clearOutput()\n{\n  var b = outputFrame.document.body;\n  while(b.firstChild)\n    b.removeChild(b.firstChild);\n}\n\nfunction stripLineBreaks(s)\n{\n  return s.replace(/\\n/g, \%22\%22).replace(/\\r/g, \%22\%22); // stripping \\r is for IE\n}\n\nfunction execute()\n{\n  var js = inputFrame.document.getElementById(\%22input\%22).value;\n\n  var useOpener = parent.opener && !parent.opener.closed;\n  var oldStyle = !! document.all; // lame but meh.\n  \n  print(\%22Running\%22 + (useOpener ? \%22 in bookmarklet mode\%22 : \%22\%22) + (oldStyle ? \%22 in make-IE-happy mode\%22 : \%22\%22) + \%22...\%22, \%22orange\%22);\n\n  if (useOpener)\n    executeWithJSURL(js, parent.opener); // only way to execute against another frame\n  else if (oldStyle)\n    executeWithDW(js, execFrame); // only way to get line numbers in IE\n  else\n    executeWithJSURL(js, execFrame); // faster in Mozilla  \n}\n\n// Advantages: can get line numbers in IE.\nfunction executeWithDW(js, win)\n{\n  win.document.open();\n  win.inputFrame = inputFrame;\n  win.outputFrame = outputFrame;\n  win.document.write(\n    stripLineBreaks(\n        '<!DOCTYPE HTML PUBLIC \%22-//W3C//DTD HTML 4.01//EN\%22 \%22http://www.w3.org/TR/html4/strict.dtd\%22>' +\n        '<html><head><title>execFrame<\\/title><script type=\%22text/javascript\%22>'\n      + print         // yay for decompilation!\n      + handleError \n      + \%22window.onerror = handleError;\%22\n      + \%22<\\/script><\\/head>\%22\n      ) \n    + '<body><script type=\%22text/javascript\%22>'\n    + js         // should escape it a little to remove the string <\\/script> at least...\n    + \%22<\\/script><\\/body><\\/html>\%22\n    );\n  win.document.close();\n}\n\n// Advantages: can be used to inject a script into another window, faster in Mozilla.\nfunction executeWithJSURL(js, win)\n{\n  // isolate scope\n  js = \%22(function(){ \%22 + js + \%22 \\n })()\%22;\n\n  win.print = print;\n  win.onerror = handleError;\n\n  // double encodeURIComponent because java script: URLs themselves are encoded!\n  win.location.href = 'java script:eval(decodeURIComponent(\%22' + encodeURIComponent(encodeURIComponent(js)) + '\%22)); void 0;';\n  \n  refocus();\n}\n\n// Other ideas I haven't tried lately: create a <script> element, eval.\n\n\nfunction makeUserScript(userScriptLink)\n{\n    userScriptLink.href = \n        \%22data:text/javascript;charset=utf-8,\%22 + \n        encodeURIComponent(inputFrame.document.getElementById(\%22input\%22).value + \%22//.user.js\%22);\n}\n\n</script></head><body>\n\n<button accesskey=\%22E\%22 onclick=\%22execute(); refocus();\%22><u>E</u>xecute</button>\n\n<button accesskey=\%22C\%22 onclick=\%22clearOutput(); refocus();\%22><u>C</u>lear output</button>\n<button accesskey=\%22S\%22 onclick=\%22showHideOutput(); refocus();\%22><u>S</u>how/hide output</button>\n\n\n<a href=\%22data:text/html,...\%22 onfocus=\%22makeUserScript(this);\%22 onmouseover=\%22makeUserScript(this);\%22 target=\%22_blank\%22>Install as user script</a>\n\n<div style=\%22visibility: hidden;\%22>\n<iframe name=\%22execFrame\%22 src=\%22about:blank\%22 height=\%225\%22 width=\%225\%22></iframe>\n</div>\n\n</body>%22); frames[0].document.close(); frames[1].document.write(%22<head><title>inputFrame</title>\n\n\n\n\n\n<style type=\%22text/css\%22>\n\nhtml,body,form,textarea { width: 100%25; height: 100%25; border: none; margin: 0px; padding: 0px; }\nhtml,body { overflow: hidden; }\n\n</style></head><body onload=\%22document.getElementById('input').select();\%22>\n<textarea style=\%22background-color: rgb(221, 238, 255);\%22 id=\%22input\%22>// ==UserScript==\n// @namespace     [url="http://www.squarefree.com/jsenv/autogenerated%5Cn//"]http://www.squarefree.com/jsenv/autogenerated\n//[/url] @name          Unnamed script\n// @description   Undescribed script\n// ==/UserScript==\n\nprint(\%22Squares of numbers 0 through 4:\%22);\nfor (var i = 0; i &lt; 5; ++i)\n  print(i * i);\n\nthis.statement.causes(an.error);\n</textarea>\n</body>%22); frames[1].document.close();   }void 0
  • This one is much like the one above, except it lets you change the CSS of a page in real time.
    java script:(function(){function init(){var newline=unescape(%22%%22+%220A%22);dead=false;oldCSS=null;x=opener;ta=document.f.ta;ta.select();ta.value=%22/* Type CSS rules here and they will be applied to%22+newline+%22whatever page is loaded in that tab, as long as the pages%22+newline+%22are from '%22+location.host+%22'%22+newline+%22and you keep this window open. */%22+newline+newline;update();}function update(){try{if(!x||x.closed){ta.style.backgroundColor=%22#ddd%22;return;}x.bookmarkletStyleSheet;}catch(er){ta.style.backgroundColor=%22#fdc%22;setTimeout(update,150);dead=true;return;}if(dead){dead=false;ta.style.backgroundColor=%22%22;oldCSS=null;}if(!x.testStyles){var newSS;newSS=x.document.createElement(%22link%22);newSS.rel=%22stylesheet%22;newSS.type=%22text/css%22;x.document.getElementsByTagName(%22head%22)[0].appendChild(newSS);x.testStyles=newSS;oldCSS=null;}if(oldCSS!=ta.value){oldCSS=ta.value;if(window.opera)x.testStyles.href=%22java script:unescape('%22+escape(ta.value)+%22')%22;else if(navigator.userAgent.indexOf(%22MSIE%22)!=-1)x.testStyles.href=%22java script:unescape('%22+escape(escape(ta.value))+%22')%22;else x.testStyles.href=%22data:text/css,%22+escape(ta.value);}setTimeout(update,150);}y=window.open('','','resizable,width=500,height=300');y.document.write('<title>New CSS Style Sheet</title><style>.ec { width: 100%; height: 100%; border: none; margin: 0px; padding: 0px; }</style><body class=%22ec%22><form name=%22f%22 style=%22margin: 0px;%22 class=%22ec%22><textarea name=%22ta%22 wrap=%22soft%22 style=%22margin: 0px; border: 0px; width:100%; height:100%;%22 class=%22ec%22></textarea><script>'+update+init+'init();<'+'/script>');y.document.close();})()
You can copy & paste these directly into your address bar, create a link on your own page with one of these as the href= part, or save them as bookmarks!

Okay, so the forum seems to not like my scriptlest very much. It's understandable, you don't want people running scripts in the forum! So, here's a simple page I threw together that has these displayed correctly plus has them preloaded into bookmarklets that you can drag to you bookmarks folder: http://www.boredomsoft.com/bookmarklets.html

Edited by Amazing Andrew, 30 October 2007 - 12:37 AM.

BC AdBot (Login to Remove)



0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users