One of the first projects I've actually completed: Chrome Extention

Johna · Nov 23, 2021

Well so I made this extension a last week.

Quora Unlimited - Microsoft Edge Addons

Make Microsoft Edge your own with extensions that help you personalize the browser and be more productive.

microsoftedge.microsoft.com

It removes that sign up popup when you view a Quora page.

I can't upload is on the chrome web store, cause you need to pay 5 euros/dollars, whatever it was, so I uploaded it to Microsoft edge add-ons.

It was a very easy project to make.

Here's the code if anyone is interested:

manifest.json

JSON:

{
  "manifest_version": 2,
  "name": "Quora Unlimited",
  "version": "1.0",
  "description": "This extension allows you to view unlimited number of Quora pages a day without needing an account.",
  "icons": {
    "16": "Icons/quoraLogo16.png",
    "32": "Icons/quoraLogo32.png",
    "48": "Icons/quoraLogo48.png",
    "128": "Icons/quoraLogo128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.quora.com/*"],
      "css": ["CSS/removeOverlayPopup.css"],
      "run_at": "document_end"
    }
  ]
}

removeOverlayPopup.css

CSS:

.q-box.qu-overflow--hidden {
  box-sizing: border-box !important;
  inset: 0px !important;
  filter: blur(0px) !important;
  position: relative !important;
}

.q-flex.qu-alignItems--center.qu-justifyContent--center.qu-overflow--hidden.qu-zIndex--blocking_wall {
  display: none !important;
}

I'm currently working on a calculator extension, It's almost done, I just need to do a few changes for dark mode.

Here's the code:

manifest.json

JSON:

{
  "manifest_version": 2,
  "name": "Calculator in a Box",
  "version": "1.0",
  "description": "Use this calculator without having to switch tabs or windows",
  "icons": {
    "128": "Icons/128.png",
    "48": "Icons/48.png",
    "32": "Icons/32.png",
    "16": "Icons/16.png"
  },
  "browser_action": {
    "default_popup": "Html/calculator.html"
  },
  "content_security_policy":"script-src 'self' 'unsafe-eval'; object-src 'self'"
}

calculator.html

HTML:

<html>

<head>
  <title>Calculator in a Box</title>
</head>

<!--Design-->
<link rel="stylesheet" href="/CSS/calcstyle.css">

<body>

  <div class="menu">
    <img class="menuButton" id="buttonMenu" src="/Icons/menuIcon.png" width="40px" height="15px"/>
    <div class="puB">
    <div id="popup" class="pu">
    Darkmode
    <button class="change">OFF</button>
    </div>
    </div>
  </div>

  <!--Calculator buttons and textbox-->
  <form name="calculator">
    <br><input type="text" class="result" id="textbox"/></br><br/>
    <input class="top" id="openB" type="button" value="("/>
    <input class="top" id="closeB" type="button" value=")"/>
    <input class="top" id="x10p" type="button" value="EXP"/>
    <input class="top" id="clear" type="button" value="reset"/><br/>
    <input class="main" id="seven" type="button" value="7"/>
    <input class="main" id="eight" type="button" value="8"/>
    <input class="main" id="nine" type="button" value="9"/>
    <input class="main" id="plus" type="button" value="+"/><br/>
    <input class="main" id="four" type="button" value="4"/>
    <input class="main" id="five" type="button" value="5"/>
    <input class="main" id="six" type="button" value="6"/>
    <input class="main" id="minus" type="button" value="-"/><br/>
    <input class="main" id="one" type="button" value="1"/>
    <input class="main" id="two" type="button" value="2"/>
    <input class="main" id="three" type="button" value="3"/>
    <input class="main" id="times" type="button" value="*"/><br/>
    <input class="main" id="point" type="button" style="font-weight: bold" value="."/>
    <input class="main" id="zero" type="button" value="0"/>
    <input class="main" id="equals" type="button" value="="/>
    <input class="main" id="divBy" type="button" value="/"/>
  </form>
