JavaScript

BOOKMARKLET EXAMPLES

(one-line Javascript utilities
that you can add to your
web-browser's Bookmarks)

Home page > RefInfo menu >

Computer topics menu (WebDev section) >

This JavaScript BOOKMARKLET EXAMPLES page

! Note !
More 'bookmarklet' code samples may be added
to this page --- if/when I revisit or use this page.

Furthermore:
More notes may be added to draw attention to noteworthy
features of these bookmarklet examples.

< Go to Table of Contents (Code Samples), below. >
(Skip the following Introduction.)

INTRODUCTION :

Many web pages nowadays (circa 2010-2020) contain a lot of useless decorative images that just make the text on the page a pain to read --- not to mention the excessive (needless) amount of processing required to render those useless images in the web page.

In the 'old days' (circa 1995-2005), web browsers included an option to 'turn off images'. That was in the days of low-speed internet connections --- on the order of kilobits-per-second instead of megagits-per-second.

Unfortunately, it seems all web browsers removed the 'no graphics' option around the 2005 time frame.

I wanted that option back. I thought one might be able to make a web-browser 'plug-in' ('browser extension') to over-ride the display of images in a web page. But when I looked into the programming required to make a 'plug-in', I was put-off by all the components required ( interface definition files and compiled code and maybe more).

That seemed to require a way-too-complicated effort to simply turn off images (or, at least, many of the images) in a web page.

Bookmarklets rather than plug-ins :

In searching for plug-in information, I ran across the concept of a bookmarklet --- a single-line of JavaScript code --- that can reference DOM (Document Object Model) objects within a web page.

It seemed that I should be able to find (or write) a simple Javascript function to find all the <img> tags in a currently viewed web page and apply a little CSS (Cascading Style Sheets) code to the tags so that the images do not display.

AND ... there were other types of things I had wanted to do in the past (with a 'plug-in') that I now realized I might be able to do with these 'bookmarklet' thingies --- such as:

  • extract all the image filenames out of the current web page, and display the names in a list.

  • make a new web page out of the current web page --- a web page that displays only the images in the page, without the text and other components of the web page.

  • extract all the names in the 'href' hyperlinks of the current web page, and display the names in a list.

  • make a new web page out of the current web page --- a web page that displays only the hyperlinks of the page, without most of the text and other components (such as images) of the web page.

  • and perhaps other kinds of extractions and re-formatting --- involving other HTML tags --- such as <object> tags and <video> tags and <audio> tags --- and even <div> tags and <table> tags and <p> (paragraph) tags.

So I started doing WEB SEARCHES on keywords such as:

In doing these searches, I repeatedly found that the most specific help on crafting bookmarklets was often to be found at the 'stackoverflow.com' site, at pages such as:

It turns out that to extract information from DOM objects, it is frequently helpful to use the DOM function (method) 'document.getElementsByTagName'.

To hide objects in a page, one technique is to re-set a visibility 'style' of the object. For example: Use the statement

var imgs=document.getElementsByTagName("img")

to get and put the image 'elements' into an array called 'imgs' --- and then use a for-loop with the statement

imgs[i].style.visibility="hidden"

to hide the images.

    (Although this does not avoid the processing in downloading the images when the web page is first loaded into the web browser, at least the readability of the page can be improved --- and the frustration generated by large, typically-useless images can be eliminated.)

To do 'extract-and-display' of some objects in a current web page, we can use the 'window.open' method to create a new window (or tab) and then use the 'document.write' method to write extracted information to the new window. (The extracted information could be collected by the 'document.getElementsByTagName' method.)

Some web sites on bookmarklets :

I tried to find some web sites that might have an 'archive' of bookmarklets of the kind I was looking for --- some 'hide' or 'extract-and-display' bookmarklets.

So I started doing WEB SEARCHES on keywords such as:

But the few sites that I found were mostly ones that contained bookmarklets to

  • help validate web page code (for web developers), or

  • look up information for some high-lighted text on a web page --- such as information at Wikipedia or at a dictionary or thesaurus site.

Furthermore, it seems that bookmarklet-collection sites are 'drying up' because there are some security concerns about certain kinds of bookmarklets.

    One security concern that I have is: Many of the web pages that provide samples of bookmarklets tell you to drag (or paste) the link to a bookmarklet into a bookmarks 'container' of your web browser --- code unseen.

    I would like to check the code out first --- to make sure that they are not including popup ads and even more nefarious stuff in the bookmarklet code.

    The bookmarklets that I provide below are provided in a way that you can examine the code before you implement it as a bookmarklet in your web browser.

Here are a few web sites that provide some free bookmarklet examples without requiring you to 'jump through hoops', such as registration of your email address and surrendering the family jewels.

These are not likely to satisfy 'the casual web browser user', so here are some WEB SEARCHES to experiment with --- to find some useful examples. (These examples of searches leave out the word 'bookmarklet' because if you find some useful Javascript code that is not in bookmarklet form, you can turn it into a bookmarklet by wrapping it in some 'function' code, prefixing it with 'javascript:', and putting all the code on one line.)

You can remove some keywords and add other keywords, such as 'picture' or 'href' or 'link' or 'anchor' or 'src' or 'source' or 'data' or 'code' or 'script' or 'style' or 'font' or 'width' or 'color' or 'margin' or 'padding' or 'bold' or 'div' or 'span' or 'table' or 'paragraph' or 'text' or 'list' or 'ordered' or 'unordered' or 'object' or 'embed' or 'audio' or 'video' or 'body' or 'meta' or 'head' or 'title' or 'map' or 'canvas'.

In the process of trying to find useful 'bookmarklet collections', I found several sites that provide some bookmarklet introductions or tutorials --- without requiring you to 'jump through hoops', such as registration of your email address and surrendering the family jewels. Here are a few.

If some of these introduction/tutorial sites go dead, you could try doing WEB SEARCHES like the following :

Intent and Use of This Page

The 'list-of-bookmarklets' section below provides a means to SEE and DOWNLOAD (or bookmark) code samples that I think will be of use to me in my web browsing activities --- for example, from my netbook computer when I am on the road --- or from someone else's desktop or laptop computer, at home or abroad.

    Over time, I will probably alter some of these bookmarklets to use different naming conventions (for the bookmarklets or for variables within the bookmarklets) --- and to make more practical (useful) examples.

This page is mainly intended to help me retrieve a useful bookmarklet when I am frustrated by horribly-written web pages --- or when I need bookmarklet code examples from which to craft some more useful bookmarklets.

    Note that my emphasis is typically on client-side scripting, rather than scripting to handle 'forms' input-to (or output-from) a remote web server.

I make this web page available to others who may find it difficult, like I did, to find 'useful-to-me' bookmarklet coding examples.

How to Use This Page

Click on a 'bookmarklet' '.txt' file link below, to display the single-line of text --- the Javascript-and-DOM(-and-CSS-style) code of a bookmarklet.

    When you click on a 'bookmarklet' link, a new window (or tab) should open in your browser, to show the code.

    You can close new 'bookmarklet' windows/tabs, leaving this page open in a window for further code examination and downloading.

If you want to save the code to a file on your computer, you can RIGHT-click (or hold your finger down) on a 'bookmarklet' link and use a popup menu option such as 'Save Link Target As ...' to save a copy of the file.

You could edit the one-line in the saved file to add line feeds (usually after semi-colons) --- to see the Javascript code in a more readable form.

If you need some information on how to implement 'bookmarklets', see the 'WEB SEARCH' links and introduction/tutorial links above.

    (Someday I may add some detailed implementation information here --- for the web browsers and devices that I use.)

And if you need some information on Javascript, a Javascript Examples page on this site may be a helpful starting point.

TABLE OF CONTENTS:

(links to SEE-or-SAVE
one-line 'bookmarklet' files)

NOTE:
When you click on the link to a '.txt' file below,
rather than showing the code on one line,
some web browsers may 'wrap' (break) the
lines of these code samples.

But, if you save these '.txt' files to a file on your
computing device, the code should be on one line.

As an alternative to the '.txt' file link, the line
of code is shown in a scrollable line below each file link.

You can 'right-click-and-save' the text file, OR
you can copy-and-paste from the scrollable line.
(But note that the less-than signs in the scrollable line
may be represented by '&lt;'. Change that back to '<'.)

  • imgs_make_visibility_hidden.txt
    (Scans the current web page and, for the images that are indicated by an <img> tag, sets the 'style' of the image to 'visibility:hidden'. You can reload the page to see the images again.) 


javascript:(function(){var%20imgs=document.getElementsByTagName("img");for(var%20i=0;i<imgs.length;i++)imgs[i].style.visibility="hidden"}());

  • imgs_get_put-reduced-with-origLink_inNewWin.txt
    (Scans the current web page and, for the images that are indicated by an <img> tag, puts links to the image files in a new window --- with each original-sized-image-link indicated by a 100-pixels-wide rendering of the image.) 


javascript:(function(){var%20imgs%20=%20document.getElementsByTagName('img');t=[];for%20(var%20i=0,%20n=imgs.length;i<n;i++)t.push('<a%20href="'+imgs[i].src+'"><img%20src="'+imgs[i].src+'"%20width="100">&ot;/a>');if%20(t.length)%20{var%20w=window.open('','_blank');if%20(w)%20{w.document.write(t.join(' '));w.document.close();}else%20alert('cannot%20pop%20a%20window');}})();

  • img-names_get_put_inNewWin.txt
    (Scans the current web page and, for the images that are indicated by an <img> tag, puts the 'fully-qualified' URL names of the image files in a list in a new window.) 


javascript:(function(){var%20imgs%20=%20document.getElementsByTagName('img');t=[];for(var%20i=0;%20i%20<%20imgs.length;%20i++)%20t.push(imgs[i].src);if%20(t.length)%20{%20var%20w=window.open('','_blank');if%20(w)%20{w.document.write(t.join('<br>'));w.document.close();}%20else%20alert('cannot%20pop%20a%20window');}})();

  • tables_getContents_put_inNewWin.txt
    (Scans the current web page and puts the contents of tables, indicated by the <table> tag, in a new window. The contents can include images as well as text.) 


javascript:(function(){var%20tabls%20=%20document.getElementsByTagName('table');t=[];%20for%20(var%20i=0;%20i<tabls.length;%20i++)%20t.push(tabls[i].innerHTML);%20if%20(t.length)%20{%20var%20w=window.open('','_blank');%20if%20(w)%20{w.document.write(t.join(''));w.document.close();}%20else%20alert('cannot%20pop%20a%20window');}%20})();

  • paragraphs_getContents_put_inNewWin.txt
    (Scans the current web page and puts the contents of paragraphs, indicated by the <p> tag, in a new window. May give similar results to the 'table' utility above.) 


javascript:(function(){var%20paras%20=%20document.getElementsByTagName('p');t=[];%20for%20(var%20i=0;%20i<paras.length;%20i++)%20t.push(paras[i].innerHTML);%20if%20(t.length)%20{%20var%20w=window.open('','_blank');%20if%20(w)%20{w.document.write(t.join('<br><br>'));w.document.close();}%20else%20alert('cannot%20pop%20a%20window');}%20})();




javascript:(function(){var%20links%20=%20document.getElementsByTagName('a');t=[];%20for%20(var%20i=0;%20i<links.length;%20i++)%20t.push(links[i]);%20if%20(t.length)%20{%20var%20w=window.open('','_blank');%20if%20(w)%20{w.document.write(t.join('<br>'));w.document.close();}%20else%20alert('cannot%20pop%20a%20window');}%20})();

NOTE:
You will see spaces in these bookmarklet files rendered as the string '%20'. If you paste a single line of code, with spaces, into a 'New Bookmark ...' option of the 'Bookmarks Manager' of a web browser, that NewBookmark option may convert each space to '%20'. That is what happened to these code lines.

End of this List of Bookmarklets.

Bottom of this
BOOKMARKLET EXAMPLES page.

To return to a previously visited web page location, use the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Table of Contents, above. >

< Go to Top of Page, above. >

Page was started 2018 Nov 03.