Copy your social links easily with a chrome plugin

If you want to go straight to business, click here.

I have started my job search, and the thing that annoyed me the most (not counting writing cover letters for companies that don’t read them), was to have to paste the same links over and over again.

I always went to the website to copy and paste it as I was afraid that I could misspell it and the link wouldn’t work, but you can see that it soon became a tedious task, and I thought how I could solve this problem.

The first idea was to have all the links I needed in one easy place for me to copy and paste it, and it would work fine, but I recently had done a Chrome plugin and I thought that having it on the browser would make the process even easier.

The idea was simple, I’d have the link in there, I would click on it and it would copy automatically (without the need of ctrl/cmd + c), and in the end, it worked great, and if I say that I use this at least once every minute, I might be exaggerating very little.

I was planing in making possible for the user to edit their links on the plugin, but Chrome Extension has some restrictions and I couldn’t make that work, so I gave up on sharing it on the marketplace.

But as it is one of my favourite tools to use, I friend suggested that I still shared it, but with an instruction manual, so I edited the code a little to make it easier for anyone to edit the code themselves and add to their browser.

But these instructions should be easy enough even for someone who has never coded before.

How to download it and edit it

I have decided to leave it on Github as you can easily download the .zip file, to do so, go to my GitHub repo on this link: https://github.com/rmiri/links-chrome-extension.

Click in clone > DOWNLOAD ZIP.

Unzip it, and if you have a code editor, open with it, if not, open the file called popup.js and open with text editor or notes, don’t try to double click it.

You will see then this text next to here.

Right now it has my details on it, to change it, add the URL to where mine is, but don’t forget to leave the ‘’ in it.

/// Edit these links:
const links = {
    //Add your Website:
    portfolioLink: 'http://renatamiri.uk/',
    
    // Add your Linkedin:
    linkedinLink: 'https://www.linkedin.com/in/renatamiriuk/',
// Add your Github:
    githubLink: "https://github.com/rmiri",
// Add your Medium:
    mediumLink: "https://medium.com/@r.miriuk",
// Add your twitter:
    twitterLink: "https://twitter.com/rmiriuk"
}

I have left the icons for these websites, but later on, I will explain how to add different icons. Do not edit anything outside of the quotation marks unless you know what you are doing.

I mean, not that it’s going to end the world anything, you just might break something and the plugin won’t work for you.

Adding to your browser

Now, on your Google Chrome browser type the following on your URL field:

chrome://extensions/

On the top right of the page, select the developer mode.

And then click on the button called “Load unpacked”, find the folder you have just downloaded.

Once it appears on your extensions, change the toggler on the bottom right corner to on (like the one in the right in the image), you should then be able to see it on your browser immediately.

And enjoy!

Adding other icons

I have added a list of icons you can use in the file, but to be able to add them, you will need to go to the HTML file and edit it, and to do it, you need to have a code editor, my personal choice is Visual Studio Code.

The icons already in the file are:

• Behance as “behance.png”
• Codepen as “codepen.png”
• Dev.to as “dev.png”
• Github as “github.png”
• Linkedin as “linedinIcon.png”
• Medium as “medium.png”
• Twitter as “twitter.png”
• Youtube as “youtube.png”
• And a general one, that you can use for whatever you like as “general.png”.

Open the file with VS Code, and what you are going to do is, change the name of the file it is being used to create the icon.

Of you want to change the LinkedIn icon to Youtube what you going to do is change the name from:

"images/linkedinIcon.png"

to:

“images/youtube.png”

And then, remember to edit the link on the popup.js file on the Linkedin field.

If you want to build your own (but not exactly this one), I have a tutorial on how to do it:

Beginners guide to building a Chrome Extension