Back to overview

Developing a Chrome extension to convert the current url to localhost in 1 click

Chrome logo repeated in a grid
| 4 min read
View count:

Why?

Often when I’m working on a project, I get bug reports of issues happening on production/acceptance environments with a URL pointing to the matching environment. The problem is that I have to copy the URL, remove the domain and paste it in my local environment and port to reproduce the issue. This is a tedious process, so I decided to create a Chrome extension to automate this.

How?

I started out by creating a manifest.json file, which is required for every Chrome extension. This file contains the name, version, description, icons, permissions, etc. of the extension.

manifest.json
{
  "manifest_version": 3,
  "name": "Convert to localhost",
  "description": "Convert your current URL to localhost",
  "version": "0.0.1",
  "action": {
    "default_popup": "convert-to-localhost.html",
    "default_icon": "128x128.png"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  "permissions": ["tabs", "storage"],
  "icons": {
    "16": "16x16.png",
    "32": "32x32.png",
    "48": "48x48.png",
    "128": "128x128.png"
  }
}

The action property is used to define the popup that is shown when you click on the extension icon. The options_ui property is used to define the options page of the extension. The permissions property is used to define which permissions the extension needs. In this case, we need the tabs permission to get the current URL and the storage permission to store the user’s settings. The icons property is used to define the icons of the extension. In the action’s HTML I reference the JavaScript file which I use to execute the logic of the extension. The port and the flag if HTTPS should be used come from the options of the extension (more on that below). It also displays the sentence “Converted URL to localhost” to give some feedback to the user.

convert-to-localhost.html
<html>
  <body>
    <h1>Converted URL to localhost</h1>
    <script src="convert-to-localhost.js"></script>
  </body>
</html>

The JavaScript itself is also quite simple:

convert-to-localhost.js
(async () => {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  const url = new URL(tab.url);
  const port = (await chrome.storage.sync.get("port")).port;
  const secure = (await chrome.storage.sync.get("secure")).secure;
  chrome.tabs.update({
    url: `http${secure ? "s" : ""}://localhost:${port ?? "3000"}${
      url.pathname
    }`,
  });
})();

The options page is a simple HTML page with a form to set the port. The port is stored in the storage of the extension, so it’s persisted between sessions.

options.html
<html>
  <body>
    <form>
      <label for="port">Port:</label>
      <input type="number" id="port" name="port" />
      <br />
      <label for="secure">HTTPS:</label>
      <input type="checkbox" id="secure" name="secure" />
      <button id="save" type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

The JavaScript for the options page is only contains a few lines do to:

options.js
// Saves options to chrome.storage
const saveOptions = () => {
  const port = document.getElementById("port").value;
  const secure = document.getElementById("secure").checked;
  chrome.storage.sync.set({ port, secure });
  window.close();
};

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = async () => {
  const syncItems = await chrome.storage.sync.get(["port", "secure"]);
  console.log(syncItems);
  document.getElementById("port").value = syncItems.port ?? "3000";
  document.getElementById("secure").checked = syncItems.secure;
};

document.addEventListener("DOMContentLoaded", restoreOptions);
document.getElementById("save").addEventListener("click", saveOptions);

Once the code was ready, the time had come to start testing it in Chrome. To do this, you have to go to chrome://extensions/, enable developer mode and click on “Load unpacked”. Then you can select the folder containing the extension and it will be loaded in Chrome. Now you can test the extension by clicking on the icon and setting the port in the options page.

When you change the source code, you do have to reload the extension by clicking the refresh icon on the extension in chrome://extensions/. Publishing to the Chrome store wasn’t really something I wanted to do for this extension, so that’s not covered in this article. Hope this was useful to you!

Source code can be found on GitHub.

Did you like this post? Check out my latest blog posts:

Screenshot of an analytics dashboard
16 Jan 2024

Basic analytics with Vercel Postgres - Drizzle - Astro

10 min reading time

  • vercel
  • databases
  • typescript
  • astro
Page of a dictionary
15 Nov 2023

A minimal dependency-free translation system for Next.js

6 min reading time

  • nextjs
  • react
  • javascript
TailwindCSS logo
12 Jul 2023

Setting and using CSS variables in Tailwind with React

3 min reading time

  • css
  • tailwind
  • react