I’ve appreciated the aesthetic changes that LinkedIn has made this year, but the default business icon baffles me:

Why so grey and blocky?

Many companies choose to upload a custom icon with their logo, but others don’t — and if you’ve been freelancing and aren’t associated with with a company, you’re stuck with the default logo, which just isn’t as sleek as the rest of LinkedIn.

The default school icon, which might appear next to your high school, isn’t much better:

I decided that this was an excellent opportunity for me to learn to make a Google Chrome browser extension so that I could replace LinkedIn’s default images with something nicer. This project wouldn’t save the world, but it would be a springboard for learning to make other, more complex browser extensions.

The good news about making a browser extension is that it’s mostly JavaScript. I already knew how my JavaScript would work: it would use getElementsByClassName to collect all the images on LinkedIn with the classes that signified they were default images (ghost-company or ghost-school), and replace all of them with a sleeker image I would create myself using Pixlr.

Google Chrome has very useful docs on getting started and the message passing aspect of extensions. I also found this tutorial on manipulating browser content with a Chrome extension particularly relevant.

Once I got my JavaScript working, I was thrilled to see my new images replace LinkedIn’s default images. But something weird started happening: when I scrolled down the page and then all the way up again, the default images had reverted back to their original forms.

My familiarity with table view in Swift/Xcode tipped me off about what might be happening: so that the page wouldn’t get too heavy, LinkedIn programmed it to only load what the user could see in their window, in addition to a little bit above their view and a little bit below. (Table view works the same way.) Default images that loaded at the top of the page would be replaced by my new images, but if I scrolled down and up and forced the images to reload, they would revert back to the default.

I knew the JavaScript function that would solve this problem: setInterval. I edited my code to run every .1 seconds to replace any default images, and I made it possible to toggle the extension on and off. I don’t know how much my little JavaScript function would slow down a browser by constantly running every .1 seconds, but it certainly wouldn’t help.

Experience the difference:

Another great thing about Chrome is that if you want to publish your extensions in the web store as a developer, all you have to do is pay a onetime $5 fee. Contrast this with Apple’s $99 annual developer fee. My finished extension, LinkedIn Da Vinci, is now available for free in the Chrome web store. Try it out when you next visit LinkedIn!