Amazon Q cli: developing Second Brain chrome extension for converting web-pages into obsidian-like markdown

Abstract

There’s an overwhelming amount of great content on the web, and alongside that, local tools like Notion, Obsidian, and Quartz have become increasingly popular. They’re excellent for indexing information, performing advanced searches, and staying accessible — even offline.

What I Built

The challenge is, while browsing online, we often come across content we’d love to revisit later. But after jumping through a few more links, we forget where we started. And if we try to save a page to something like Quartz in Markdown format, it turns into a tedious manual process: cleaning up the content, converting it to Markdown, copying over all the images, fixing links, creating sections, adding formatting and styles, etc.

This kind of repetitive work is a perfect candidate for automation.

That’s why we’re building a Chrome browser extension that handles all of it for you. It will parse the page you’re interested in, convert it into clean Markdown, download and link images properly, and store everything in your second brain.

We’ll build it from scratch using Amazon Q — automating the boring stuff so you can focus on what actually matters: reading and thinking.

Extension installation

If your are new to development the use option1, otherwise feel free to checkout the code and build it

• option1: download extension from https://github.com/tsypuk/mdextension use pre-build extension in dist folder

• option2: checkout & build extension

git clone https://github.com/tsypuk/mdextension.git
npm install
npm run build

Once extension is built (or you have downloaded a pre-built), open browser -> Manage Extensions -> Load unpacked -> open path to *dist folder and add.

Demo

• While browsing the web, we came across an intriguing article on data restoration from SSDs — a hot topic right now. Since we maintain a structured local knowledge base (our “second brain”) with tagged, categorised, and interlinked content for easy future reference, this article definitely deserves a place there.

• It’s valuable information that we’ll want to revisit later, so capturing and storing it properly is a must.

second brain is the concept when there is hosted content storage that allows to save text, media content, also build relationship for this content and search. Most popular second brains are: quartz/obsidia/notion, etc.

• Click on extension icon in browser extensions bar:

• Add tags if needed or leave a default tags, specify the name of folder where to download (it will be folder in downloads) and click Save page as Markdown

• extension will parse page, convert it to markdown, download images, integrate images into markdown and save to you local download folder

Now you can continue browsing, the content will not be forgotten - it is in your second brain library.

• For each saved markdown file, extension also adds yaml-based obsidian description - it extracts page title, description adds tags that you have entered on save.

---
title: Recover data from an SSD drive | Information Recovery Center
description: Data Recovery from SSD - Kingston, OCZ, Transcend, Intel, Corsair, Silicon Power, Patriot, A-Data, Crucial, Western Digital, Samsung, Apacer
tags:
  - ssd
  - recovery
published: true
date: 2025-05-03
---

• All the page text is read from html and is reformatted into markdown format including references, links, images, headers, etc. Here is example of few first sentenced.

# Recover data from an SSD drive

We recover information from **SSD (Solid State Drive) **drives with the help of specialized software and hardware complexes. SSD drives are quite reliable media. However, they are not protected from damage and at one moment can fail, which entails loss of valuable information. We are always ready to help you restore lost photos, videos, documents, music, and more.

**Types of media **

We work with all types of **SATA, PATA, mSATA, M.2 (NGFF), M.2 PCIe NVMe/АHCI, LIF, ZIF, NVMe, USB, Apple Macbook, PCI-Express, PCIe x16 и SATA Express **interfaces: **from 64 Gb to 2 TB. **.

Now these downloaded markdowns can be easily integrated into you second brain. Here is how they are rendered in my quartz brain:

So you will not lost any interesting ideas, content, details - they will always be stored into your second brain.

Code Repository

https://github.com/tsypuk/mdextension

How I Used Amazon Q Developer

start a q cli and use prompting

q
To learn more about MCP safety, see https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-mcp-security.html
✓ awslabsaws_documentation_mcp_server loaded in 3.93 s
✓ 1 of 1 mcp servers initialized

