I work a lot on internet and some of the main platforms on which I use are YouTube , Netlify , GitHub , and many more!!!!!! So whenever I want to open these tabs I need to open new tab and then search for these on google and then open, it is so annoying 😶. So I thought of making some shortcuts kind of chrome extension for opening these tabs. When I hit Ctrl+y on my keyboard it opens YouTube for me, same way alt+g for GitHub.

Excited for this???

let's do it!!

Requirement :

Code Editor ( I use VS-Code )
Knowledge of JavaScript

Step 1. On a computer, create a folder for the extension files, naming it the same as the extension name and this folder in code editor..

Step 2. Create the manifest.json file. The manifest tells Chrome about your app, what it is, how to launch it and the extra permissions that it requires.

Step 3. Now create background.js file. The background script is used to create the event page responsible for managing the app life cycle.

All code must be included in the Chrome App package. This includes HTML, JS, CSS and Native Client modules.

Now Open your manifest.json file

{
  "manifest_version":2,
  "name" : "Open Anything",
  "version" : "1.0.0"
}

manifest_version tells about which version we are going to use, name tell the name of our extension

Now we need to initialize some commands which will open tabs

{
  "manifest_version":2,
  "name" : "Go Anywhere",
  "version" : "1.0.0",
  "commands":{
    "open-youtube":{
      "suggested_key":{
        "default": "Ctrl+Y"
      },
      "description":"Open youTube"
    },
    "open-github":{
      "suggested_key":{
        "default": "Alt+G"
      },
      "description":"Open github"
    }
  }
}

Here, we created an object called commands which contains the suggested_key we are going to use and a description like what it has to do.

Now we also want some scripts which will work in background and it is important to mention them here and also the permissions for opening new tabs.

{
  "manifest_version":2,
  "name" : "Open Anything",
  "version" : "1.0.0",
  "commands":{
    "open-youtube":{
      "suggested_key":{
        "default": "Ctrl+Y"
      },
      "description":"Open youTube"
    },
    "open-github":{
      "suggested_key":{
        "default": "Alt+G"
      },
      "description":"Open github"
    }
  },
  "background":{
    "scripts": ["background.js"],
    "persistent" : false
  },
  "permissions": [
    "tabs","activeTab"
  ]

}

So till now, we defined the commands, we set the scripts and gave the permissions. Now let's start working on the script or making it functional.

Open background.js file

Adding a listener on commands we initialized in manifest.json and using a switch loop we are checking the case that what command user gave

chrome.commands.onCommand.addListener((command) => {
  switch (command) {
    case "open-youtube":
      openYouTube();
      break;
    case "open-github":
      openGithub();
      break;
    default: alert(`invalid ${command} command`)
  }
})

If a command is for open-youtube then we are calling a openYouTube() function which we are going to make in next step and similarly if the command is for open-github then then we are calling a openGithub() function.

Making Functions

function openYouTube() {
  const query = { active: true, currentWindow: true }
  chrome.tabs.query(query, (tabs) => {
    chrome.tabs.create({ url: "https://www.youtube.com/", active: true })
  })
}

function openGithub() {
  const query = { active: true, currentWindow: true }
  chrome.tabs.query(query, (tabs) => {
    chrome.tabs.create({ url: "https://github.com/piyush0001-wq", active: true })
  })
}

let's understand what happened here,

We made a function and inside it a constant variable which contain some info like active and currentWindow. What is active?? Suppose we are on a github page and hit the command to open YouTube, new YouTube tab will open and now it will become the active tab. Before this the active tab was github .

On the next line, we fired a function which contains the url of the opening tab.

Now we are done with our extension.

Open your extension pack in chrome, click on load Unpacked and open the project folder. And now you can check the extension by just hitting the command we gave.

Here is the complete code:

manifest.json

{
  "manifest_version":2,
  "name" : "Open Anything",
  "version" : "1.0.0",
  "commands":{
    "open-youtube":{
      "suggested_key":{
        "default": "Ctrl+Y"
      },
      "description":"Open youTube"
    },
    "open-github":{
      "suggested_key":{
        "default": "Alt+G"
      },
      "description":"Open github"
    }
  },
  "background":{
    "scripts": ["background.js"],
    "persistent" : false
  },
  "permissions": [
    "tabs","activeTab"
  ]

}

background.js

chrome.commands.onCommand.addListener((command) => {
  switch (command) {
    case "open-youtube":
      openYouTube();
      break;
    case "open-github":
      openGithub();
      break;
    default: alert(`invalid ${command} command`)
  }
})

function openYouTube() {
  const query = { active: true, currentWindow: true }
  chrome.tabs.query(query, (tabs) => {
    chrome.tabs.create({ url: "https://www.youtube.com/", active: true })
  })
}

function openGithub() {
  const query = { active: true, currentWindow: true }
  chrome.tabs.query(query, (tabs) => {
    chrome.tabs.create({ url: "https://github.com/piyush0001-wq", active: true })
  })
}

Thank You.

Chrome Extension