Making a simple Chrome Extension

Programming is scary and difficult. I don’t argue with that. But if you know what you want, and can boil it down to the bare minimum, you can sometimes create something that you and others may find useful. Today’s example is going to be a Google Chrome extension I created in a few lines of code.

My Chrome extension is pretty useless outside of a niche of a niche of a niche- Chrome users of the Autotask website that belong to a single company’s dataset. So not the next LastPass, but sometimes it’s about what value you bring to a few people than what you try to get the world using.

Here is the simple one-liner for what the extension does:

Adds the contact’s email to an Autotask ticket window, saving the hassle of having to click on a person’s name to see their email.

Example-shot

The code for this project is available at my GitHub – it consists of a backend PHP script running on a server you control, and the JavaScript that is run on your extension users machine. Since it’s so small, let’s run through it.

var data_to_use= window.location.href;
var data_to_use_parse = data_to_use.substring(data_to_use.indexOf('ticketId=') +9,data_to_use.indexOf('ticketId=') +15);
$(".contact").append('</br><span class=\"kiwidget\"></span></br>');
$(".kiwidget").load("https://www.YOURSITE.com/backend_autoask_email_resolver_chrome.php?id="+data_to_use_parse);

So this code does four things:

  1. Grab the Autotask current window
  2. Parse out a ticket ID for the window
  3. Append a Contact span to the page
  4. Reach out to a site to resolve the ticket ID to an associated contact’s email address.

And the PHP…

<?php

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

$mslink = mssql_connect('DATAWAREHOUSE URL', 'USERNAME', 'PASSWORD');

if (!$mslink || !mssql_select_db('DATABASE', $mslink)) {
die('Unable to connect or select database!');
}

$account_id = $_GET['id'];

if (is_numeric($account_id)) {

// The extension apparently runs a few times in wrong places, checking if its a number fixes this
// mssql_query(): message: The multi-part identifier &quot;ww3.au&quot; could not be bound. (severity 16)
// mssql_query(): Query failed
// mssql_query(): General SQL Server error: Check messages from the SQL Server (severity 16)

$lookup_account_id_query = "SELECT email_address FROM dbo.wh_task
JOIN dbo.wh_account_contact ON dbo.wh_task.account_contact_id = dbo.wh_account_contact.account_contact_id
WHERE task_id = $account_id";

$lookup_account_id = mssql_query($lookup_account_id_query) or die("Error Query [" . $lookup_account_id_query . "]");
$objResult1 = mssql_fetch_array($lookup_account_id);
$data = $objResult1['email_address'];

echo "<a href='mailto:$data'>$data</a>";
} else {
echo "";
}

So this code does the following:

  1. Set up some HTTPS access controls
  2. Set up some connection parameters for the Autotask Data Warehouse (it’s a read-only MS SQL database)
  3. Verify the data is numeric
  4. Perform a lookup of the Autotask Data Warehouse
  5. Return a clickable mailto link to the JavaScript above.

Now this extension doesn’t need to run everywhere- only on Autotask Portal pages. Thankfully, the extension’s JSON Manifest allows you to define that so you aren’t running outside your authorized context. This is also where you’ll include your icons and jQuery.

{
"name": "Kiwidget Autotask Email Resolver",
"version": "1.0",
"manifest_version": 2,
"description": "Adds an email link to Autotask ticket contacts",
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"name": "Kiwidget AT Email Resolver"
},
"author": "Greg Esposito gregesposito@mac.com",
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*.autotask.net/*", "https://*.autotask.net/*"],
"all_frames": true
}]
}

So from here, all you need to do is test your extension by authorizing it on your machine directly – as explained here by Google. If it works, and you are an Administrator of every machine you need the extension for, you can now deploy that anywhere it may be useful!

If however you wanted to go full Professional, access to the real Chrome Web Store listing will cost you a meager $5 one time fee.

chrome-web-store-shot

Then you can tell all your users about it, and see if you can break double digits! Hey, at least the users that really use it will appreciate your effort right? And with this example, it really didn’t take long at all to do!

Leave a Reply

Your email address will not be published. Required fields are marked *