social media extension

By
Supriya

folder structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> -->
    <link rel="stylesheet" href="styles/tabs.css">
    
</head>
<body>
    <div class="container">
        <div id="title">
            <h1>Social Clutter</h1>
        </div>
        <div id="quotes-container"></div>
        <div id="connect">
            <a href="https://in.pinterest.com/"><img class="contact-icons" src="icons/pinterest.svg" alt="pintrest"></a>
            <a href="https://www.reddit.com/"><img class="contact-icons" src="icons/reddit.svg" alt="reddit"></a>
            <a href="https://web.telegram.org/"><img class="contact-icons" src="icons/telegram.svg" alt="telegram"></a>
            <a href="https://www.linkedin.com/login?fromSignIn=true&trk=guest_homepage-basic_nav-header-signin"><img class="contact-icons" src="icons/linkedin.svg" alt="linked in"></a>
            <a href="https://github.com/login"><img class="contact-icons" src="icons/github.svg" alt=""></a>
            <a href="https://mail.google.com/mail/u/0/"><img class="contact-icons" src="icons/gmail.svg" alt="gmail"></a>
        </div>
       
    </div>
    <script src="scripts/tabs.js"></script>
</body>
</html>

tabs.html

@import url('https://fonts.googleapis.com/css?family=Darker+Grotesque|Limelight&display=swap');
:root {
    font-size: 16px;
    margin: 0;
    padding: 0;

    --text-font: 'Darker Grotesque', sans-serif;
    /* --title-font: 'Nixie One', cursive;  */
    --title-font: 'LimeLight', cursive;
}

body{
    font-family: 'Nixie One', cursive;
    padding : 1rem;
}

#title{
    align-items: center;
    border-bottom: 2px solid #FFAFBD;
    margin-bottom: 0.3rem;
    font-family: var(--title-font);
}

h1{
    text-align: center;
    font-size: 1.7rem;
}

.contact-icons{
    height: 2rem;
    width: 2rem;
    margin: 0.5rem;
    font-family: var(--text-font);
}

#quotes-container{
    padding: 0.3rem;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    text-align: center;
    width: 300px;
    line-height: 25px;
    font-family: var(--text-font);
    font-size: 1.1rem;
}

tabs.css

let quoteList = ["Everyone needs a little inspiration from time to time.",
 "You know you’re in love when you can’t fall asleep because reality is finally better than your dreams.– Dr. Suess", 
 "I’m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can’t handle me at my worst, then you sure as hell don’t deserve me at my best.– Marilyn Monroe",
"Get busy living or get busy dying.-Stephen King",
"The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.– Mark Caine",
"When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.– Helen Keller",
"Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do.– Mark Twain",
"When I dare to be powerful – to use my strength in the service of my vision, then it becomes less and less important whether I am afraid.– Audre Lorde",
"Great minds discuss ideas; average minds discuss events; small minds discuss people.– Eleanor Roosevelt",
"A successful man is one who can lay a firm foundation"];

let quotesContainer = document.getElementById("quotes-container");

function randIndex(){
    let ranInd = Math.floor(Math.random()*quoteList.length
    )   //Math.random([45,30,90,60,45,45]);
    return ranInd;
}

let quote = document.createElement('p');
quote.style.margin = 0.5;
// quote.style.textAlign = "justify";
quote.innerText = quoteList[randIndex()];
quotesContainer.appendChild(quote);

tabs.js

{
    "manifest_version" : 2,
    "name" : "Social Clutter",
    "version" : "1.0",

    "description": "shows a popup which displays a link to          
all the social media sites of the user",

    "icons": {
      "48": "icons/network.svg",
      "96": "icons/network.svg"
    },

    "browser_action" : {
      "browser_style" : true,
      "default_title" : "Social Clutter",
      "default_popup" : "tabs.html" 
    },

    "permissions": ["tabs"],

    "background" : {
        "page" : "tabs.html"
    }
}

manifest.json

Loading your add-on