</body>

<!--Scripts-->
<script src="/JavaScript/jquery-2.2.0.min.js"></script>
<script src="/JavaScript/calcscript.js"></script>

</html>

calcstyle.css

CSS:

body {
    background-color: #FFFFFF;
    width: 282px;
    height: 420px;
}

.menuButton {
    align-content: center;
    position: relative;
    right: -242px;
}

.result {
    height:45px;
    width:282px;
    padding: 0;
    padding-right: 5px;
    border: none;
    background: none;
    background-color: #DDDDDD;
    border-radius: 5px;
    text-align: right;
    font-size: 20px;
}

.top {
    height:34px;
    width:68px;
    padding: 0;
    border: none;
    border-top: solid white;
    border-bottom: solid white;
    border-width: 2px;
    background: none;
    background-color: #DDDDDD;
    border-radius: 5px;
    font-size: 15px;
}

.main {
    height: 72px;
    width: 68px;
    padding: 0;
    border-top: solid white;
    border-bottom: solid white;
    border-left: none;
    border-right: none;
    border-width: 2px;
    background: none;
    background-color: #DDDDDD;
    border-radius: 5px;
    font-size: 18px;
}

.darkbody {
    background-color: #454545;
    width: 282px;
    height: 420px;
}

.darkresult {
    height:45px;
    width:284px;
    padding: 0;
    padding-right: 5px;
    border: none;
    background: none;
    background-color: #707070;
    border-radius: 5px;
}

.darktop {
    height:34px;
    width:68px;
    padding: 0;
    border: none;
    border-top: solid #454545;
    border-bottom: solid #454545;
    border-width: 2px;
    background: none;
    background-color: #707070;
    border-radius: 5px;
    font-size: 15px;
}

.darkmain {
    height: 72px;
    width: 68px;
    padding: 0;
    border-top: solid #454545;
    border-bottom: solid #454545;
    border-left: none;
    border-right: none;
    border-width: 2px;
    background: none;
    background-color: #707070;
    border-radius: 5px;
    font-size: 18px;
}

#popup {
  background-color: #999999;
  width: 150px;
  height: 50px;
  position: absolute;
  visibility: hidden;
  font-family: Roboto;
  font-size: 18px;
  border-radius: 5px;
  right: 0px;
  padding-left: 5px;
  padding-top: 8px;
}

.change {
  background-color: #707070;
  width: 40px;
  height: 20px;
  border: none;
  border-radius: 5px;
  position: absolute;
  right: 10px;
}

.popupBG {
  background-color: #999999 !important;
  width: 150px !important;
  height: 30px !important;
  position: absolute !important;
  visibility: visible !important;
  font-family: Roboto !important;
  font-size: 18px !important;
  border-radius: 5px !important;
  right: 0px !important;
  padding-left: 5px !important;
  padding-top: 10px !important;
}

.puBV {
  background: none;
  width: 282px;
  height: 420px;
  position: absolute;
}

calcscript.js

JavaScript:

//Dark mode toggle
$( ".change" ).on("click", function() {
    if( $( "body" ).hasClass( "darkbody" )) {
        $( "body" ).removeClass( "darkbody" );
        $( ".top" ).removeClass( "darktop" );
        $( ".main" ).removeClass( "darkmain" );
        $( ".result" ).removeClass( "darkresult" );
        $( ".change" ).text( "OFF" );
    }
    else {
        $( "body" ).addClass( "darkbody" );
        $( ".top" ).addClass( "darktop" );
        $( ".main" ).addClass( "darkmain" );
        $( ".result" ).addClass( "darkresult" );
        $( ".change" ).text( "ON" );
    }
 });


