popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Encode Utility.</title>
  <link rel="stylesheet" href="./bootstrap.4.1.0.min.css" type="text/css" charset="utf-8">
<style>
body {
  width: 300px;
  height: 300px;
  padding: 15px 0 0;
}
</style>
</head>
<body>
<div class="container-fluid">

  <h1 class="title" style="font-size: 16px;">Encode Utility.</h1>

  <hr>

  <form>
    <div class="form-group">
      <label for="inputBefore">選択テキスト（文字数：<span class="input-before-count"></span>）</label>
      <textarea type="text" class="form-control" id="inputBefore" name="inputBefore" placeholder="input..." rows="3"></textarea>
    </div>
    <div class="form-group">
      <label for="inputAfter">エンコード後</label>
      <textarea type="text" class="form-control" id="inputAfter" name="inputAfter" placeholder="output..." disabled></textarea>
    </div>
  </form>

  <p class="btn btn-primary  btn-encode">選択テキストをエンコード</p>

  <p class="btn btn-secondary btn-copy">エンコード結果をクリップボードにコピー</p>

  <p class="copy text-right" style="font-size: 10px;">&copy; @yama-dev</p>

</div>

<script src="./popup.js"></script>

</body>
</html>