一键将Web页面保存至Anki

title: 一键将Web页面保存至Anki
date: 2022-12-02 21:38
tags: [Anki,Anki-Connect,油猴]

文章目录

一、前言
二、步骤
- 2.1 通过调用Anki-Connect插件来向Anki添加卡片
- 2.2 向页面注入一个功能按钮，并绑定功能
参考
更新

一、前言

发布完博客后会添加至Anki协助自己强化记忆，但是一次次的重复动作让我觉得厌烦，因此有了写这个脚本的想法：在Web页面添加一个按钮，用来触发向Anki添加卡片的动作。该脚本发布在Anki-Connect-addNotes 可通过油猴安装。

二、步骤

2.1 通过调用Anki-Connect插件来向Anki添加卡片

function addNotes(){// mdUrl就是添加至Anki的文本var mdUrl = ['<a href="',document.URL,'">',document.title,'</a>'].join("");// 调用Anki-Connect的接口所需的参数var data = JSON.stringify({"action": "addNotes","version": 6,"params": {"notes": [{"deckName": "Default","modelName": "Basic","fields": {"Front": mdUrl},"tags": []}]}});// 使用GM_xmlhttpRequest是为了解决跨域问题GM_xmlhttpRequest({method: "post",// 本机的8765接口是anki-connect的默认端口url: 'http://127.0.0.1:8765',data: data,headers: { "Content-Type":"application/json" },onload: function(r) {console.log("添加至Anki成功！",r);}});
}

2.2 向页面注入一个功能按钮，并绑定功能

function addButton(){let Container = document.createElement('div');Container.id = "add-notes-container";Container.style.position="fixed"Container.style.left="0"Container.style.top="0"Container.style['z-index']="999999"Container.innerHTML =`<button id="addNotes" style="position:absolute; left:30px; top:20px">
Add2Anki
</button>
`document.body.appendChild(Container);let button = document.getElementById("addNotes");button.onclick=addNotes;
}

参考

Anki-Connect-addNotes
GitHub - FooSoft/anki-connect: Anki plugin to expose a remote API for creating flash cards.

更新

前往一键将Web页面保存至Anki | 张鹏帅的官方网站查看更新。

一键将Web页面保存至Anki相关推荐

（转）基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作...
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
web页面播放语音提示保存成功
web页面播放语音提示保存成功 <!DOCTYPE html> <html><head><title>tishiyin.html</title&g ...
工作簿无法保存html,将Excel工作簿保存为交互式Web页面文件的方法
在完成Excel数据的处理后,用户可以将工作簿保存为Web页面文件,以便任何具有Web浏览器的用户都可以通过浏览器看到这些数据.下面介绍将Excel工作簿保存为交互式Web页面文件的具体操作方法. 1 ...
微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送
在做一个微信的微网站中的一个便民服务电话功能的应用 ,用到移动web页面中列出的电话号码 ,点击需要实现调用通讯录, 网页一键拨号的拨打电话功能 . 如果需要在移动浏览器中实现拨打电话,发送e ...
【服务器】Linux一键安装web环境全攻略（阿里云服务器）（Centos ）
Centos 系统下的全能Web环境一键安装程序热点 Round Serv 是Centos 系统下的全能Web环境一键安装程序集成php jsp .net asp cgi python环境.和My ...
asp.net怎样一键生成静态页面，实例说明
为了利于SEO优化,最近在项目中需要把某些页面转化为静态页面,现把相关思路整理如下. 一,先建立一个模版页为了适应实际应用功能,一个网站往往需要最终用户自定义静态化的模版,本文对这方面不作过多描述, ...
像数据分析一样写 Web 页面，这个 Python 库做到了！
作者|刘早起来源|早起Python 提起用 Python 写一个 web 页面,总是会想起Django/Flask等这样的大家伙. 他们确实好用,但就是流程繁琐,比如有时就想写一个简单的页面,比如问 ...
用服务器安装nginx部署web页面
作为一个野生的iOSer,技术栈好像还没到这么远,平时也用不太到,主要最自学的几个方面碰巧联系在了一起,因为爱好吧,就研究了下.对了还有戴铭做的那个iOS高阶晋级网课,我也打算订阅一份,并且每章带有我 ...