为了更好的浏览体验,请不要在本页面禁用 Javascript 🙂

NotionPlus 使用文档

real demo
简介
我自己维护了一张书单表格,每次添加新书籍时,我都要去搜索书籍封面下载,然后上传到表格中。这样重复的操作让我厌烦,于是便有了这个项目。
NotionPlus 是一个 Chrome 扩展。安装此扩展之后,你可以通过编程操作 Notion Database 中的数据。在一些需要重复操作的地方,编写任务代码,能极大地提高工作效率。
此扩展支持使用 Python 和 JavaScript 编写任务代码。使用 Python 编写任务代码需要配置服务端。使用 JavaScript 编写任务代码,则无需配置服务端。
NotionPlus 2种语言的实现对比
Search
语言
底层依赖
需要服务端
访问文件系统
跨域请求
Python
notion-py
JavaScript
notabase
快速上手
安装浏览器扩展
快速体验
安装浏览器扩展后,F12 打开浏览器控制台,刷新页面(保证扩展加载成功)
NontionPlus has been activated 🎉
Plain Text
看到上述字样后,则表明扩展已经加载成功。如下图所示,点击 top 切换到 NotionPlus 扩展。
然后便可以在控制台中访问 nb (notabse 实例) 变量。通过 nb 便可以操作 Notion 中的数据了
具体操作可以参见下面这个演示视频
查看 Notabase 文档了解更多
配置任务表格
你可以在控制台中,使用 JS 处理一些一次性的任务。如果你的任务是重复的、通用的,你可以编写一些可复用的任务代码。
我们需要一个表格来存储任务代码,建立任意一张表格。如下图所示
打开 NotionPlus 选项,配置任务表格地址。
在 actionTableUrl 处填上刚才建立的表格地址。
编写任务
NotionPlus 使用默认的 Name 列作任务名称。回到刚才的任务表格,新建一条记录,为任务命名。
然后添加一个代码块,可选语言是 JavaScript 或者 Python 。NotionPlus 会根据代码块的语言,来确定执行方案。
触发任务
在需要触发任务的表格中,新建一列 checkbox,命名为 #任务名称
如果执行上图中的的任务。当我们点击 checkbox (图中绿色区域)时,会触发任务表格中名为change_name的任务,被点击行的 name 字段就会变成 change from js client。
部署后端服务 (可选项)
只有使用 python 编写任务代码才需要部署服务端。
clone 代码
git clone https://github.com/mayneyao/NotionPlus.git
Shell
安装依赖
pipenv install
Shell
配置
cp config.sample.ini config.ini # 修改 config.ini 文件中的配置
Shell
参数说明
notion
token
打开 notion 任意页面,保证你已经登录。
打开浏览器调试工具,在 cookies 中获取 token_v2
action_table_url
用于动态任务的 action 表格地址(浏览器可访问地址)
timezone
默认填写 Asia/Shanghai 即可
security
auth_token
自己瞎想一个别人猜不到的密码,保证通信安全。
运行
./run.sh
Python
默认运行在 5000 端口
配置扩展
点击浏览器上的 NotionPlus 扩展图标,打开选项页配置服务器参数,配置完成后保存。
本地运行时服务器接口默认填写 http://127.0.0.1:5000
安全码就是上面你在 服务端配置的见不得人的 auth_token
⚠️ 当服务端部署在远程服务器上时,需要上 https
深入使用
当你使用 Python 编写任务代码时,任务在服务器端执行。如何使用 Python 编写任务代码,你应该参考 notion-py 的使用文档。
当你使用 JS 编写任务代码时,任务在浏览器客户端执行。如何使用 JS 编写任务代码,你应该参考 notabase 的使用文档。
你可以在任务代码中使用,下表中的内置对象和方法。
内置对象和方法
Search
Name
Type
Desc
HowToUse
See
Version
nb
对象
Notabase 实例
nb.fetch("表格链接") 获取表格数据
https://gine.me/posts/fdf29d789de24d6197fc5d76310c0da6#8ec39c6a-149c-4998-9f27-e0c03f998853
obj
对象
指代当前表格中被点击的记录
obj.Name 访问当前记录的 Name 属性
openWrapper
方法
显示 ID 为 np-g 的 div,用于展示图表
openWrapper() 显示空白的幕布,g2 和 echarts 的图表也必须挂载在 ID 为 np-g 的 div 上。 openWrapper(300,400) 显示幕布,设置np-g 宽高。使用 echarts 时需要指定容器大小。
1.9.6+
G2
对象
使用 AntV g2 绘制图表
参见官方文档
https://antv.alipay.com/zh-cn/g2/3.x/index.html
1.9.6+
echarts
对象
使用 echarts 绘制图表
参见官方文档
https://www.echartsjs.com/zh/index.html
1.9.7+
使用案例
一些简单的使用例子。了解这个工具是如何工作的,以及它能做哪些事情。
表格数据迁移,合并。
待完善
Build with gatsby,react,material-ui and Copyright 2019 Mayne Powered by gine-blog