//Dark mode popup button
 $( ".menuButton" ).on("click", function() {
     if( $( ".pu" ).hasClass( "popupBG" )) {
         $( ".pu" ).removeClass( "popupBG" );
     }
     else {
         $( ".pu" ).addClass( "popupBG" );
         $( ".puB" ).addClass( "puBV" )
     }
  });

   $( ".puB" ).on("click", function() {
       if( $( ".pu" ).hasClass( "popupBG" )) {
           $( ".pu" ).removeClass( "popupBG" );
           $( ".puB" ).removeClass( "puBV" )
       }
       else {
           $( ".pu" ).addClass( "popupBG" );
           $( ".puB" ).addClass( "puBV" )
       }
    });


//Open bracket
document.getElementById("openB").onclick = function() {funOB()};

function funOB(){
    document.getElementById("textbox").value+= "("
};


//Close bracket
document.getElementById("closeB").onclick = function() {funCB()};

function funCB(){
    document.getElementById("textbox").value+= ")"
};


//Exponential
document.getElementById("x10p").onclick = function() {funE()};

function funE(){
    document.getElementById("textbox").value+= "e"
};


//Clear
document.getElementById("clear").onclick = function() {clr()};

function clr() {
    document.getElementById("textbox").value = ""
}


//Seven
document.getElementById("seven").onclick = function() {funSeven()};

function funSeven(){
    document.getElementById("textbox").value+= "7"
};


//Eight
document.getElementById("eight").onclick = function() {funEight()};

function funEight(){
    document.getElementById("textbox").value+= "8"
};


//Nine
document.getElementById("nine").onclick = function() {funNine()};

function funNine(){
    document.getElementById("textbox").value+= "9"
};


//Addition
document.getElementById("plus").onclick = function() {funPlus()};

function funPlus(){
    document.getElementById("textbox").value+= "+"
};


//Four
document.getElementById("four").onclick = function() {funFour()};

function funFour(){
    document.getElementById("textbox").value+= "4"
};


//Five
document.getElementById("five").onclick = function() {funFive()};

function funFive(){
    document.getElementById("textbox").value+= "5"
};


//Six
document.getElementById("six").onclick = function() {funSix()};

function funSix(){
    document.getElementById("textbox").value+= "6"
};


//Subtraction
document.getElementById("minus").onclick = function() {funMin()};

function funMin(){
    document.getElementById("textbox").value+= "-"
};


//One
document.getElementById("one").onclick = function() {funOne()};

function funOne(){
    document.getElementById("textbox").value+= "1"
};


//Two
document.getElementById("two").onclick = function() {funTwo()};

function funTwo(){
    document.getElementById("textbox").value+= "2"
};


//Three
document.getElementById("three").onclick = function() {funThree()};

function funThree(){
    document.getElementById("textbox").value+= "3"
};


//Multiplication
document.getElementById("times").onclick = function() {funTim()};

function funTim(){
    document.getElementById("textbox").value+= "*"
};


//Point
document.getElementById("point").onclick = function() {funDot()};

function funDot(){
    document.getElementById("textbox").value+= "."
};


//Zero
document.getElementById("zero").onclick = function() {funZero()};

function funZero(){
    document.getElementById("textbox").value+= "0"
};


//Answer
document.getElementById("equals").onclick = function() {solve()};

function solve() {
    let x = document.getElementById("textbox").value
    let y = eval(x)
    document.getElementById("textbox").value = y
}


//Division
document.getElementById("divBy").onclick = function() {funDiv()};

function funDiv(){
    document.getElementById("textbox").value+= "/"
};

And well I don't think I need to add the jquery-2.2.0.min.js

I should finish it soon I hope.

So yeah, that's what I'm working on right now.

Welcome!

One of the first projects I've actually completed: Chrome Extention

Johna

Frontend Developer

Quora Unlimited - Microsoft Edge Addons

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

One of the first projects I've actually completed: Chrome Extention

Johna

Frontend Developer

Quora Unlimited - Microsoft Edge Addons

Log in

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy