/ chromeghostchrome web storeextension

Creating a Tiny Chrome Extension for Ghost

I just created the world's smallest Chrome extension! Well, maybe not, but it's pretty darn small.

I self-host the Ghost platform for this blog, and there's a nice feature where you can type /edit after the URL of a post and it'll redirect you to the editor for that post. I like the feature, but I got tired of clicking on the URL, going to the end of the line, and typing edit. I guess that doesn't sound like much, but why keep doing something that can be simplified?

It's been awhile since I created my first extension, an unpolished yet functional one that allows someone using the Pinboard bookmark service to do a one-way sync of bookmarks with specific tags. It allows combinations of tags too, which was a pain to design but fun to figure out. This new extension does one and one thing only - it redirects a URL by appending /edit to the end of it.

The interesting part was trying to figure how to take an action as soon as the user clicks the icon. Usually, if you want a page to pop up as soon as a user clicks your extension icon, you specify the page in the manifest.json file.

"browser_action": {
    "default_popup": "popup.html",
    "default_title": "Helper functions to make life using the Ghost blog easier."
},

But if you don't want to show a popup page, and instead just want to take some default action, then you can remove the "default_popup" setting and specify a "background" script to run. Note the "persistent":false flag - that runs the script as an event page instead of a background page, loading it only when necessary and consuming fewer resources.

"background": {
    "scripts": ["edit.js"],
    "persistent": false
},

"browser_action": {
    "default_title": "Helper functions to make life using the Ghost blog easier."
},

So now when the user clicks the extension icon, it loads the "edit.js" script into memory... but we need to tell the script to do something. If we tell it to register a listener for the chrome.browserAction.onClicked event (read docs here), we can run a piece of code as soon as the icon is clicked. As the docs say, "This event will not fire if the browser action has a popup." We don't have a popup, so whatever is in this function will execute when the icon is clicked.

chrome.browserAction.onClicked.addListener(function(tab) {
    // Redirect the URL of the currently active tab
}

That's where I put the code that tests the current URL and potentially redirects it.

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.storage.sync.get('urls', function(result) {
        var isSafeToRedirect = false;
        
        // ...
        // various tests to determine whether the URL in the active tab is one
        // that can be redirected by appending /edit to the end of it
        // ...
        
        if (isSafeToRedirect) {
            chrome.tabs.update(tab.id, {'url': tab.url + '/edit'});
        }
    });
});

The "various tests" omitted from the above code scan any URLs are entered in the "options" page, which tells it which URLs are safe to redirect. If the box is empty, it assumes any URL is safe to redirect.

If you want, you can check out the entire extension on GitHub or in the chrome web store. Like I said, there's not much to it... yet. If I run across anything else I'm doing that can be simplified or automated, I may extend this extension to do more things.

I think I'll write a small tutorial for creating your first Chrome extension. It's really handy to be able to add your own functionality - and you never know who else might find it useful too!


Alternatively, if you'd just like a bookmarklet that does the same, you can copy the following into the URL field of a new bookmark: (available as a gist too)

javascript:var u = window.location.href;
if (u.indexOf('grantwinney.com') !== -1     // change the url
    && !(u.endsWith('.com/'))               // change the tld if you don't use .com
    && u.indexOf('ghost/#/editor') === -1)
{
    window.location.href += '/edit'
}

Grant Winney

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.

Read More