Use Cases for Bookmarklets

Here are a few examples of tasks that bookmarklets can be used for:

• Sharing a webpage on social media or via email
• Translating a webpage into a different language
• Adding a webpage to a service like Pocket or Evernote
• Changing the font size or layout of a webpage
• Displaying the page’s HTML source code
• Checking the spelling of text on a webpage
• Displaying the web page’s title and URL
• Searching for selected text on a webpage
• Refreshing a webpage
• Enabling or disabling JavaScript on a webpage

There are many other tasks that bookmarklets can be used for, depending on the specific code that is written into the bookmarklet. You can find bookmarklets for a wide range of tasks by searching online, or you can even create your own bookmarklets using JavaScript.

Prerequisites for creating Bookmarklets

To create your own bookmarklets, you will need the following:

1. A web browser that supports bookmarklets: Most modern web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge, support bookmarklets.
2. Some basic knowledge of HTML, CSS, and JavaScript: Bookmarklets are written in JavaScript, and often use HTML and CSS to modify the webpage. You will need to have a basic understanding of these technologies in order to create bookmarklets.
3. A text editor: You will need a text editor to write the JavaScript code for your bookmarklets. You can use a simple text editor like Notepad on Windows, or TextEdit on macOS.
4. A basic understanding of how to create and manage bookmarks in your web browser: You will need to know how to create a new bookmark and edit its properties in your web browser in order to create a bookmarklet.

With these prerequisites, you should be able to create simple bookmarklets to perform tasks on webpages. If you want to create more advanced bookmarklets, you may need to learn additional technologies and techniques, such as advanced JavaScript concepts and APIs.

How to Create Bookmarklets.

To create a bookmarklet, you need to create a new bookmark in your web browser, and then paste the JavaScript code that you want to use into the “URL” field of the bookmark. When you click on the bookmarklet, it will run the JavaScript code that you specified.

What Is the Difference Between Bookmarklets and Extensions?

Bookmarklets and extensions are both types of browser add-ons that can be used to enhance your browsing experience. However, they work in slightly different ways and have some key differences.

Bookmarklets are small JavaScript programs that can be saved as bookmarks in your browser. To use a bookmarklet, you simply click on the bookmark in your browser’s bookmarks bar. The bookmarklet will then run, performing some action or providing some functionality. For example, you might use a bookmarklet to translate a web page, or to perform a search on a specific website.

Extensions are more powerful than bookmarklets, as they can access and modify various parts of the browser and the web pages you visit. They are usually installed from an app store or marketplace, and can be easily enabled or disabled in the browser’s settings. Extensions can do a wide range of things, from blocking ads and pop-ups to adding new features to web pages.

In summary, bookmarklets are simple, easy-to-use tools that can be added as bookmarks in your browser, while extensions are more powerful add-ons that can be installed and managed through the browser’s settings.

Example : Bookmarklet for sharing a webpage via email

To create a bookmarklet for sharing a webpage via email, you can use the following JavaScript code:

javascript:(function(){window.location='mailto:?subject='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(location.href);})();

To use this bookmarklet, follow these steps:

1. Copy the JavaScript code above.
2. In your web browser, create a new bookmark.
3. Give the bookmark a name like “Share via Email”
4. In the “URL” field of the bookmark, paste the JavaScript code that you copied.
5. Save the bookmark.

Now, when you want to share the current webpage via email, you can just click on the bookmark that you created. This will open a new email message with the webpage’s title as the subject and the webpage’s URL as the body of the message. You can then add the recipient’s email address and send the message as you normally would.

Keep in mind that this bookmarklet will only work in web browsers that support JavaScript.

Generate TOS, Table of Content with Bookmarklet

Here is some JavaScript code that you can use to create a bookmarklet that generates a table of contents (TOC) for a webpage and displays it in an overlay with toggle buttons:

javascript:(function(){
  var toc = "";
  var level = 0;
  var index = 0;
  var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
  for (var i = 0; i < headers.length; i++) {
    var header = headers[i];
    var tag = header.tagName.toLowerCase();
    var newLevel = parseInt(tag.substring(1));
    if (newLevel > level) {
      for (var j = newLevel; j > level; j--) {
        toc += "<ul>\n";
      }
    } else if (newLevel < level) {
      for (var j = newLevel; j < level; j++) {
        toc += "</ul>\n";
      }
    }
    level = newLevel;
    index++;
    var linkId = "link" + index;
    header.setAttribute("id", linkId);
    toc += "<li><a href='#" + linkId + "'>" + header.textContent + "</a></li>\n";
  }
  for (var i = level; i > 0; i--) {
    toc += "</ul>\n";
  }
  
  var tocContainer = document.createElement("div");
  tocContainer.setAttribute("id", "tocContainer");
  tocContainer.innerHTML = toc;
  
  var toggleButton = document.createElement("button");
  toggleButton.setAttribute("id", "toggleButton");
  toggleButton.textContent = "TOC";
  toggleButton.addEventListener("click", function() {
    var tocContainer = document.getElementById("tocContainer");
    if (tocContainer.style.display === "block") {
      tocContainer.style.display = "none";
    } else {
      tocContainer.style.display = "block";
    }
  });
  
  document.body.insertBefore(toggleButton, document.body.firstChild);
  document.body.insertBefore(tocContainer, document.body.firstChild);
  
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = "#tocContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; overflow-y: auto; display: none; } #tocContainer ul { list-style: none; } #tocContainer li { margin: 0; padding: 0; } #tocContainer a { display: block; color: white; padding: 8px; text-decoration: none; } #toggleButton { position: fixed; top: 10px; right: 10px; z-index: 10000; background-color: rgba(0, 0, 0, 0.8); color: white; border: none; padding: 8px; }";
document.body.appendChild(css);
})();
 

To use this bookmarklet, follow these steps:

1. Copy the JavaScript code above.
2. In your web browser, create a new bookmark.
3. Give the bookmark a name like “Generate TOC”
4. In the “URL” field of the bookmark, paste the JavaScript code that you copied.
5. Save the bookmark.

Now, when you want to generate a TOC for a webpage, you can just click on the bookmark that you created. This will insert a toggle button at the top right corner of the webpage, and a TOC in an overlay. When you click the toggle button, the TOC will be displayed or hidden. The TOC will be structured hierarchically, with subheadings nested under their parent headings, and will have links to each of the page’s headings (h1, h2, h3, etc.).

Keep in mind that this bookmarklet will only work in web browsers that support JavaScript.

Bookmarklet to check Spellings

Here is some JavaScript code that you can use to create a bookmarklet that checks the spelling of all the text on a webpage:

javascript:(function(){
  var text = document.body.textContent;
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var misspellings = JSON.parse(xhr.responseText);
    for (var i = 0; i < misspellings.length; i++) {
      var misspelling = misspellings[i];
      text = text.replace(misspelling.word, "<mark>" + misspelling.word + "</mark>");
    }
    document.body.innerHTML = text;
  };
  xhr.open("POST", "https://api.example.com/spellcheck");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify({text: text}));
})();