Welcome to

 █████╗ ███╗   ███╗ █████╗ ███████╗ ██████╗ ███╗   ██╗     ██████╗
██╔══██╗████╗ ████║██╔══██╗╚══███╔╝██╔═══██╗████╗  ██║    ██╔═══██╗
███████║██╔████╔██║███████║  ███╔╝ ██║   ██║██╔██╗ ██║    ██║   ██║
██╔══██║██║╚██╔╝██║██╔══██║ ███╔╝  ██║   ██║██║╚██╗██║    ██║▄▄ ██║
██║  ██║██║ ╚═╝ ██║██║  ██║███████╗╚██████╔╝██║ ╚████║    ╚██████╔╝
╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝     ╚══▀▀═╝



╭───────────────────────── Did you know? ─────────────────────────╮
│                                                                 │
│   Q can use tools without asking for confirmation every time.   │
│                     Give /tools trust a try                     │
│                                                                 │
╰─────────────────────────────────────────────────────────────────╯


/help all commands  •  ctrl + j new lines  •  ctrl + k fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

let’s create chrome extension written on ts in this folder - init the project

I'll help you create a Chrome extension using TypeScript in your current directory. Let's start by initializing the project.

First, let's check what's currently in the directory:


🛠️  Using tool: fs_read (trusted)
 ⋮
 ● Reading directory: ~/projects/markdown-extension with maximum depth of 0
 ⋮
 ● Completed in 0.1s

Let's initialize a new npm project and set up the TypeScript configuration:
🛠️  Using tool: execute_bash
 ⋮
 ● I will run the following shell command:
cd ~/projects/markdown-extension && npm init -y

At this moment Q has generated a scratch template for chrome extension, connected dependencies, folders structure and also defined README.MD

let’s add .gitignore file with node_modules to exclude, also exclude webstorm idea files and builds

Gitignore is perfectly structures contains all requested exclussions.

Do not forget to use git and init it in your project, otherwise it will be a ball of mud.

git init
git commit -m "init"

the extension should be active on any site, when clicking on the extention icon in the bar, in will get current page content, transform it to markdown, we should save this markdown file and also all images that are contained on the page, images have references in markdown according to its syntax, download as a folder

Very glad to see that Q responses with a summarised plan before the implementation.

I'll help you modify the extension to meet these requirements. The extension should:
1. Be active on any site
2. When clicking the extension icon, get the current page content
3. Transform the page content to markdown
4. Save the markdown file
5. Download all images from the page
6. Include proper image references in the markdown
7. Save everything as a folder

Let's update the extension code:

Q performs updates of files, let’s check what is done. The only missing thing is to perform npm install cause packages are missing and compilation does not pass. Q missed that but has reported that it was done.

Let’s do it manually:

npm run build

markdown-extension@1.0.0 build
webpack --config webpack.config.js

assets by path *.js 109 KiB
  asset popup.js 104 KiB [emitted] (name: popup) 1 related asset
  asset content.js 4.34 KiB [emitted] (name: content) 1 related asset
  asset background.js 804 bytes [emitted] (name: background) 1 related asset
