popup.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        background: #e9eef7;
        padding: 30px 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p {
        color: #96a4b1;
        font-weight: 400;
        white-space: nowrap;
        font-family: sans-serif;
        font-size: 14px;
        margin: 20px 0 0;
        width: 120px;
        text-align: center;
    }

    /* Switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #b3b9c1;
        border-radius: 34px;
    }

    .animated, .animated:before {
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    .hidden {
        opacity: 0;
        pointer-events: none;
    }
</style>
</head>
<body>

<label class="switch hidden">
  <input id="switch" type="checkbox">
  <span class="slider hidden"></span>
</label>

<p id="label">Gridlines enabled</p>

<script src="popup.js"></script>

</body>
</html> 