第一个产品

History Hive

一款用于管理浏览器历史记录的插件

背景—想法的萌生：

作为我尝试开发的第一个产品,最初我并没有明确的方向。经过在Reddit和Product Hunt等网站上的调研,我发现大多数产品都是AI赋能的工具。考虑到我的技术基础,即使使用Cursor等AI辅助编程工具,开发这类产品也需要相当长的时间。

因此,我决定从一个小型工具入手。我的目光转向了浏览器工具,特别是基于我正在使用的Chrome浏览器。

最初的想法是开发一个标签管理器,这源于以下痛点:

• 浏览器的书签栏容量有限
• 书签过多时难以快速找到所需网页
• 即使使用文件夹功能,管理大量书签仍然不便

我将目标用户定位为Chrome浏览器用户,并在Chrome Web Store进行了相关调研。然而,我发现已经存在许多优秀的书签管理工具,而且Chrome最新版本的侧边栏书签管理器也提供了更直观的管理方式。

于是,我将注意力转向了浏览器历史记录管理。这个想法来自于我的日常使用体验:

• 经常为查找之前关闭的网页而头疼
• 当浏览记录较多时,只能大致记得在某个时间范围内打开过特定网页
• 需要在浏览器历史记录中手动筛选时间范围来查找

基于这些问题,我构思了一个工具,它可以:

1. 自动匹配特定站点的所有相关浏览记录
2. 按时间节点整理并呈现记录列表

例如,在任意Google网址下打开这个工具,它会自动匹配所有与Google相关的浏览记录,并按时间整理成列表,如”2024-07-22 14:00”这个节点下所有的Google站点浏览记录。

这样的工具将大大简化用户查找特定浏览记录的过程。确定了这个思路后,我决定着手开发这个名为”History Hive”的Chrome插件。

---

开发过程

为了快速构建MVP，我聚焦开发实现主要功能，因此开发框架上我选择了自己擅长的vue.js框架,使用最新的chrome V3开发

我使用 vue-cli-plugin-chrome-extension-cli作为快速构建基于vue的chrome插件脚手架工具

1. 创建vue项目

vue create history-hive

2. 使用脚手架构建chrome extension项目

cd history-hive
vue add chrome-extension-cli

在终端按具体情况填入插件名称、描述、版本号等基础配置就构建��成了

3. 进入项目后，开始正式开发

• 整体布局的规划
  对于工具整体布局，我更喜欢侧边栏的样式，刚好Google更新了侧边栏弹出的配置
  在manifest.development.json文件里加入配置：

  "action":{
      "default_title": "Click to open sidebar"
  },

  然后在background.js后台文件中加入以下代码：

  chrome.sidePanel.setPanelBehavior({openPanelOnActionClick:true})

  表示点击扩展图标不是popup的弹出形式而是侧边栏弹出

• 确定工具需要的权限
  在chrome插件开发中需要配置好工具调用的浏览器功能权限
  该工具会使用以下几个浏览器接口：

  • 查找浏览记录
  • 打开新网页
  • 查询固定站点下的浏览记录
  • 打开侧边栏

  因此我们在manifest.json文件中配置以下权限：

  "host_permissions": [
      "http://*/*",
      "https://*/*"
  ],
  "permissions": [
      "activeTab",
      "history",
      "sidePanel"
  ]

• 查看Chrome V3文档确定需要使用的API

  1. 在切换标签页时要动态更新站点浏览记录，因此需要

     chrome.tabs.onActivated.addListener() //用来监听标签页切换

  2. 标签页切换后，使用

     chrome.tabs.get()

     取得当前标签页的url并搜索该url下历史记录，并根据时间排序

     chrome.history.search({text: host,maxResults: 1000},()=>{}) //search函数的第二个参数为回调函数用于处理结果

  3. 处理完数据后将处理完的根据时间排列的数据通过

     chrome.runtime.sendMessage({action: "updateHistory", data: treeData});//发送信息，让view页面接收

  4. ./view/popup.vue:

     chrome.runtime.onMessage.addListener((mess) => {
      if (mess.action === "updateHistory") {
      //更新treeData
      this.treeData = mess.data
      }
     });

  5. 随后在页面上进行渲染：

     <a-directory-tree
     :tree-data="treeData"
     @click="handleClick")
     </a-directory-tree>

  6. 加入点击历史记录事件：

     openUrl(url){
     	chrome.tabs.create({url:url})
     },
     handleClick(e,node){
     	if(!node.url) return
     	this.openUrl(node.url)
     }

  这样则完成了一个最简单的获取历史记录并访问的功能了！