asset popup.html 1.07 KiB [emitted] [from: src/popup.html] [copied]
asset manifest.json 639 bytes [emitted] [from: src/manifest.json] [copied]
runtime modules 221 bytes 1 module
modules by path ./src/*.ts 10.9 KiB
  ./src/background.ts 602 bytes [built] [code generated]
  ./src/content.ts 4.15 KiB [built] [code generated]
  ./src/popup.ts 6.15 KiB [built] [code generated]
./node_modules/jszip/dist/jszip.min.js 95.3 KiB [built] [code generated]
webpack 5.99.7 compiled successfully in 2116 ms

No issue with build.

First failure

Now when installing extension to browser, we got the error:

This is due to icons are defined with different resolutions in manifest file, but there are no icon files at all.

Let’s see if Q will understand this error and could fix it - we are pasting error message as is without any additional prompt at all:

🛠️  Using tool: fs_write
 ⋮
 ● Path: ~/projects/markdown-extension/src/icons/create_icons.sh

+     1: #!/bin/bash
+     2:
+     3: # This script creates simple placeholder icons for the Chrome extension
+     4: # It requires ImageMagick to be installed
+     5:
+     6: # Create a simple colored square for each icon size
+     7: convert -size 16x16 xc:#4285f4 icon16.png
+     8: convert -size 48x48 xc:#4285f4 icon48.png
+     9: convert -size 128x128 xc:#4285f4 icon128.png
+    10:
+    11: echo "Icons created successfully!"

Creating: ~/projects/markdown-extension/src/icons/create_icons.sh
 ⋮
 ● Completed in 0.0s

🛠️  Using tool: execute_bash
 ⋮
 ● I will run the following shell command:
cd ~/projects/markdown-extension/src/icons && chmod +x create_icons.sh && ./create_icons.sh

Amazing Q understood the error, and also generated images with updating and gives the instructions:

I've fixed the issue with the missing icons and made several improvements to the extension. Here's what I did:

1. Created the missing icon files:
   • Generated placeholder icons in the required sizes (16x16, 48x48, 128x128)
   • Added them to the src/icons directory

2. Updated the webpack configuration:
   • Made sure the icons directory is properly copied to the dist folder
   • Added fallbacks for Node.js modules that might be referenced

3. Improved the content script:
   • Enhanced the HTML to Markdown conversion logic
   • Added better image collection with proper error handling
   • Improved filename sanitization

4. Updated the popup script:
   • Simplified the download process using Chrome's downloads API
   • Added better error handling
   • Improved the user feedback in the status area

5. Fixed the manifest.json:
   • Added the required "downloads" permission
   • Made sure all icon references are correct

Now the extension should load properly and function as expected. When you click on the extension icon and then click "Save Page as Markdown", it will:

1. Convert the current page to markdown
2. Download the markdown file
3. Download all images from the page into a folder

To build and load the extension:
1. Run npm install to install dependencies
2. Run npm run build to build the extension
3. Load the extension from the dist folder in Chrome's extension page

The extension now has a simpler approach that uses Chrome's native downloads API instead of trying to create a ZIP file, which makes it more reliable and
easier to maintain.

Let’s rebuild and check extension upload again:

Now it is fully installed and available at chrome:

After that steps, doing some minor adjustments, format transformations and headline tuning extension is ready.

What I learned from Q

1. Prompt - the clear your message is - the better are results, define edge cases and clear requirements for the task. Try to be iterative, not follow big bang implementation. Add feature by feature, step by step.
2. You should use git and perform commits between prompts and output results. Otherwise it will be hard to troubleshoot and do modifications.
3. Q holds the context and tracks right direction with more input prompts you give.
4. On the step were built extension was not able to install into the browser, I passed error message to Q without any details, it understood the root cause and performed missing images generation.
5. Interesting idea is for web developer will be great to have feedback loop - this can be a q developer extension that is installed into web browser, so developer can build new version of ui application and q extension can verify how it is rendered in browser or what are errors in browser console - with such improvement Q will be even more robust cause it will immediately have a feedback loop without even human interaction only under human control.
6. Q pretty good handles linux cli, scripting prompts, but also can write a code. With MCP integration to Q (that was released recently) it will be even more interesting to see its evolution.
7. Very good to see summaries from Q, execution plan, and clarification question - this sound more natural and you got feeling of more control.
8. If you are doing changes from IDEA - Q does not track them. These new features are out of Q context. And if after manually adding features/code you will return to Q and ask to implement something new - it will drop all you code. Be careful!!!
9. Styling problem - Q uses checkstyle different from default IDEA (spacing, tabs, etc.). When developing in parallel make sure you have aligned styles, otherwise all files will be periodically change even with formatting, making fully imposible to track cahnges.

Links:

• https://quartz.jzhao.xyz/
• extensions development