manifest.json

{
  "name": "POPUP Utlilty",
  "description": "Utilty",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "tabs", "storage"
  ],
  "action": {
    "default_title": "POPUP Utlilty",
    "default_popup": "popup.html"
             }
}

マニフェスト V3での記載
　

popup.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="popup.css">
        <script src="jquery-3.6.0.min.js"></script>
        <script src="time.js"></script>
    </head>
   <body>
    <div class="tabs">
        <input id="all" type="radio" name="tab_item" checked>
        <label class="tab_item" for="all">Utility</label>
        <input id="programming" type="radio" name="tab_item">
        <label class="tab_item" for="programming">タブ２</label>
        <input id="memotext" type="radio" name="tab_item">
        <label class="tab_item" for="memotext">★Memo★</label>
        <!--ここからタブ１ -->
        <div class="tab_content" id="all_content">
          <div class="tab_content_description">
            <div class="date_today_time">
              <h3>Today Date：</h3>
              <p id="id_date_today"></p>
            </div>
           <h2>HOGE</h2>
          </div>
        </div>
        <!--ここからタブ２-->
        <div class="tab_content" id="programming_content">
          <div class="tab_content_description">
            <h2>リンク集</h2>
          </div>
        </div>
        <!--ここからタブ３-->
        <div class="tab_content" id="memotext_content">
          <div class="tab_content_description">
            <h2>Memo：</h2>
            <p>※plaintext 、UTF-8 、短期保存でローカルストレージに記憶、忘却で削除<br>ダウンロードは、テキストファイル </p>
            <div id="MemoTextArea">
            <textarea id="id_memo"></textarea><br>
            <input type="button" id="id_save" value="短期保存">
            <p>【↓テキストファイルを取り込み表示/テキストファイルをダウンロード☟】<br>※文字コード【UTF-8】に限る</p>
            <input type="file" id="id_openfile">
            <input type="button" id="id_savefile" value="メモをダウンロード">
            <input type="button" id="id_clear" value="メモを忘却">
          </div>
          </div>
        </div>
      </div>
      <script src="memoScript.js"></script>
    </body>
</html>

popup.css

body {
    font-family: "meiryo","メイリオ","arial",sans-serif;
    font-size: 14px;
  }
/*--------------------ここからタブのスタイル------------*/
/*タブ切り替え全体のスタイル*/
.tabs {
    margin-top: 50px;
    padding-bottom: 40px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 600px;
    margin: 0 auto;}

  /*タブのスタイル*/
  .tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #d9d9d9;    
    line-height: 50px;
    font-size: 16px;
    text-align: right;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .tab_item:hover {
    opacity: 0.75;
    cursor:pointer;
  }

  /*ラジオボタンを全て消す*/
  input[name="tab_item"] {
    display: none;
  }

  /*タブ切り替えの中身のスタイル*/
  .tab_content {
    display: none;
    padding: 40px 40px 0;
    clear: both;
    overflow: hidden;
  }

  /*選択されているタブのコンテンツのみを表示*/
  #all:checked ~ #all_content,
  #programming:checked ~ #programming_content,
  #memotext:checked ~ #memotext_content {
    display: block;
  }

  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item {
    background-color: #57ac9d;
    color: #fff;
  }
/*--------------------ここまでがタブスタイル----------------*/
  #id_memo {
    border: 1px solid #57c9bf;
    width: 525px;
    height: 250px;
    font-size: 16px;
    background-color: #fffce6;
  }

memoScript.js

window.onload = () => {
    let memo = localStorage['Memo'];
    if (memo == null) {
        memo = '';
    }
    document.getElementById('id_memo').value = memo;
}
document.getElementById('id_save').onclick = () => {
    localStorage['Memo'] = document.getElementById('id_memo').value;
}
document.getElementById('id_openfile').onchange = function() {
    let file = this.files[0];
    if (file == null) return;
    let reader = new FileReader;
    reader.onload = function() {
        document.getElementById('id_memo').value = reader.result;
    }
    reader.readAsText(file);
}
document.getElementById('id_savefile').onclick = () => {
    let memo =document.getElementById('id_memo').value;
    let objectURL = window.URL.createObjectURL(new Blob([memo]));
    let a = document.createElement('a');
    a.download = 'memo.txt';
    a.href = objectURL;
    a.click();
}
document.getElementById('id_clear').onclick = () => {
    let textareForm = document.getElementById('id_memo');
    textareForm.value = '';
    localStorage['Memo'] = textareForm.value;
}

time.js

$(function(){
    setInterval(function(){
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var w = now.getDay();
    var wd = ['日', '月', '火', '水', '木', '金', '土'];
    var h = ('0' + now.getHours()).slice(-2);
    var mi = ('0' + now.getMinutes()).slice(-2);
    var s = ('0' + now.getSeconds()).slice(-2);
    $('#id_date_today').text(y + '/' + m + '/' + d + '/' + h + ':' + mi + ' ' + '(' + wd[w] + ')');
    }, 5000);
    });