popup.html

<style>
    body {
        margin: 0;
        min-height: 60px;
        width: 310px;
        font-family: 'Segoe UI', 'Lucida Grande', Tahoma, sans-serif;
        font-size: 16px;
        padding: 16px;
    }

    #description {
        margin: 0 0 10px 0;
        padding: 0;
        font-size: 12px;
    }

    #error {
        padding-top: 20px;
        color: #e24646;
        font-size: 13px;
    }

    #error:empty {
        display: none;
    }
    .inputGroup {
      background-color: #fff;
      display: block;
      margin: 10px 0;
      position: relative;
      line-height: 36px;
    }
    .inputGroup label {
      padding: 12px 30px;
      display: block;
      text-align: left;
      color: #3c454c;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: color 200ms ease-in;
      overflow: hidden;
    }
    .inputGroup label:before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: '';
      background-color: #5562eb;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale3d(1, 1, 1);
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0;
      z-index: -1;
    }
    .inputGroup label:after {
      width: 32px;
      height: 32px;
      content: '';
      border: 2px solid #d1d7dc;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
      background-repeat: no-repeat;
      background-position: 2px 3px;
      border-radius: 50%;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      transition: all 200ms ease-in;
    }
    .inputGroup input:checked ~ label {
      color: #fff;
    }
    .inputGroup input:checked ~ label:before {
      transform: translate(-50%, -50%) scale3d(56, 56, 1);
      opacity: 1;
    }
    .inputGroup input:checked ~ label:after {
      background-color: #54e0c7;
      border-color: #54e0c7;
    }
    .inputGroup input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }

</style>
<h4>Angular Profiler</h4>
<p id="description"></p>
<div class="inputGroup" id="enableSwitch">
  <input id="enable" name="enable" type="checkbox"/>
  <label for="enable">Enable Profiler</label>
</div>
<div id="error"></div>

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