Build a Chrome Extension in Next.js and Notion API

What is Next.js

Next.js is a React.js framework for building server-side rendered React.js applications. It has a bunch of features with a good developer experience and supports TypeScript out of the box. This is tutorial will be helpful even if you want to use React.js as it is instead of using Next.js.

What is Notion

According to Notion, it is a way of organizing docs, wikis, tasks in a single place. Basically, Notion is a sort of database that allows you to view your data in multiple views like a kanban board, table, timeline, calendar, gallery, list to showcase your data but with a nice visual interface.

For this tutorial, you’ll set up a database table in Notion to store your web links. To connect with Notion, you can use their API for public use.

Prerequisites

To follow along with this tutorial, you’ll need the following things:

• Node.js - This tutorial uses 14.18.2
• A Notion account - If you don’t have one, click here to create a free account.

The entire source code for this tutorial is available in this GitHub repository.

Creating database in Notion

The first thing you need to do is to create a Notion database.

First, in your Notion workspace, create a new page and give it the title - Bookmarks.

Next, click inside the text area of the new page and type /table full. Select Table - Full page in the modal that appears.

Next, give the table the same title as you gave to the page (”Bookmarks”).

Every database table in Notion has fields, which are shown as columns. For the Bookmarks table, add the following columns by clicking the plus sign (+) icon in the header row of the table:

1. Title (property type: Text) - for storing the title of the weblink
2. URL (property type: URL) - for storing the weblink’s URL
3. Tags (property type: Select) - for storing the tags related to weblink
4. Notes (property type: Text) - for storing any additional notes
5. Added On (property type: Created time ) - for an auto fillable date when you add a new entry

Getting Notion API token

To use the Notion API, you’ll need to create a Notion integration in order to obtain a Notion API token.

To do so, first, visit your integrations page and click on the New integration button in the left sidebar.

Next, configure the basic information about the integration and name it “Notion Bookmark”. Select the appropriate workspace and click Submit.

‍

Once the integration is complete, you will be presented with a secret Internal Integration API token. Copy it somewhere safe as you’ll need it later while writing the code.

Sharing database with integration

By default, Notion integrations don't have access to pages or databases in the workspace. You need to share the specific page or database that you want to connect to the Notion integration.

To do so, first, open the Bookmarks database in your Notion workspace and click on the Share link in the upper right corner. A modal will appear. Use the search field to the left of the Invite button to find the “Notion Bookmark” integration, and click Invite.

‍

That’s it. You have set up your Notion database and you can now add data to it with the help of the Notion API.

Obtaining Notion database ID

To add entries to your Bookmarks database, you need its database ID.

If your Notion database is within a workspace, the URL structure of the database page may look like this: *https://www.notion.so/{workspace_name}/{database_id}?v={view_id}*

If your Notion database is not within a workspace, or if it simply doesn’t match the URL shown above, it probably looks like this: *https://www.notion.so/{database_id}?v={view_id}*

Depending upon your URL structure, extract the 36-character-long {database_id} portion from the URL. Keep it somewhere safe as you will need it to connect with this particular database through Notion API.

In case you get stuck somewhere, make sure to check out Notion’s documentation page for working with databases for more information.

Setting up Next.js project

Now that you have completely set up your Notion, it's time to build the Next.js frontend app.

First, open up your terminal, navigate to a path of your choice, and execute the following command to create a Next.js project:

npx create-next-app@latest

On the terminal, when you are asked about the project‘s name, set it to notion-bookmark. Next, it will install all the NPM dependencies.

Finally, after the installation is complete, navigate into the notion-bookmark directory and start the Next.js development server by running the following commands in your terminal:

cd notion-bookmark
npm run dev

This will start the development server on port 3000 and take you to localhost:3000. The first view of the Next.js website will look like this:

Setting up development environment

There are a couple of things you need to configure for building Chrome extension in Next.js,

First, you need to install the following packages:

• @notionhq/client - This package is the Javascript SDK for Notion API.
• npm-watch - This package allows you to run scripts from package.json when the specified files change.

Shut down the Next.js development server by pressing Control-C in your terminal and then run the following commands to install the NPM dependencies:

npm install @notionhq/client
npm install --save-dev npm-watch

Once the installation is complete, next, open the package.json and add the following scripts to the scripts property:

