有了这个备忘录插件，以后每次打开一个新网页都能看到我还有哪些事情没做，再也不用怕网上冲浪忘记正事了┭┮﹏┭┮

以下为主要配置，具体代码见github

// manifest.json
{
  "manifest_version": 3,
  "name": "NewTab",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "tabs",
    "storage"
  ],
  "icons": {
    "1080": "images/icon.png"
  },
  "description": "New tab with a simple watch.",

  "options_page": "o.html",
  "offline_enabled": false
}

// newtab.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Memorandum</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <section class="search">
    <div class="change-search">
      <i class="iconfont icon-baidu" id="change-baidu"></i>
      <i class="iconfont icon-google" id="change-google"></i>
    </div>
    <input type="text" class="search-input" placeholder="百度开发者搜索">
    <i class="iconfont icon-search"></i>
  </section>
  <section class="memorandum-container" id="memorandum-container">
    <section class="memorandum-list"></section>
    <section class="add-memorandum">
      <textarea class="memorandum-text" placeholder="请输入备忘录信息并回车"></textarea>
    </section>
  </section>

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

</body>
</html>

// style.css
@import "./iconfont/iconfont.css";

@font-face {
  font-family: test;
  src: url("font/字心坊猫的天空之城.ttf");
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 24px;
  font-family: test;
  color: #fff;
}

body{
  position: relative;
  background: url("images/pk8o1e.webp") no-repeat center center/cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body::before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.1);
  pointer-events: none;
}



/*输入框容器*/
.change-search{
  text-align: center;
}
.change-search i{
  cursor: pointer;
}
#change-baidu{
  color: #c7d2fe;
}
#change-google{
  color: #85FFBD;
  margin-left: 12px;
}

.search-input{
  width: 250px;
  height: 60px;
  background-color: transparent;
  color: #fff;
  border: 3px solid #96e6a1;
  border-radius: 15px;
  padding: 10px 50px 10px 30px;
  transition: all 1s ease;
}

.search-input:focus{
  outline: 0;
  width: 800px;
}
.search i{
  position: relative;
  color: #fff;
  font-size: 30px;
  left: -50px;
  cursor: pointer;
}

/*备忘录容器*/
.memorandum-container{
  margin-top: 30px;
  width: 1200px;
  height: 600px;
  display: flex;
  border: 5px solid #96e6a1;
}
.memorandum-container section{
  flex: 1;
  border: 0;
}


/*备忘录列表信息*/
.memorandum-list{
  padding: 40px 30px;
  overflow-y: auto;
}
.memorandum-list div{
  position: relative;
  padding: 0 30px;
  margin-bottom: 20px;
  display: flex;
  transition: transform 2s ease;
}
.memorandum-list div:hover{
  transform: scale(1.1);
}
.memorandum-list div:hover i{
  opacity: 1;
}

.memorandum-list div::before{
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #96e6a1;
}
.memorandum-list div::after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.2);
  border-radius: 10px;
  pointer-events: none;
}

.memorandum-list div i{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #96e6a1;
  cursor: pointer;
  opacity: 0;
  transition: all 1s ease;
}
.memorandum-list div i:hover{
  color: red;
}


/* 写备忘录信息 */
.add-memorandum{
  position: relative;
}
.add-memorandum::before{
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 5px;
  height: 80%;
  background-color: #96e6a1;
  border-radius: 2px;
  transform: translateY(-50%);
}
.add-memorandum textarea{
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  background-color: transparent;
  border: 0;
  font-size: 32px;
  font-weight: bold;
  color: #5a5e66;
}
.add-memorandum textarea:focus{
  outline: 0;
}



/* 滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 4px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.9);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #96e6a1;
  background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(227,227,227,0.5);
}

// script.js


// 存储相关
MEMORANDUM_KEY = 'my_memorandum'

function setMemorandum (memorandumList) {
  localStorage.setItem(MEMORANDUM_KEY, JSON.stringify(memorandumList))
}

function getMemorandum() {
  return JSON.parse(localStorage.getItem(MEMORANDUM_KEY))
}



// 操作列表
let memorandumListEl = document.querySelector('.memorandum-list')
let memorandumList = getMemorandum() || []

function changeMemorandumList () {
  memorandumListEl.innerHTML = ''

  if (memorandumList.length < 1) memorandumListEl.innerHTML = '暂无记录信息'

  memorandumList.forEach(memorandumItem => {
    memorandumNode = document.createElement('div')
    memorandumNode.innerHTML = `${memorandumItem.memorandum} <br> ${memorandumItem.time} <i class="iconfont icon-delete1" id="${memorandumItem.time}"></i>`
    memorandumListEl.appendChild(memorandumNode)
  })
  addDel()
}

changeMemorandumList(memorandumList)


// 添加备忘录信息
let memorandumTextEl = document.querySelector('.memorandum-text')
let memorandumText = null
memorandumTextEl.addEventListener('input', (event)=> {
   memorandumText = event.target.value
})
memorandumTextEl.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    memorandumList.push({
      memorandum: memorandumText.trim(),
      time: formatDateTime(new Date()).trim()
    })
    memorandumText = null
    event.target.value = null
    setMemorandum(memorandumList)
    changeMemorandumList(memorandumList)
  }
})



// 添加点击删除监听事件的方法
function addDel () {
  delIcons = document.querySelectorAll('.iconfont')
  delIcons.forEach(item => {
    item.addEventListener('click', (event) => {
      memorandumList = memorandumList.filter(memorandumObj => memorandumObj.time !== event.target.id)
      setMemorandum(memorandumList)
      changeMemorandumList(memorandumList)
    })
  })
}


// 格式化日期：yyyy-MM-dd hh:mm:ss
function formatDateTime(date) {
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minute = date.getMinutes()
  let second = date.getSeconds()
  if (month < 10) {
    month = `0${month}`
  }
  if (day < 10) {
    day = `0${day}`
  }
  hour = hour.toString().padStart(2, '0')
  minute = minute.toString().padStart(2, '0')
  second = second.toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}


// 监听输入框输入并打开新搜索页
searchInput = document.querySelector('.search-input')
let temp = 'baidu'

baiduItem = document.querySelector('#change-baidu')
baiduItem.addEventListener('click', () => {
  searchInput.placeholder = '百度开发者搜索'
  temp = 'baidu'
  searchInput.value = null
})

googleItem = document.querySelector('#change-google')
googleItem.addEventListener('click', () => {
  searchInput.placeholder = '谷歌搜索'
  temp = 'google'
  searchInput.value = null
})



searchInput.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    if (temp === 'baidu') {
      window.open(`https://kaifa.baidu.com/searchPage?wd=${event.target.value.trim()}&module=SEARCH`)
    } else if (temp === 'google') {
      window.open(`https://www.google.com.hk/search?q=${event.target.value.trim()}`)
    }
 }
})