popup.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>popup</title>
  <style>
    .App {
      /* background-color: #282c34;
        text-align: center; */
    }

    .App-header {
      background-color: #282c34;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .App-body,
    .App-link {
      padding: 10px;
    }

    .App-link a {
      color: #1890ff;
    }


    .btn {
      width: 100%;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      display: inline-block;
      margin: 0.6rem auto 0.2rem auto;
      font-size: 14px;
      background: #1890ff;
      color: #fff;
      border: 1px solid #adadad;
      border-radius: 2px;
      cursor: pointer;
      border-color: transparent;
      text-align: center;
      text-decoration-line: none;
      box-sizing: border-box;
    }

    .btn:hover {
      background-color: #40a9ff;
    }
  </style>
</head>

<body style="width: 180px">

  <div className="App">
    <div className="App-header">
      <h4>已支持一键复制csdn代码！</h4>
    </div>
    <div className="App-body">
      <fieldset>
        <legend>设置:</legend>
        <div>
          <input type="checkbox" id="autoOpenCode" name="autoOpenCode" />
          <label htmlFor="autoOpenCode">自动展开代码块</label>
        </div>
      </fieldset>
    </div>

    <div className="App-link">
      <a class="btn"
        href="https://chrome.google.com/webstore/detail/exportgpt-export-chatgpt/jamcijfplmgbngnppdhmbbogjebgfimn"
        target="_blank" rel="noreferrer">
        ChatGPT最全导出插件
      </a>
      <a class="btn" href="https://lwebapp.com/zh/tools" target="_blank" rel="noreferrer">
        在线工具箱
      </a>
      <a class="btn" href="https://lwebapp.com/zh/support" target="_blank" rel="noreferrer">
        支持作者更新
      </a>
    </div>
  </div>
  <script type="text/javascript" src="./popup.js"></script>
</body>

</html>