├── background.js
├── .DS_Store
├── demo2.png
├── icons
├── .DS_Store
├── icon16x16.png
├── icon24x24.png
├── icon32x32.png
├── icon48x48.png
├── icon64x64.png
├── icon96x96.png
├── icon128x128.png
├── email.svg
├── facebook-logo-2019.svg
├── link.svg
├── left.svg
├── linkedin.svg
├── edit.svg
├── github.svg
├── twitter.svg
├── portfolio.svg
└── blog.svg
├── demoQuickLink.png
├── links.js
├── manifest.json
├── readme.md
├── index.js
├── style.css
└── popup.html
/background.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/.DS_Store
--------------------------------------------------------------------------------
/demo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/demo2.png
--------------------------------------------------------------------------------
/icons/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/.DS_Store
--------------------------------------------------------------------------------
/demoQuickLink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/demoQuickLink.png
--------------------------------------------------------------------------------
/icons/icon16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon16x16.png
--------------------------------------------------------------------------------
/icons/icon24x24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon24x24.png
--------------------------------------------------------------------------------
/icons/icon32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon32x32.png
--------------------------------------------------------------------------------
/icons/icon48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon48x48.png
--------------------------------------------------------------------------------
/icons/icon64x64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon64x64.png
--------------------------------------------------------------------------------
/icons/icon96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon96x96.png
--------------------------------------------------------------------------------
/icons/icon128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plxity/QuickLinks-Chrome-extension/HEAD/icons/icon128x128.png
--------------------------------------------------------------------------------
/icons/email.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/icons/facebook-logo-2019.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/icons/link.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/icons/left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/links.js:
--------------------------------------------------------------------------------
1 | export let Links = [
2 | {
3 | name: 'LinkedIn',
4 | icon: './icons/linkedin.svg',
5 | link: 'https://www.linkedin.com/in/apoorvtaneja/',
6 | },
7 | {
8 | name: 'GitHub',
9 | icon: './icons/github.svg',
10 | link: 'https://github.com/plxity',
11 | },
12 | {
13 | name: 'Twitter',
14 | icon: './icons/twitter.svg',
15 | link: 'https://twitter.com/apoorv_taneja',
16 | },
17 | {
18 | name: 'Portfolio',
19 | icon: './icons/portfolio.svg',
20 | link: 'https://www.plxity.co/',
21 | },
22 | {
23 | name: 'Blogs',
24 | icon: './icons/blog.svg',
25 | link: 'http://blog.plxity.co/',
26 | },
27 | {
28 | name: 'Email',
29 | icon: './icons/email.svg',
30 | link: 'apoorvtaneja@outlook.com',
31 | },
32 | ];
33 |
--------------------------------------------------------------------------------
/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "QuickLinks",
3 | "version": "1.0",
4 | "description": "An extension which helps you to get access to Quick Links!",
5 | "manifest_version": 2,
6 | "background": {
7 | "scripts": [
8 | "background.js"
9 | ]
10 | },
11 | "icons": {
12 | "16": "icons/icon16x16.png",
13 | "24": "icons/icon24x24.png",
14 | "32": "icons/icon32x32.png",
15 | "48": "icons/icon48x48.png",
16 | "64": "icons/icon64x64.png",
17 | "96": "icons/icon96x96.png",
18 | "128": "icons/icon128x128.png"
19 | },
20 | "browser_action": {
21 | "default_icon": {
22 | "16": "icons/icon16x16.png",
23 | "24": "icons/icon24x24.png",
24 | "32": "icons/icon32x32.png",
25 | "48": "icons/icon48x48.png",
26 | "64": "icons/icon64x64.png",
27 | "96": "icons/icon96x96.png",
28 | "128": "icons/icon128x128.png"
29 | },
30 | "default_popup": "popup.html",
31 | "default_title": "QuickLinks"
32 | },
33 | "permissions": [
34 | "tabs",
35 | "alarms",
36 | "storage"
37 | ]
38 | }
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # QuickLinks - Chrome Extension
2 |
3 | Being a fresher, I have to fill different job applications everyday and copying my LinkedIn, GitHub, Twitter handle links etc for mentioning in those forms become very difficult. So I made this extension which copies the link of the social media handles on the clipboard when you click on the icon.
4 |
5 |
6 | > ### A chrome extension which helps you to copy important social media links to clipboard in a **faster way**.
7 |
8 | ## How to use it?
9 |
10 | All the links to different social media handles are mentioned in the ```links.js```. You can go to that file and change the links. You can add new links as well.
11 | #### Make sure you add an icon for each new link otherwise it would throw an error.
12 |
13 | ## Demo
14 | 
15 | 
16 |
17 |
18 |
19 | ## Steps to Install
20 | 1. Clone this repository.
21 | 2. Open Chrome browser.
22 | 3. Navigate to ```chrome://extensions/```
23 | 4. Toggle the developer mode (Activate it).
24 | 5. Click on 'Load Unpacked'
25 | 6. Select the complete folder which you cloned in the first step.
26 |
27 | ## Tech Stack
28 | - HTML
29 | - CSS
30 | - JavaScript (VanillaJS)
31 |
--------------------------------------------------------------------------------
/icons/edit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import { Links } from './links.js';
2 | const linkContainer = document.getElementsByClassName('container')[0];
3 | const fragment = document.createDocumentFragment();
4 | const toast = document.getElementsByClassName('toast')[0];
5 | let length = Links.length;
6 | const displayToast = () =>{
7 | toast.classList.add('display-toast')
8 | setTimeout(()=>{
9 | toast.classList.remove('display-toast')
10 | },800)
11 | }
12 | const copyToClipboard = (e) => {
13 | let link = e.currentTarget.getAttribute('data-link')
14 | var copyhelper = document.createElement("input");
15 | copyhelper.className = 'copyhelper'
16 | document.body.appendChild(copyhelper);
17 | copyhelper.value = link;
18 | copyhelper.select();
19 | document.execCommand("copy");
20 | document.body.removeChild(copyhelper);
21 |
22 | displayToast();
23 | };
24 | for (let i = 0; i < length; i++) {
25 | const iconContainer = document.createElement('div');
26 | const imgContainer = document.createElement('img');
27 | iconContainer.setAttribute("data-link",Links[i].link);
28 | iconContainer.classList.add('social-media-icons');
29 | imgContainer.src = Links[i].icon;
30 | imgContainer.height = 30;
31 | imgContainer.width = 30;
32 | iconContainer.addEventListener('click', copyToClipboard, true);
33 | iconContainer.appendChild(imgContainer);
34 | fragment.appendChild(iconContainer);
35 |
36 | }
37 | linkContainer.appendChild(fragment);
38 |
39 |
40 |
--------------------------------------------------------------------------------
/icons/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body{
7 | background-color: #f8f9fa;
8 | }
9 | main{
10 | width:400px;
11 | height: 100px;
12 | }
13 | .menu-container{
14 | padding: 0 10px;
15 | }
16 | ul {
17 | list-style-type: none;
18 | }
19 | .menu{
20 | display: flex;
21 | flex-wrap: wrap;
22 | justify-content: space-between
23 | }
24 | .logo{
25 | font-size: 20px;
26 | font-family: 'Lato', sans-serif;
27 | padding: 10px 5px;
28 | }
29 | .link-button{
30 | align-self: center;
31 | padding: 14px 5px;
32 | }
33 | .line-break{
34 | border: 1px black solid;
35 | }
36 | .container{
37 | padding: 30px 15px;
38 | display: flex;
39 | flex-wrap: wrap;
40 | justify-content: space-evenly;
41 | }
42 | .social-media-icons{
43 | cursor: pointer;
44 | }
45 | .edit-logo{
46 | font-size: 18px;
47 | font-family: 'Lato', sans-serif;
48 | padding: 10px 5px;
49 | align-self: center;
50 | }
51 | .left-button{
52 | padding: 10px 5px;
53 | cursor: pointer;
54 | }
55 | .edit-container{
56 | padding: 30px 15px;
57 | display: flex;
58 | flex-direction: column;
59 | justify-content: space-between;
60 | }
61 | .copyhelper{
62 | position: absolute;
63 | }
64 | .toast{
65 | position: absolute;
66 | top:20px;
67 | display: none;
68 | width: 90px;
69 | text-align: center;
70 | background: rgb(143, 200, 85);
71 | color: white;
72 | height: 22px;
73 | font-size: 14px;
74 | padding: 2px 0;
75 | border-radius: 3px;
76 | left: 50%;
77 | transform: translateX(-50%);
78 | }
79 | .display-toast{
80 | display: block;
81 | animation: slideup 0.6s ease-in forwards;
82 | }
83 | @keyframes slideup{
84 | to{
85 | top:-20px;
86 | }
87 | }
--------------------------------------------------------------------------------
/icons/twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Quick Links
7 |
8 |
12 |
13 |
14 |
15 |
16 | Copied!
17 |
18 |
31 |
32 |
33 |
34 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/icons/portfolio.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/icons/blog.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------