Sqrome, a Chrome extension

Tackling a different kind of scaling problem.

Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog

When I joined Square a few months ago, I often ran into email threads where I had no idea who anybody was — thanks to our impressive growth rate and my not-so-impressive memory. Every quarter, Square sets aside a week (we call it hack week), so that everyone has the opportunity to reach outside of their day-to-day projects, and build something that speaks to them personally. I decided this was a perfect time to solve my email problem, and in the process learn how to make my first Chrome extension.

Introducing Sqrome

Building Sqrome from scratch

It turns out that it’s pretty easy to develop a Chrome extension. Every extension is just a zipped bundle of files: images, HTML, CSS, and Javascript. I’ll go briefly into how to build Sqrome.

{
"name": "Sqrome",
"manifest_version": 2,
...
"background": {
"matches": [ "https://people.squareup.com/*" ],
"scripts": [ "background.js", "content.js" ]
},
"content_scripts":
[
{
"matches": [ "https://mail.google.com/mail*", "https://people.squareup.com/*" ],
"css": ["style.css"],
"js": ["content.js"],
"run_at": "document_end"
}
]
}
var currentUrl = document.location.href;
setInterval(function(){
if (document.location.href != currentUrl) {
injectProfileWidget();
currentUrl = document.location.href;
}
}, POLL_INTERVAL);
function injectProfileWidget(){
waitForElement(GMAIL_ELEMENT_SELECTOR, function(el) {
addCustomSidebarElement(el);
});
}
function waitForElement(selector, callback) {
var timer = setInterval(function() {
var el = document.querySelector(selector);
if (el) {
clearTimeout(timer);
callback(el);
}
}, POLL_INTERVAL);
}

Publishing the extension

The last step is to publish the extension. Google Web Store lets you publish Chrome extensions internally, so you won’t have to host the crx file manually.


Square Corner Blog

Buying and selling sound like simple things - and they should be. Somewhere along the way, they got complicated. At Square, we're working hard to make commerce easy for everyone.

Unlisted

Square Engineering

Written by

The official account for @Square Engineering.

Square Corner Blog

Buying and selling sound like simple things - and they should be. Somewhere along the way, they got complicated. At Square, we're working hard to make commerce easy for everyone.