Chrome TodoList 插件开发指南

Posted on

当然有！如果你不想自己开发，可以直接安装现成的 Chrome 浏览器 TodoList 插件。以下是几个受欢迎的选择：

1. Todoist

✅ 特点：

  • 功能强大，支持任务分类、优先级、子任务
  • 支持跨设备同步（网页、手机、电脑）
  • 可与 Google 日历集成
  • 提供提醒功能

🔗 Chrome 商店链接

2. Microsoft To Do

✅ 特点：

  • 微软出品，界面简洁
  • 支持任务分组、提醒、重复任务
  • 可与 Outlook 任务同步
  • 支持 Windows、iOS、Android 多平台

🔗 Chrome 商店链接

3. Google Tasks

✅ 特点：

  • 谷歌官方出品，与 Gmail、Google 日历深度集成
  • 支持任务列表、截止日期
  • 数据存储在 Google 账户，多设备同步

🔗 Chrome 商店链接

4. Wunderlist（已停止更新，但可用）

✅ 特点：

  • 界面美观，操作简单
  • 支持共享任务列表
  • 已被 Microsoft To Do 收购，但仍可继续使用

🔗 Chrome 商店链接

5. Simple Todo

✅ 特点：

  • 极简风格，轻量级
  • 支持本地存储或 Google Drive 同步
  • 适合只需要简单任务管理的用户

🔗 Chrome 商店链接

如何安装？

  1. 打开 Chrome 浏览器，访问 Chrome 网上应用店
  2. 搜索上述插件名称（如 “Todoist”）
  3. 点击 “添加至 Chrome” 即可安装
  4. 安装后，点击浏览器右上角的扩展图标即可使用

推荐选择

  • 如果你需要强大的任务管理 → Todoist
  • 如果你用微软生态（Outlook/Windows） → Microsoft To Do
  • 如果你用 Gmail/Google 日历 → Google Tasks
  • 如果你喜欢极简风格 → Simple Todo

你可以先试用这几个，看看哪个最符合你的需求！🚀

时间: 2025-03-31T09:28:30

👤 用户

可以帮我写一个todolist的chrome浏览器的插件吗？点击插件图标就弹出一个todolist窗口

时间: 2025-03-31T08:49:57

🤖 DeepSeek (deepseek-chat)

Chrome 浏览器 TodoList 插件开发指南

下面是一个简单的 Chrome 浏览器 TodoList 插件的完整实现。这个插件会在点击浏览器工具栏图标时弹出一个包含 TodoList 的窗口。

文件结构

首先创建一个文件夹（例如 todo-list-extension），里面包含以下文件：

1
2
3
4
5
6
todo-list-extension/
├── manifest.json          # 插件配置文件
├── popup.html             # 弹出窗口的HTML
├── popup.js               # 弹出窗口的JavaScript
├── popup.css              # 弹出窗口的样式
└── icon.png               # 插件图标(16x16或32x32像素)

1. manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "manifest_version": 3,
  "name": "Todo List",
  "version": "1.0",
  "description": "A simple todo list extension",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["storage"],
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

2. popup.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="todo-container">
    <h1>Todo List</h1>
    <div class="input-container">
      <input type="text" id="todo-input" placeholder="Add a new task...">
      <button id="add-btn">Add</button>
    </div>
    <ul id="todo-list"></ul>
  </div>
  <script src="popup.js"></script>
</body>
</html>

3. popup.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
body {
  width: 300px;
  height: 400px;
  margin: 0;
  padding: 10px;
  font-family: Arial, sans-serif;
}

.todo-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

h1 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}

.input-container {
  display: flex;
  margin-bottom: 10px;
}

#todo-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

#add-btn {
  padding: 8px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#add-btn:hover {
  background-color: #45a049;
}

#todo-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1;
}

#todo-list li {
  padding: 8px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#todo-list li:last-child {
  border-bottom: none;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

