html
我还在考虑这里要放什么东西。。。
- 修改数据库名称，更新时会自动迁移数据
- 增加导入和导出文件的功能，参见指南页
- 调整了一下样式
- 修复单词表无法按时间排序的问题
- 修复许多报错
- 上一个更新小小的翻车了。。。
- 修复在某些特殊情况下不显示卡片的问题
- 修复和某些插件冲突导致不显示卡片的问题
- 新增鼠标点击非卡片区域关闭卡片的功能
- 尝试删除z-index设置
- 在使用指南页增加意见反馈渠道
- 首次更新！
- 重要！原先使用
S键获取单词信息，为了防止按键冲突，新版本将快捷键修改为CTRL+ALT+S - 增加了翻译英文句子的功能，选中文字后使用快捷键
CTRL+ALT+T，将会在左上角显示译文卡片 - 在单词卡片以及搜索结果中增加删除功能
- 修复bug、调整样式
- 竖线横跨了整个窗口
- 小圆点没有和文字对齐
- 小圆点被竖线覆盖了
- 标记单词：
- 双击 英文单词
- 选中 单词按
CTRL+ALT+S键
-
翻译句子：选中一段英文按
CTRL+ALT+T键,会在左上角显示译文卡片 -
扩展设置：这里做成了单词本页面，在这里可以添加DeepSeek API key，可以删除单词，可以使用浏览器自带的搜索单词，点击表头可以对单词表进行排序
-
popup页面：点击扩展图标或按
CTRL+M组合键，可以在搜索框中快速查找已标记的单词或者手动录入单词，可以导入导出单词。 -
单词的导入和导出：导出没什么好说的，直接点击按钮即可
文件格式：name;translate;usphone;suggestion
name为必填，其余信息选填，当没有translate信息时，会自动使用大模型获取。
这是一篇日志。
1.0.4
1.0.3
1.0.2：
使用基本的html、css来实现一个简洁的时间轴
实现方法有很多种，这里只给出此博客所用的方法。
以下图为例，时间轴由大圆、小圆和淡淡的竖线组成
HTML结构
timeline
::before
year
marker //圆点
//此处输入自定义文字
posts
post-link
marker //圆点
content
//此处输入自定义文字圆形
圆形由svg实现：
<svg
class="marker"
//定义css类名
xmlns="http://www.w3.org/2000/svg"
//声明命名空间
width="12"
height="12"
//图形长宽
>
<circle cx="6" cy="6" r="6"></circle>
//circle是一个svg的圆形元素
//cx，cy：圆心的x，y坐标
//r:半径
</svg>数轴
数轴使用了伪元素，伪元素属于css，可以在一个元素中创建拥有特殊性质的元素，伪元素的一种典型的用法就是生成线条
.timeline::before {
content: "";
//必须设置content，否则元素不会显示
position: absolute;
//定位上下文
bottom: -20px;
//底面移动-20px，向下微调20px
height: 100%;
//长度为整个元素块
width: 2px;
//宽度
background-color: rgb(240, 240, 240);
//设置线条颜色
}至此，一个简单的时间轴的骨架就完成了。
目前这个时间轴有以下几点问题
以下是示例代码
//1.
.timeline{
//这是因为将伪元素的position设置了absolute，默认会向上查找最近的static定位的元素
//我们可以将timeline元素作为定位参考
position:relative;
}
//2.
.post-link {
display: flex;
//可以让圆点和文字在同一行
align-items: baseline;
//这种对齐方式可以稍微让圆点回正一点
}
.post-link .marker {
position: relative;
//建立一个新的层叠上下文，让圆点覆盖竖线
left: -2px;
bottom: -2px;
//对圆点位置进行微调
}至此，这个时间轴就建好了，剩下的就是对其他元素进行样式优化就好了
这是一篇指南。
安装方式：谷歌商店
简介：在任意网站上翻译并标记单词，加入单词本，首次使用需要输入 DeepSeek API key，获取中文释义、词性、音标以及记忆建议。
标记的单词会添加 红色波浪下划线，鼠标移动到划线范围会自动弹出单词卡片
diverse;不同的，多种多样的;/daɪˈvɜːrs/;词根 di-（分开）+ vers（转）+ e..