Pesto Blocks
Chrome Extension ✦ Notion API ✦ Vibecoding
Your Notion database, surfaced right where you're typing.
timeline
19 hours
Role
Solo Designer & Developer
Industry
Productivity
TOOLS
Notion API, Figma MCP, Chrome Devtools MCP, Claude Code
GITHUB REPO Link
Background
The loop I couldn't escape
job hunting meant answering the same questions endlessly, and my best answers were already written, just stuck one tab away in notion.

Notion has a web clipper extension but that's great for pulling into the database, but what about surfacing info from the databases to the browser layer?
Background
The loop I couldn't escape
Job hunting meant answering the same questions endlessly, and my best answers were already written, just stuck one tab away in notion.

I started with a quick workflow improvement idea for my job hunt.
took some inspiration from password managers, some from Simplify and Job Hunt.io but those never fulfilled all my needs.
Updating them was a task!
I didn’t want to pay them for use especially when i’m job hunting
they kinda acted like pop ups on every page, annoyed me a little.
that’s why with copy paste, i wanted the users to feel like it’s there but also isn’t.
here’s the first sketch of the idea
i like how Cosmos detects media urls and displays the icon right on it, so the users don’t have to click on the extension icon in the toolbar. and it’s small enough.
same with password managers. i also like how password managers
auto expand when the user initiates typing a password.
identifies the input areas and displays the icon right on it, so the users don’t have to click on the extension icon in the toolbar. and it’s small enough and placed correctly. (doesn’t pull away the users from their workflow and doesn’t steal too much attention.)
other autofill tools like Jobright Autofill and Simplify fails to meet my requirements:
it’s tedious to create an account, fill profile details, add resume and constantly update them
sometimes you have to click on the extension on the right edge
sometimes it starts popping as soon as the page opens and i have to manually close it because it hinders the page content.
the autofill doesn’t include all questions, and thus helps answer only the limited ones. also, no option to keep track of the responses
but i wanted my entire database of the responses i’ve crafted so far, and i wanted the agency to edit them, and choose amongst the many versions of answers i’ve created.
figuring out the Notion database structure that i would potentially connect with the extension
did a little back and forth with Notion AI to generate the db structure and imported my existing set of interview questions into the db
i also wanted to eliminate the process of me going to notion to find an answer. i wanted it to surface it based on the question i’m answering. that could act as the exact answer i wanted to write or start with a boilerplate.
found the Highlights to Notion chrome extension where it connects to Notion db with API key
looked at how other developers built extensions with Notion API. i wanted the storage to be local so that the data doesn’t leave the user’s device.
deciding between answer options as separate columns or inside one column where options are logged in numbered bullets. chose numbered bullets because lets me have additional columns without having to scroll horizontally and possibly easier to parse by the extension? will test this
figuring out how to connect Notion and the extension so that the answers get logged somewhere and i can edit it too. since keeping a log of all the questions and answers i come across in the extension itself would be annoying.
found these resources to get started with Notion connection.
Settings → Connections → Develop or Manage Integrations. From there, create a new integration and it will give you an API key for the notion side.
birdeatsbug.com/blog/build-a-chrome-extension-in-next-js-and-notion-api
developers.notion.com/reference/page-property-values
crafting the details, took inspiration from Deep Lakhani’s portfolio piece and the or Emil’s Component from his web animations course to make the experience smooth.
i decided to nail the animations too for how the dropdown appears and goes away.
based on the prototype in Figma, i added specifications based on those designs basically telling claude which components to build exactly. positioning of the components, when they should appear, etc.
the users will have to add Notion’s API key. i wanted to make the onboarding easy enough so that users don’t have to dive deep into Notion’s documentation to learn how to create the API key.
Notion, given that i found this use case and made a chrome extension out of it, i think you’re sitting on a huge opportunity here for your web clipper, DM me if you’d like to hire me to hear more about what i think :)
well i used it for job hunt, but you can use it for any database, just make sure to add Question and Answer column for it to work. i’m curious what use cases you find for this extension.
what’s on the roadmap
ability to select column names to display options in the dropdown menu for autofill.
integrate Notion AI to auto generate answers based on your content in your notion workspace (still unsure about this)

based on the prototype in Figma, i added specifications based on those designs basically telling claude which components to build exactly. positioning of the components, when they should appear, etc.
the users will have to add Notion’s API key. i wanted to make the onboarding easy enough so that users don’t have to dive deep into Notion’s documentation to learn how to create the API key.
Notion, given that i found this use case and made a chrome extension out of it, i think you’re sitting on a huge opportunity here for your web clipper, DM me if you’d like to hire me to hear more about what i think :)
well i used it for job hunt, but you can use it for any database, just make sure to add Question and Answer column for it to work. i’m curious what use cases you find for this extension.
what’s on the roadmap
ability to select column names to display options in the dropdown menu for autofill.
integrate Notion AI to auto generate answers based on your content in your notion workspace (still unsure about this)
────୨ৎ────
