Save LinkedIn → Notion: Zero-Backend CRM Helper


Privacy Policy
Save LinkedIn → Notion is built strictly for personal use and is designed with privacy first. The extension does not use any backend server, does not log analytics, and does not send or sell any data to third parties.
Your Notion Internal Integration Token and Database ID are stored only in chrome.storage.local on your device. These values are used exclusively to authenticate direct requests from your browser to Notion's official API. No external service ever sees your keys.
The extension reads website content only on LinkedIn profile pages and only when you explicitly open the popup and click save. The scraped data (name, headline, company, school, profile URL) is sent directly to your own Notion database. There is no third-party storage, no remote logging, and no tracking.
At any time, you can clear your stored credentials from the settings side panel. This immediately removes the keys from local storage and disables all Notion API calls until you reconfigure the extension.
Inspiration
Networking is already painful enough without a little automation. It is hard to keep track of people I have met, want to talk to, or have talked to without some sort of database. Being a Notion user, I immediately thought about starting a database. However, that means manually copying, switching tabs, and pasting over and over again.
I wanted a tool that felt lightweight and trustworthy: no backend, no external accounts, and no risk of my Notion keys leaving my machine. That turned into Save LinkedIn → Notion, a small but powerful extension that acts as my personal CRM helper.
What It Does
The extension detects when I'm on a LinkedIn profile URL (linkedin.com/in/...) and scrapes the visible profile fields into a friendly popup form. I can review and edit the values, add notes, and then save the contact directly into a Notion database as a new row.
- Scrapes name, headline, current company, school, and profile URL.
- Lets me edit all fields and add custom notes before creating the Notion entry.
- Checks for existing contacts with the same LinkedIn URL to avoid duplicates.
- Uses my Notion API key directly from the browser, with no intermediary server.
How It Works
LinkedIn renders much of its profile UI inside a same-origin iframe at /preload/, so naïve scraping from the top-level document fails. I implemented logic to locate the correct iframe, select the inner document, and then extract the profile name and metadata from that nested DOM.
The extension uses a background service worker to talk to the Notion API. The popup sends messages with the scraped profile data, and the background script either queries the database for an existing page or creates a new one with the appropriate properties.
All configuration (Notion API key and database ID) is handled through a Chrome side panel UI. The panel shows masked fields with an eye toggle to reveal the values, plus a "Clear credentials" action to remove them from storage.
Challenges
- Handling LinkedIn's dynamic DOM, nested iframes, and auto-generated class names while keeping selectors robust.
- Designing the extension to work entirely without a backend while still integrating cleanly with Notion's API.
- Coordinating background scripts, content scripts, the popup, and the side panel with message passing and async flows.
- Building a React-based UI pipeline (Vite + TypeScript) that outputs the right bundles for Chrome's Manifest V3.
Impact & What I Learned
- Turned a repetitive manual workflow into a one-click action, making it much easier for me to maintain a clean networking CRM in Notion.
- Deepened my understanding of Chrome extension architecture, including background service workers, content scripts, and side panels.
- Gained experience working directly with the Notion API and designing data models that map cleanly from scraped UI into structured properties.
- Practiced building privacy-first tools where data never leaves the user's device except for the API calls they explicitly trigger.
Tech Stack
- Extension: Chrome Manifest V3, background service worker, content scripts, side panel
- Frontend: React, TypeScript, Vite, CSS Modules
- APIs: Notion REST API, Chrome extension APIs (storage, tabs, scripting, sidePanel)
- Tooling: npm, Git, local-only development and testing (no backend)