Team Hexmos

I created a Random Bookmark Opener Chrome Extension

Sreedeep cv's photo
Sreedeep cv
·

2 min read

In the previous article, I spent some time learning how extensions work. I find this quite fascinating and useful for creating productivity tools. Let's start by creating a random bookmark opener. What this does is it just opens a random bookmark.

Since I spend a lot of time on the browser, it would be a great investment to create tools that will help me make good use of my time. I will be building more cool features on top of this in the coming articles. The extensions work mainly using the JS engine. There are many extensions which I like and use daily, such as:

  • Wappalyzer

  • React Developer Tools

  • Extract Links on This Page

  • YouTube Playback Controller

  • Adblock

These extensions are the best here. There are many other productivity extensions, but I eventually fail to use them or forget about them. It's time to make our own tools. Here is the code for the Bookmark Opener.

manifest.json

{
    "name": "Random Bookmark Opener",
    "description": "Click to open a random bookmarked link.",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": [
      "bookmarks",
      "tabs"
    ],
    "action": {
      "default_popup": "index.html"
    }
  }

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Random Bookmark Opener</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 10px;
      }
      button {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="open-random-bookmark">Open Random Bookmark</button>
    <script src="index.js"></script>
  </body>
</html>

index.js

document.getElementById("open-random-bookmark").addEventListener("click", () => {
    chrome.bookmarks.getTree((bookmarkTreeNodes) => {
      const allBookmarks = [];

      function processNode(node) {
        if (node.url) {
          allBookmarks.push({ title: node.title, url: node.url });
        }
        if (node.children) {
          node.children.forEach(child => processNode(child));
        }
      }

      bookmarkTreeNodes.forEach(node => processNode(node));

      if (allBookmarks.length === 0) {
        alert("No bookmarks found.");
        return;
      }

      // Pick a random bookmark
      const randomIndex = Math.floor(Math.random() * allBookmarks.length);
      const randomBookmark = allBookmarks[randomIndex];

      chrome.tabs.create({ url: randomBookmark.url });
    });
  });

I hope you enjoy this article. I am working on LiveAPI, a super convenient API documentation generator. If you need powerful API documentation built straight from your code, try LiveAPI.

Here is the link to my previous article, which explains the steps for uploading to Chrome.

How to Create a Timer Chrome Extension

extensions