"scripts": {
  ...
  "dev": "npm-watch",
  "lint:build": "mv out/_next out/assets && sed -i 's/\\\\/_next/\\\\/assets/g' out/**.html",
  "build": "next build && next export && npm run lint:build",
}

In the above configuration:
1. dev-extension is used to run the npm-watch.
2. Since for some reason, Chrome extensions can’t have an underscore in their paths, the lint:build script renames the paths in your build files.
3. The build script is the final script you need to run to build the Chrome extension for production. This script is run by the npm-watch. This prevents you from running the build script, again and again, and makes sure that the build script runs automatically when the files change.

Next, add the following configuration for npm-watch to the package.json:

{
  ...
  "watch": {
    "build": {
      "patterns": [
        "styles/**",
        "pages/**",
        "public/**",
        "helpers/**",
        "next.config.js"
      ],
      "ignore": [
        "out",
        "node_modules",
        ".next",
        ".vscode"
      ],
      "extensions": [
        "js",
        "json"
      ]
    }
  }
}

The above configuration tells npm-watch to run the build script whenever the files matching with the patterns and extensions array change.

Configuring Chrome extension settings

In the public directory, create an inject.js and a manifest.json file. Leave the inject.js file empty and add the following configuration to manifest.json file:

{
  "manifest_version": 3,
  "name": "Notion Bookmarks",
  "short_name": "notion-bookmark",
  "version": "1.0.0",
  "description": "Store Links to Notion",
  "icons": {
    "16": "/icons/icon-16.png",
    "32": "/icons/icon-32.png",
    "64": "/icons/icon-64.png",
    "128": "/icons/icon-128.png"
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["inject.js"]
    }
  ],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "index.html"
  }
}

To know more about the above properties and keys, make sure to check out Google’s official documentation for Chrome extensions.

Finally, run the following command to build and export your Chrome extension for the first time:

npm run build

Next, you need to register your extension within Google Chrome.

Registering Chrome extension

First, visit Chrome Extensions by visiting chrome://extensions in the Chrome browser.

Next, turn on the Developer mode.

Next, click on Load unpacked and select the path that references to the out directory in your project directory (notion-bookmark).

If your extension loads successfully, it’ll be added under the Chrome extensions and in the chrome extensions bar.

Finally, click the extension icon in the extension bar and you’ll get the Next.js default home page in your extension.

Saving weblinks to Notion

Now that your extension is set up, next, you need to write code to collect and save web links to the Bookmarks database.

First, at the project’s root, create an .env file and the following environment variables to it:

NOTION_DATABASE_ID=<your-notion-database-id>
NOTION_API_TOKEN=<your-notion-api-token>

Replace the <your-notion-database-id> and <your-notion-api-token> with your respective values.

Next, open the next.config.js file and add the following two environment variables to the env property:

module.exports = {
  ...
  env: {
    NEXT_PUBLIC_NOTION_API_TOKEN: process.env.NOTION_API_TOKEN,
    NEXT_PUBLIC_NOTION_DATABASE_ID: process.env.NOTION_DATABASE_ID,
  },
};

In the above config, you have specified the NEXT_PUBLIC_NOTION_API_TOKEN and NEXT_PUBLIC_NOTION_DATABASE_ID. It is important to prefix NEXT_PUBLIC to your environment variables so that they can be used on the client-side.

Building Chrome extension’s UI

The UI for your Chrome extension basically needs a form to collect the data from the user and a button to save the form data to the Notion database.

First, in the pages directory, replace the code in index.js file with the following code:

// 1
import { Client } from '@notionhq/client'
import { useEffect, useState } from 'react'

