Brian Smith Brian Smith - 23 days ago 6
Javascript Question

Writing a chrome extension to change base url with saved presets

I work with SAAS offering (ServiceNow) with 5 different environments. I find myself frequently switching environments where the only difference is the base URL.

I've never done any plug-in work so I'm not sure if this is feasible but I'd like to set my a few base URL presets and be able to take the current URL and just swap the base with a click of a button.

Xan Xan
Answer

It's totally possible.

The pointer in general direction is the chrome.tabs API: you'll be able to manipulate a tab's URL with it.

UI-wise, you get a button on the toolbar called a Browser Action; you can simply do something when you click on it, or you can have a small UI page drop down from it. You may also be interested in chrome.commands API to add keyboard shortcuts.

Here's a mock for the simplest architecture possible: a background script that swaps between 2 base domains on click (note that it needs "activeTab" permission).

var BASE1 = "example.com";
var BASE2 = "example.org";

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function baseToRegExp(base) {
  return new RegExp("^(https?:\/\/[^\/]*)(" + escapeRegExp(base) + ")/");
}

var BASE1RegExp = baseToRegExp(BASE1);
var BASE2RegExp = baseToRegExp(BASE2);

chrome.browserAction.onClicked.addListener(function(tab) {
  if (tab.url.match(BASE1RegExp)) {
    chrome.tabs.update(tab.id, {
      url: tab.url.replace(BASE1RegExp, "$1"+BASE2+"/")
    });
  } else if (tab.url.match(BASE2RegExp)) {
    chrome.tabs.update(tab.id, {
      url: tab.url.replace(BASE2RegExp, "$1"+BASE1+"/")
    });        
  }
});

There are many beginner tutorials for Chrome Extensions; I would recommend starting at the Overview page.

Comments