Learning Timeline
Key Insights
Advantages of Markdown Format for AI
Markdown is the best format for AI to understand website content because it preserves document structure without messy HTML code. This is very useful if you want to provide 'context' to ChatGPT or Claude.
Extension Customization Tips
You can ask Claude Code to add custom icons (e.g., your company logo) or add additional features like uploading files directly to Google Drive after the conversion is complete.
Important Step: Developer Mode
Don't forget to enable 'Developer mode' on the Extensions page. Otherwise, the 'Load unpacked' button will not be visible and you won't be able to install your custom-made extension.
Prompts
Prompt for Creating a Markdown Converter Extension
Target:
Claude Code
I often want to provide the contents of a web page to a large language model to use as context. Could you create for me a Chrome extension that has the action of converting the current page to markdown and downloading the file to my downloads folder? I'll need you to walk me through the whole process of deploying the Chrome extension so that I can use it as well. It doesn't need to be public, but just the simplest way extension that converts the current page to markdown.
Step by Step
Folder Preparation and Code Generation with Claude Code
- Create a new empty folder on your computer and name it 'Chrome extension'.
- Open the 'Chrome extension' folder within the Claude Code interface.
- Type a prompt detailing your extension idea (refer to the Prompt Card).
- Make sure to ask Claude Code to provide full instructions on how to 'deployment' or install the extension.
- Wait for Claude Code to prepare the file structure plan, implementation details, and automatically generate all required code files into your folder.
- Verify that all files (such as manifest.json, background.js, etc.) have appeared in the folder before proceeding to the next step.
How to Install the Extension to Google Chrome (Deployment)
- Open the Google Chrome browser on your computer.
- Type `chrome://extensions/` in the address bar (URL bar) and press Enter.
- Enable the 'Developer mode' toggle located in the top right corner of the page.
- Click the 'Load unpacked' button that appears in the top left.
- Locate and select the 'Chrome extension' folder that was generated by Claude Code earlier.
- Click 'Select Folder' to load the extension into the browser.
- Ensure the 'Page to Markdown' extension (or the name you provided) appears in the list without any error messages.
Testing and Using the Extension
- Click the 'Extensions' icon (puzzle piece shape) in the Chrome toolbar (next to the URL bar).
- Find the 'Page to Markdown' extension and click the 'Pin' icon so it stays visible in the toolbar.
- Visit any website you want to convert into Markdown format.
- Click on the extension icon in the Chrome toolbar.
- Open the 'Downloads' folder on your computer to view the automatically generated Markdown file.
- Open the file to ensure the website content has been extracted and formatted correctly in Markdown.