// 2
export default function Home() {
  // 3
  const [pageData, setPageData] = useState({})
  const [isSaving, setIsSaving] = useState(false)
  const [isSaved, setIsSaved] = useState(false)

  async function saveBookmarkToNotion(bookmark) {
    // todo
  }

  async function handleSubmit(e) {
    // todo
  }

  // 4
  return (
    <div>
      <div>
        <h1>Save to Notion Bookmarks</h1>
      </div>
      <div>
        {isSaved ? (
          <span>Saved</span>
        ) : (
          <form onSubmit={handleSubmit}>
            <div>
              <label>Title</label>
              <input name="title" type="text" defaultValue={pageData.title} title={pageData.title} required />
            </div>
            <div>
              <label>URL</label>
              <input name="url" type="url" defaultValue={pageData.url} title={pageData.url} required />
            </div>
            <div>
              <label>Languages</label>
              <input name="languages" type="text" />
              <small>Separate Languages with Commas</small>
            </div>
            <div>
              <label>Tags</label>
              <input name="tags" type="text" />
              <small>Separate Tags with Commas</small>
            </div>
            <div>
              <label>Notes</label>
              <input name="notes" as="textarea" rows={3} />
            </div>
            <div>
              <button type="submit" disabled={isSaving}>
                {isSaving ? <span>Saving</span> : <span>Save</span>}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}

In the above code:

1. You import the required NPM packages.
2. You export a React functional component, Home.
3. You initialize the state variables for the components using the useState hooks.
4. You return the UI for the Home component.

Note: We have skipped the styling part of the Chrome extension because we believe that it is important for us to help you understand the functionality as you can style the extension per your own preference.‍

Next, add the following code just before the return method of the Home component:

useEffect(() => {
  // 1
  chrome.tabs &&
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      // 2
      const url = tabs[0].url
      const title = tabs[0].title
      // 3
      setPageData({ url, title })
    })
}, [])

In the above code:

1. You use the Chrome API to query the currently opened tab.
2. You get the active tab’s URL (url) and title (title).
3. You set the pageData state variable.

Next, add the following code for the saveBookmarkToNotion method:

async function saveBookmarkToNotion(bookmark) {
  // 1
  const notion = new Client({
    auth: process.env.NEXT_PUBLIC_NOTION_API_TOKEN,
  })

  try {
    // 2
    await notion.pages.create({
      parent: {
        database_id: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID,
      },
      properties: {
        Title: {
          title: [
            {
              text: {
                content: bookmark.title,
              },
            },
          ],
        },
        URL: {
          url: bookmark.url,
        },
        Tags: {
          multi_select: bookmark.tags,
        },
        Notes: {
          rich_text: [
            {
              text: {
                content: bookmark.notes || '-',
              },
            },
          ],
        },
      },
    })
    return true
  } catch (error) {
    return false
  }
}

In the above code:

1. You create a new client for authenticating with the Notion API by providing the Notion API token (NEXT_PUBLIC_NOTION_API_TOKEN).
2. In a Notion database, each entry is known as a page. So, you create a new page (notion.pages.create) and define the parent and properties for the page. You can get information about all the properties in the Notion API docs.

Next, add the following code for the handleSubmit method:

async function handleSubmit(e) {
  e.preventDefault()
  setIsSaving(true)

  // 1
  const data = new FormData(e.target)
  const bookmark = Object.fromEntries(data.entries())

  // 2
  bookmark.tags = bookmark.tags
    .split(',')
    .filter((tag) => tag.trim().length !== 0)
    .map((tag) => ({
      name: tag.trim(),
    }))

  // 3
  const result = await saveBookmarkToNotion(bookmark)

  // 4
  if (result) {
    setIsSaved(true)
  } else {
    setIsSaving(false)
  }
}

In the above code:

1. You get the form’s data (e.target) and convert it to a JSON object (Object.fromEntries).
2. Since tags are a comma-separated string, you convert the tags into an array of objects where each object is of {name: tag} structure.
3. You pass the modified bookmark object to the saveBookmarkToNotion function.
4. Based on the result, you update the state variables isSaved and isSaving.

Next, save your progress and start the development server by running the following command:

npm run dev

The above command will build your extension and make it ready for being a Chrome extension. The coding part is complete and finally, you need to test the Chrome extension.

Testing Chrome extension

To verify that everything is working as expected, visit your favorite web page and try saving it to your Bookmarks database with the help of your Chrome extension:

And it works flawlessly!

Conclusion

That’s it. Today, you learned to build a Chrome extension using Next.js. You also learned to interact with Notion API and save your data to a Notion database. You can add/remove fields according to your needs and customize the extension according to your needs.

Since Notion API is still in beta, the above code may/may not work in the future. To make sure that you are able to track the production issues, you can try Bird.

The entire source code for this tutorial is available in this GitHub repository.