Creating a Chrome Extension to Quickly Access your Github repos

Prerequisites

• Basic knowledge of JavaScript, HTML, and CSS.
• Node.js installed on your computer.
• Chrome browser installed.

Project Setup: Creating the Extension Files

Inside your project directory, create the following files:

• background.js: This script handles the extension's background functionality.
• content.js: This script is injected into GitHub pages to interact with the page's elements.
• manifest.json: The manifest file describes the extensions metadata and permissions.

Step 2: Implementing background.js

In background.js, add the following code:

chrome.commands.onCommand.addListener(function (command) {
  if (command === "searchRepos") {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.tabs.create(
        {
          url: "https://github.com/capitanbarbosa?tab=repositories&q=",
        },
        function (newTab) {
          // Listen for the tab to be fully loaded
          chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
            if (info.status === "complete" && tabId === newTab.id) {
              chrome.tabs.sendMessage(newTab.id, {
                message: "focus_element",
              });
              chrome.tabs.onUpdated.removeListener(listener); // remove the listener now that we've found our tab
            }
          });
        }
      );
    });
  }
});

Replace USERNAME with the GitHub username you want to search for.

Step 3: Implementing content.js

In content.js, add the following code:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === "focus_element") {
    document.querySelector("#your-repos-filter").focus();
  }
});

This script listens for a message from background.js and focuses on the GitHub repositories filter input field with the ID "your-repos-filter". Make sure this ID matches the actual input field ID on GitHub.

Step 4: Creating manifest.json

In manifest.json, define your extensions metadata, permissions, and scripts:

{
  "manifest_version": 2,
  "name": "GitHub Repo Search",
  "version": "1.0",
  "description": "Search your GitHub repositories directly from a shortcut inside browser.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "commands": {
    "searchRepos": {
      "suggested_key": {
        "default": "Ctrl+Shift+F"
      },
      "description": "Search GitHub Repositories"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png"
  },
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["content.js"]
    }
  ]
}

Step 5: Testing the Extension

Once we have all the files ready, open the Chrome browser, go to chrome://extensions/, and enable Developer mode. Then, click "Load unpacked" and select your project folder. Your extension should now be installed.

Conclusion

That is it! In this guide, we have outlined the steps to create a Chrome extension that allows users to quickly access their GitHub repositories using a keyboard shortcut. You have learned how to set up the project, create the necessary scripts, and define the extension metadata in the manifest.json file. Feel free to customize the extension further and add more features to enhance its functionality.