4. popup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
document.addEventListener('DOMContentLoaded', function() {
  const todoInput = document.getElementById('todo-input');
  const addBtn = document.getElementById('add-btn');
  const todoList = document.getElementById('todo-list');
  
  // 从存储中加载待办事项
  chrome.storage.sync.get(['todos'], function(result) {
    const todos = result.todos || [];
    renderTodoList(todos);
  });
  
  // 添加待办事项
  addBtn.addEventListener('click', addTodo);
  todoInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      addTodo();
    }
  });
  
  function addTodo() {
    const task = todoInput.value.trim();
    if (task) {
      chrome.storage.sync.get(['todos'], function(result) {
        const todos = result.todos || [];
        todos.push({ text: task, completed: false });
        chrome.storage.sync.set({ todos: todos }, function() {
          renderTodoList(todos);
          todoInput.value = '';
        });
      });
    }
  }
  
  function renderTodoList(todos) {
    todoList.innerHTML = '';
    todos.forEach((todo, index) => {
      const li = document.createElement('li');
      
      const taskSpan = document.createElement('span');
      taskSpan.textContent = todo.text;
      if (todo.completed) {
        taskSpan.classList.add('completed');
      }
      
      taskSpan.addEventListener('click', function() {
        toggleTodoCompletion(index);
      });
      
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.classList.add('delete-btn');
      deleteBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        deleteTodo(index);
      });
      
      li.appendChild(taskSpan);
      li.appendChild(deleteBtn);
      todoList.appendChild(li);
    });
  }
  
  function toggleTodoCompletion(index) {
    chrome.storage.sync.get(['todos'], function(result) {
      const todos = result.todos || [];
      todos[index].completed = !todos[index].completed;
      chrome.storage.sync.set({ todos: todos }, function() {
        renderTodoList(todos);
      });
    });
  }
  
  function deleteTodo(index) {
    chrome.storage.sync.get(['todos'], function(result) {
      const todos = result.todos || [];
      todos.splice(index, 1);
      chrome.storage.sync.set({ todos: todos }, function() {
        renderTodoList(todos);
      });
    });
  }
});

5. 图标

你可以创建一个简单的图标文件 icon.png（16x16, 32x32, 48x48 和 128x128 像素），或者使用任何你喜欢的图标。

安装和使用

  1. 在 Chrome 浏览器中打开 chrome://extensions/
  2. 开启右上角的”开发者模式”
  3. 点击”加载已解压的扩展程序”
  4. 选择你创建的 todo-list-extension 文件夹
  5. 插件图标将出现在浏览器工具栏中，点击即可使用 TodoList

功能说明

  • 添加任务：在输入框中输入任务内容，点击”Add”或按Enter键
  • 标记完成：点击任务文本可以切换完成状态
  • 删除任务：点击任务右侧的”Delete”按钮
  • 数据持久化：使用 Chrome 的存储 API 保存任务列表

你可以根据需要进一步扩展这个插件，比如添加分类、设置优先级、添加截止日期等功能。

时间: 2025-03-31T08:49:57

👤 用户

有没有现成的todolist插件？

时间: 2025-03-31T09:28:30

🤖 DeepSeek (deepseek-chat)

当然有！如果你不想自己开发，可以直接安装现成的 Chrome 浏览器 TodoList 插件。以下是几个受欢迎的选择：

1. Todoist

✅ 特点：

  • 功能强大，支持任务分类、优先级、子任务
  • 支持跨设备同步（网页、手机、电脑）
  • 可与 Google 日历集成
  • 提供提醒功能

🔗 Chrome 商店链接

2. Microsoft To Do

✅ 特点：

  • 微软出品，界面简洁
  • 支持任务分组、提醒、重复任务
  • 可与 Outlook 任务同步
  • 支持 Windows、iOS、Android 多平台

🔗 Chrome 商店链接

3. Google Tasks

✅ 特点：

  • 谷歌官方出品，与 Gmail、Google 日历深度集成
  • 支持任务列表、截止日期
  • 数据存储在 Google 账户，多设备同步

🔗 Chrome 商店链接

4. Wunderlist（已停止更新，但可用）

✅ 特点：

  • 界面美观，操作简单
  • 支持共享任务列表
  • 已被 Microsoft To Do 收购，但仍可继续使用

🔗 Chrome 商店链接

5. Simple Todo

✅ 特点：

  • 极简风格，轻量级
  • 支持本地存储或 Google Drive 同步
  • 适合只需要简单任务管理的用户

🔗 Chrome 商店链接

如何安装？

  1. 打开 Chrome 浏览器，访问 Chrome 网上应用店
  2. 搜索上述插件名称（如 “Todoist”）
  3. 点击 “添加至 Chrome” 即可安装
  4. 安装后，点击浏览器右上角的扩展图标即可使用

推荐选择

  • 如果你需要强大的任务管理 → Todoist
  • 如果你用微软生态（Outlook/Windows） → Microsoft To Do
  • 如果你用 Gmail/Google 日历 → Google Tasks
  • 如果你喜欢极简风格 → Simple Todo

你可以先试用这几个，看看哪个最符合你的需求！🚀

时间: 2025-03-31T09:28:30

对话统计

  • 消息总数: 4 条
  • 处理状态: 成功转换