Installing Bookmarklets on your iPhone or iPad

Here’s a list of some of the most essential JavaScript bookmarklets for your iPhone, iPad and iPod Touch.

You can either install these bookmarklets on your Safari Desktop browser and sync with your iOS device or, as explained in the video below, the bookmarklets can directly be installed on to the mobile Safari browser.

ADD TO EVERNOTE

Use the EverNote bookmarklet to clip web pages in your Safari Browser.

javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

ADD TO PINTEREST

Pinterest is the hottest social sharing site around and the Pinterest bookmarklet will help you grab an image from the current website and add it to one of your pinboards on Pinterest.

TRANSLATE TO ENGLISH

Translate the current web page in Safari to English with a click.

javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/?text='+t+'&hl=en&langpair=auto|en&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=en&langpair=auto|en&tbb=1&ie='+e;};

SEND TO KINDLE

Send the current web page to your Kindle reader and read later.

javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/send-to-kindle.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)

SHARE ON FACEBOOK

This bookmarklet lets you share the current web page or video with your Facebook friends.

javascript:var%20d=document,f='https://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1330673033&u='+e(l.href)+'&t='+e(d.title);1;try{if%20(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)%20{a=function()%20{if%20(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

SHARE ON TUMBLR

Post images, videos or anything else from the current page to your Tumblr stream with the Tumblr bookmarklet.

javascript:var%20d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://www.tumblr.com/share',l=d.location,e=encodeURIComponent,p='?v=3&u='+e(l.href)%20+'&t='+e(d.title)%20+'&s='+e(s),u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a%20=function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)

SAVE AS PDF

Save and download the web page as a PDF file that you can later transfer to iBooks or Dropbox.

javascript:void(window.open('http://www.pdfdownload.org/web2pdf/Default.aspx?left=0&right=0&top=0&bottom=0&page=0&cURL='+document.location.href));

Read more »

A Simple Trick to Highlight the External Links on a Web Page

Some popular websites – including Mashable, The Huffington Post and TechCrunch – include too many internal links in their stories (hyperlinks pointing back to their own website)  and it often becomes difficult to determine the links that are pointing to external websites.

You have to hover your mouse over a link and look at the status bar of your browser to know where that link is pointing to. That’s lot of work.

HIGHLIGHT EXTERNAL LINKS USING FAVICON IMAGES

Before: This is the original page on TechCrunch

After: The same page but the external hyperlinks are now highlighted

If you wish to quickly highlight all the external hyperlinks on a page, just drag the following bookmarklet link to your browser’s bookmarks toolbar.

Highlight Links

Now when you are on a web page that looks cluttered with links, just click this bookmarklet button and it will add favicons next to all external hyperlinks on that page while the styling of internal links is left untouched.

The bookmarklet will also add underlines to external links  making it easier for you to distinguish between external and internal links. And in case you wish to revert to the original style of hyerlinks, just hit the refresh button (Ctrl + R) in your browser.

her's the bookmarklet source code (de-obfuscated) in case you wish to modify the link styling. The favicons for corresponding websites are automatically generated using this simple Google hack.

// Highlight External Links by Way2Trick
// Published on 06/17/2017

// Find the domain name of the current page
var host = window.location.host;

// Use Google's Favicon Generator
var goog = "http://www.google.com/s2/favicons?domain=";

// Find all hyperlinks on a web page
var links = document.getElementsByTagName("a");

for (i=0; i<links.length; i++) {

  var link = links[i];

  // Skip all internal links where the href is the same as the domain host
  // Also skip non HTTP links like FTP, MAILTO, etc.

  if(link.href.match("^https?://") && !link.href.match(host)) {

    var domain = link.href.split("/");

    // Apply some CSS styles to the external hyperlinks
    link.style.background = "url(" + goog + domain[2] + ") center left no-repeat";

    link.style.fontWeight = "bold";

    link.style.fontSize = "105%";

    link.style.padding="5px 5px 5px 20px";    

    link.style.textDecoration="underline";

  }   
}

Read more »

Easily Unsubscribe from all LinkedIn Emails

LinkedIn is trying to reinvent itself as a social network for professionals and they are now sending way too many email notifications that one never really asked for. Whether it’s your colleague’s birthday, someone just completed two years at their current job or someone you know just joined LinkedIn – there’s a notification for everything.

The worst part is that LinkedIn offers no one-click button for quickly and easily unsubscribing from all these email notification in one go. You have to select at least 20 drop-down boxes to unsubscribe yourself from every single email that LinkedIn can send to your mailbox.

LinkedIn Unsubscribe

Drag the bookmarklet to your browser’s address bar, then go to the LinkedIn’s email settings page and click the bookmarklet link in the address. It will change the email frequency setting for every notification as “no email” thus saving your mailbox from the LinkedIn clutter.

Internally, the LinkedIn bookmarklet executes a series of JavaScript commands to automatically select the “No Email” option in drop-down boxes and then hits the Submit button to save your changes. Here are some more useful bookmarklets.

$('.settings li select:has(option[value=never])').val('never');
$('.settings li select:has(option[value=WEB])').val('WEB');
$('.settings li select:has(option[value=NEVER])').val('NEVER');
$('.settings li select:has(option[value=NONE])').val('NONE');
$('.settings li select:has(option[value=false])').val('false');
$('input[type=submit]').prop('disabled', false).click();

Read more »

Open Web Pages in Google Chrome for iOS [Bookmarklet]

Google Chrome browser is available for your iPhone and iPad but unfortunately, you do not have the option to set Chrome as your default web browser on the iOS device. Thus, if you have happen to click a link in the Mail app, the corresponding web page will always open in the mobile Safari browser and you cannot override this default setting.

If you would however like to send the current web page that is open inside Safari to the Chrome Browser, there is an easy way.

Tap the address bar in Safari browser, navigate to the beginning of the URL and replace the location protocol http with googlechrome. Then tap “Go” and the web page will automatically open inside the Google Chrome app.

Chrome for iOS supports googlechrome (for http) and googlechromes (for https) URI schemes that app developers may use to determine whether Chrome is available on the iOS device or not.

OPEN IN CHROME – THE BOOKMARKLET

There’s an easier workaround as well. You can install the “Open in Chrome” bookmarklet in mobile Safari and you will then be able to send any web page from the Safari browser to the Chrome app with a single tap. Here’s how:

Step 1. Open this page on your iPhone /iPad and add it to your Safari bookmarks.

Step 2: Select and copy the following JavaScript code to your iOS clipboard.

javascript:(function(){if(document.location.href.indexOf('http')===0)document.location.href=document.location.href.replace(/^http/,'googlechrome');})();

Step 3. Open the bookmarks menu in Safari and tap the “Edit” button. Next tap the Web Page that you have added in step 1.

Step 4. Tap the URL field on the Edit Bookmarks screen, erase everything and paste the JavaScript code from the clipboard.

That’s it. Now you can easily switch from Safari to Chrome with a single tap.

Read more »

Add Collaboration Features to your Website with a Line of Code

Tools like Google Docs include real-time collaboration features that let multiple people work on the same document or spreadsheet at the same time. Then you have screen sharing tools, join.me or Chrome Remote Desktop for example, where there’s a master presenter and remote viewers can follow along.

TogetherJS is a Mozilla project that brings similar collaboration features to your own website but without any coding. Once enabled, visitors to your website will be able to interact with each other on your site in real time.

They’ll able to see each other’s cursor (like in Google Docs), the clicks are highlighted and the screen content stays synchronized. Visitors will also have the ability to text chat and audio chat (using WebRTC) with each other while staying on your website. All this and more with a line of code.

ADD TOGETHERJS TO YOUR OWN WEBSITE

To get started, all you have to do is insert a little JavaScript snippet anywhere on your web page(s). There are several configuration parameters available for the widget but we will use the default settings to keep things simple.

<script>
  TogetherJSConfig_autoStart  = true;
</script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>

This will add a little floating widget to your website that will be visible to all visitors. They can click the “+” button in the widget to generate a unique TogetherJS URL. Anyone who clicks this URL will be able to interact with each other on your page in real time. It can’t get any simpler.

ADD TOGETHERJS TO ANY WEBSITE

There’s more. You can add TogetherJS features to any web page on the Internet with the help of a bookmarklet.

TogetherJS

This bookmarklet will load the TogetherJS library on the current web page and you can give the chat session a unique name. Another person can launch the bookmarklet on the same page on their own computer, enter the same session name and you’ll be instantly connected.

You can co-browse, watch each other’s activity or chat atop the page.

Read more »

Download your WhatsApp Contacts

The WhatsApp app on your mobile phone does not offer an option to download the profile images nor is there an option to export your WhatsApp Contacts for uploading into other address books like Google Contacts or LinkedIn. However, the contacts data can be easily extracted, or rather scraped, from the WhatsApp website in less than a minute with the help of a bookmarklet.

WhatsApp Contacts

To get started, drag the WhatsApp bookmarklet to the toolbar of your Google Chrome. Next open  web.whatsapp.com on your computer, wait for the website to load and then click the bookmarklet in the toolbar. You can either choose to have a CSV list of your WhatsApp contacts or create a print-ready addressbook of your WhatsApp network. This will have the high-res profiles pictures, the names and the telephone numbers of all your contacts.

The WhatsApp image URLs are session-based and thus cannot be shared. You can however press Ctrl+S or Cmd+S on Mac to download the entire web page created by the bookmarklet and it will permanently download the profile pictures to your computer as well.

Read more »