Drpl.it URL Shortener

Note: This is a restored article from the original A thousand nodes blog (circa 2011).

Drpl.it is a Drupal-based URL shortener created by Arshad. It's simple and neat, and I hadn't seen any other Drupal-based service like this at the time. It also had a JSON-based API for shortening and expanding URLs.

As I was using it a lot on my TweetDeck, I found it a little hard to go to the site and shorten the URLs which I wanted to tweet. So I decided to make a Chrome app.

The Chrome App

I created a Chrome extension for Drpl.it that made shortening URLs much more convenient. The app was available at http://drpl.it/Z5t.

It came out pretty well and provided a simple interface to quickly shorten URLs without having to visit the Drpl.it website each time.

How the Chrome App Worked

The Chrome extension provided a simple popup interface where users could:

1. Paste a long URL or automatically capture the current tab's URL
2. Click a button to shorten it using the Drpl.it API
3. Copy the shortened URL to the clipboard with one click
4. View a history of recently shortened URLs

Here's what the code structure looked like (simplified):

// popup.js - The main script for the Chrome extension popup
document.addEventListener('DOMContentLoaded', function() {
  // Get elements
  var urlInput = document.getElementById('url-input');
  var shortenButton = document.getElementById('shorten-button');
  var resultArea = document.getElementById('result');
  var copyButton = document.getElementById('copy-button');
  
  // Get current tab URL
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    urlInput.value = tabs[0].url;
  });
  
  // Handle shortening
  shortenButton.addEventListener('click', function() {
    var longUrl = urlInput.value.trim();
    if (!longUrl) return;
    
    // Show loading state
    resultArea.textContent = 'Shortening...';
    
    // Call the Drpl.it API
    fetch('http://drpl.it/api/shorten', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        url: longUrl
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.short_url) {
        resultArea.textContent = data.short_url;
        copyButton.style.display = 'inline-block';
        
        // Save to history
        saveToHistory(longUrl, data.short_url);
      } else {
        resultArea.textContent = 'Error: ' + (data.error || 'Unknown error');
      }
    })
    .catch(error => {
      resultArea.textContent = 'Error: ' + error.message;
    });
  });
  
  // Copy to clipboard
  copyButton.addEventListener('click', function() {
    var shortUrl = resultArea.textContent;
    navigator.clipboard.writeText(shortUrl).then(function() {
      // Show copied feedback
      copyButton.textContent = 'Copied!';
      setTimeout(function() {
        copyButton.textContent = 'Copy';
      }, 2000);
    });
  });
});

// Save shortened URL to history
function saveToHistory(longUrl, shortUrl) {
  chrome.storage.local.get('history', function(data) {
    var history = data.history || [];
    history.unshift({
      long: longUrl,
      short: shortUrl,
      date: new Date().toISOString()
    });
    
    // Keep only last 10 items
    if (history.length > 10) {
      history = history.slice(0, 10);
    }
    
    chrome.storage.local.set({history: history});
  });
}

The Drpl.it API

The API was simple and RESTful, making it easy to integrate with various applications:

Shortening a URL:

POST http://drpl.it/api/shorten
Content-Type: application/json
Body: {"url": "https://example.com/very/long/url/that/needs/shortening"}

Expanding a Short URL:

GET http://drpl.it/api/expand?shorturl=Z5t

Why Drupal for a URL Shortener?

Using Drupal for a URL shortener might seem like overkill, but it provided several advantages:

1. User Management: Built-in user accounts for tracking who created links
2. Analytics: Easy integration with modules for tracking clicks and referrers
3. Content Filtering: Tools to prevent abuse and malicious links
4. Extensibility: Ability to add features like link expiration, custom slugs, etc.

Conclusion

Drpl.it was a neat example of using Drupal for something other than traditional content management. The Chrome extension I built made the service more accessible and demonstrated how browser extensions can enhance web services by providing more convenient interfaces.

While many URL shorteners have come and gone since 2011 (with some major ones like Google's goo.gl being discontinued), specialized URL shorteners still serve a purpose in many workflows. This small project was an interesting exploration of both Drupal's flexibility and Chrome extension development.