<p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/users%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fimages%2Fe91d91d6-1034-47bc-8325-10f3e0ffc594.jpg?alt=media&amp;token=8fa87b2a-0197-4e3b-ba3d-5d888f2733cd" alt="video thumbnail for 'Your First Chrome Extension Using GitHub Copilot'"><p>Build a tiny, useful Chrome extension without deep web-development experience by letting an AI agent do most of the heavy lifting. The goal: a School Link Helper that converts a URL and link text into a Markdown link, remembers your inputs between openings, and copies the result to the clipboard.</p><p></p><div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/gKbxQmvkmsw" frameborder="0" allowfullscreen="true"></iframe></div><h2 id="fd3ae8cb-2d7f-4c54-94ef-99f2753fe414" data-toc-id="fd3ae8cb-2d7f-4c54-94ef-99f2753fe414" style="font-size: 24px; font-weight: 600; line-height: 1.2;">What this project does and why it matters</h2><p>The extension accepts a URL and a display name, validates both fields, creates a Markdown link like <strong>[Display Name](</strong><a target="_blank" href="https://example.com"><strong>https://example.com</strong></a><strong>)</strong>, copies it to the clipboard, and persists the inputs so they remain after closing the popup. That small feature saves time when posting resources in a school platform that supports Markdown but doesn’t expose an easy way to create linked text.</p><p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/%2Fusers%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fblogs%2FZTEfMp6RCe4ZLYqghJnI%2Fscreenshots%2F145b0d58-a002-43b3-becb-4949be0ba349.webp?alt=media&amp;token=b8f8ce59-1959-4da5-b650-4024aa17fc1b" alt="VS Code window showing a highlighted skool-link-helper folder and the Build with Agent panel; presenter inset in the lower-right." style="object-fit: cover;"><h2 id="83186ba6-1784-4ce7-90f3-108581c68c1b" data-toc-id="83186ba6-1784-4ce7-90f3-108581c68c1b" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Quick overview of the files you need</h2><p>Keep it simple. A minimal Chrome extension typically uses these files:</p><ul><li><p><strong>manifest.json</strong> — configuration and permissions</p></li><li><p><strong>popup.html</strong> — the popup UI shown when the extension icon is clicked</p></li><li><p><strong>popup.js</strong> — JavaScript to handle input, storage, and clipboard</p></li><li><p><strong>popup.css</strong> — styling for the popup (optional but recommended)</p></li></ul><h2 id="4868cf5b-4b23-49cb-a0c7-ac53af9e7653" data-toc-id="4868cf5b-4b23-49cb-a0c7-ac53af9e7653" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Minimal manifest example</h2><p>A sample manifest for a manifest v3 extension that provides a popup and clipboard access:</p><pre><code class="language-json">{
  "manifest_version": 3,
  "name": "School Link Helper",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_title": "School Link Helper"
  },
  "permissions": ["storage", "clipboardWrite"]
}</code></pre><h2 id="d8e1ba47-196f-4cad-ad4e-925f53cc1866" data-toc-id="d8e1ba47-196f-4cad-ad4e-925f53cc1866" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Step-by-step: from empty folder to working extension</h2><h3 id="27d22d36-58a4-402b-b723-2ee7d7ce3ebc" data-toc-id="27d22d36-58a4-402b-b723-2ee7d7ce3ebc" style="font-size: 20px; font-weight: 600; line-height: 1.2;">1. Create the project folder and manifest</h3><p>Make a new folder (for example, <strong>school-link-helper</strong>) and add <code>manifest.json</code>. The manifest is the contract Chrome uses to understand your extension.</p><h3 id="8f8fe866-105a-46a7-abb2-64316a31b608" data-toc-id="8f8fe866-105a-46a7-abb2-64316a31b608" style="font-size: 20px; font-weight: 600; line-height: 1.2;">2. Let an AI agent scaffold the rest</h3><p>Use an AI agent such as GitHub Copilot or another assistant to generate popup.html, popup.css, and popup.js. Provide a prompt that clearly describes:</p><ul><li><p>Two input fields: Display text and URL</p></li><li><p>Require both fields before allowing copy</p></li><li><p>Remember values between openings using Chrome storage</p></li><li><p>Include a Clear button to erase both fields</p></li><li><p>Make the UI look polished with CSS</p></li></ul><p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/%2Fusers%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fblogs%2FZTEfMp6RCe4ZLYqghJnI%2Fscreenshots%2Fef0fead7-162e-4d1c-88da-5bde02ecd970.webp?alt=media&amp;token=c9df8338-860c-425f-93b6-89971302c616" alt="Code editor showing a project file tree with manifest.json, popup.html, popup.js, and style.css and the AI chat panel listing created files" style="object-fit: cover;"><p>The agent can create the HTML, CSS, and JS files in one go. Expect to iterate: the first scaffold is rarely perfect, but it saves a lot of typing.</p><h3 id="4f4a03ee-24f5-43d4-87d5-2b642f02fc8d" data-toc-id="4f4a03ee-24f5-43d4-87d5-2b642f02fc8d" style="font-size: 20px; font-weight: 600; line-height: 1.2;">3. Preview your popup locally</h3><p>While developing, preview popup.html in a browser tab (or use a VS Code Live Server). That lets you test interactions and copy-to-clipboard logic without reloading the extension each time.</p><p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/%2Fusers%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fblogs%2FZTEfMp6RCe4ZLYqghJnI%2Fscreenshots%2F5837cd45-7e54-46e1-a765-2ca8f414a8b4.webp?alt=media&amp;token=2642f6c7-43d1-41c4-bfdc-560f3088cf5d" alt="VS Code showing popup.html with a 'Click to run live server' tooltip to preview the popup.html file" style="object-fit: cover;"><h3 id="edd29276-4e77-43c5-828b-771998758d83" data-toc-id="edd29276-4e77-43c5-828b-771998758d83" style="font-size: 20px; font-weight: 600; line-height: 1.2;">4. Load the extension into Chrome</h3><ol><li><p>Open chrome://extensions in Chrome.</p></li><li><p>Enable Developer mode in the top-right.</p></li><li><p>Click Load unpacked and select your project folder.</p></li></ol><h3 id="7caaaaee-624c-40bc-b581-e5480920792c" data-toc-id="7caaaaee-624c-40bc-b581-e5480920792c" style="font-size: 20px; font-weight: 600; line-height: 1.2;">5. Common error and how AI helped fix it</h3><p>A common startup error is a missing icon referenced in the manifest, such as "Could not load icon 16.png". Fix options:</p><ul><li><p>Add the missing image files with the exact filenames</p></li><li><p>Or update the manifest to remove or point icons to available files</p></li></ul><p>An AI agent can detect the mismatch, suggest edits, and show a diff of added and removed lines so you can approve changes before they are applied.</p><p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/%2Fusers%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fblogs%2FZTEfMp6RCe4ZLYqghJnI%2Fscreenshots%2F717542d1-4723-40ef-9c7d-689232b2b7c5.webp?alt=media&amp;token=07da8192-8e12-40fe-9126-7009ce27d5b9" alt="Code editor open to popup.html with an AI assistant panel recommending adding icon files and configuration" style="object-fit: cover;"><h3 id="14b6c581-bcd8-4b0a-99ad-26cf920c6003" data-toc-id="14b6c581-bcd8-4b0a-99ad-26cf920c6003" style="font-size: 20px; font-weight: 600; line-height: 1.2;">6. Test the feature end-to-end</h3><p>Try these actions:</p><ul><li><p>Enter the link text and URL</p></li><li><p>Click “Copy Markdown” to copy the Markdown link to the clipboard</p></li><li><p>Open a message box on the platform (like a Skool message), paste the Markdown, and confirm the link renders as expected</p></li></ul><p></p><img src="https://firebasestorage.googleapis.com/v0/b/videotoblog-35c6e.appspot.com/o/%2Fusers%2FTvIDW1UoX9UyCz5sQ9fYOQjWMh53%2Fblogs%2FZTEfMp6RCe4ZLYqghJnI%2Fscreenshots%2F2eb1b418-57a5-4224-a44c-5f21c06ecb5b.webp?alt=media&amp;token=74de7f11-e260-42d0-b0fb-a02e97880db3" alt="School Link Helper popup showing a URL, link text, Copy Markdown and Clear buttons and a copied-to-clipboard confirmation" style="object-fit: cover;"><h2 id="d3e881aa-72e1-4a12-93da-9dc730ec09f0" data-toc-id="d3e881aa-72e1-4a12-93da-9dc730ec09f0" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Tips for a smoother AI-assisted workflow</h2><ul><li><p>Give the agent a clear, concise prompt that lists required behavior and edge cases</p></li><li><p>Keep files separated (HTML/CSS/JS) for readability and debugging</p></li><li><p>Use Chrome storage (<a target="_blank" href="http://chrome.storage">chrome.storage</a>.local) to persist popup inputs</p></li><li><p>Test copy functionality in a real input field or messaging window to ensure Markdown works as expected</p></li></ul><h2 id="f8ba8013-2beb-4880-8e68-f4a4cb90de22" data-toc-id="f8ba8013-2beb-4880-8e68-f4a4cb90de22" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Resources and further reading</h2><p>Relevant tutorials and articles to help you level up:</p><ul><li><p>Precode Camp blog homepage: <a target="_blank" href="https://www.precodecamp.com/blog">https://www.precodecamp.com/blog</a></p></li><li><p>Why learn JavaScript as your first programming language: <a target="_blank" href="https://www.precodecamp.com/blog/why-learn-javascript-as-your-first-programming-language">https://www.precodecamp.com/blog/why-learn-javascript-as-your-first-programming-language</a></p></li><li><p>HTML vs CSS vs JavaScript: <a target="_blank" href="https://www.precodecamp.com/blog/html-vs-css-vs-javascript-a-beginner-s-guide-to-web-development-s-power-trio">https://www.precodecamp.com/blog/html-vs-css-vs-javascript-a-beginner-s-guide-to-web-development-s-power-trio</a></p></li><li><p>Create a filtered list from an input field in JavaScript (useful UI pattern): <a target="_blank" href="https://www.precodecamp.com/blog/create-a-filtered-list-from-an-input-field-in-javascript">https://www.precodecamp.com/blog/create-a-filtered-list-from-an-input-field-in-javascript</a></p></li><li><p>Fastest and easiest way to copy and inspect CSS (browser extension recommendation): <a target="_blank" href="https://www.precodecamp.com/blog/fastest-and-easiest-way-to-copy-and-inspect-css">https://www.precodecamp.com/blog/fastest-and-easiest-way-to-copy-and-inspect-css</a></p></li><li><p>Is Free Code Camp effective? (relevant since the demo used Free Code Camp links): <a target="_blank" href="https://www.precodecamp.com/blog/is-free-code-camp-effective-study-reveals-gaps-in-web-development-training">https://www.precodecamp.com/blog/is-free-code-camp-effective-study-reveals-gaps-in-web-development-training</a></p></li></ul><h2 id="c51dd47a-48be-4571-bd0e-61b6d8e1f926" data-toc-id="c51dd47a-48be-4571-bd0e-61b6d8e1f926" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Example JavaScript approach (high level)</h2><p>The core logic you need in popup.js is simple:</p><ul><li><p>Read values from the two inputs</p></li><li><p>Validate both are present</p></li><li><p>Construct the Markdown link string: <code>[text](url)</code></p></li><li><p>Use the Clipboard API or write to the clipboard via document.execCommand or navigator.clipboard.writeText</p></li><li><p>Save inputs to <a target="_blank" href="http://chrome.storage">chrome.storage</a>.local and restore them on load</p></li></ul><h2 id="0e4bae22-0f01-447c-ade8-87a1b3b9d5d8" data-toc-id="0e4bae22-0f01-447c-ade8-87a1b3b9d5d8" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Frequently asked questions</h2><h3 id="fd616c7c-3075-4fda-9399-15393c0c611b" data-toc-id="fd616c7c-3075-4fda-9399-15393c0c611b" style="font-size: 20px; font-weight: 600; line-height: 1.2;">How many files do I actually need to get started?</h3><p>Minimal setup requires manifest.json, popup.html, popup.js, and optional popup.css. You can compress HTML and JS into fewer files, but keeping them separate makes development and debugging easier.</p><h3 id="1cefa125-75a6-49df-9ba1-7a6dd2e3824f" data-toc-id="1cefa125-75a6-49df-9ba1-7a6dd2e3824f" style="font-size: 20px; font-weight: 600; line-height: 1.2;">Do I need a paid AI plan to do this?</h3><p>No. Free tiers of GitHub Copilot or other AI assistants may be sufficient for small projects, though paid plans can provide higher usage limits and faster responses.</p><h3 id="ee76a896-0351-49b3-90f6-e15ce0f4deba" data-toc-id="ee76a896-0351-49b3-90f6-e15ce0f4deba" style="font-size: 20px; font-weight: 600; line-height: 1.2;">How do I persist form values so they are still there when I reopen the popup?</h3><p>Use the Chrome storage API: save values to <a target="_blank" href="http://chrome.storage">chrome.storage</a>.local when inputs change or on form submit, and read them during popup load to restore the inputs.</p><h3 id="4b0d3857-c8f6-4eeb-b3e5-81518db8006c" data-toc-id="4b0d3857-c8f6-4eeb-b3e5-81518db8006c" style="font-size: 20px; font-weight: 600; line-height: 1.2;">Why use Markdown links instead of pasting the raw URL?</h3><p>Markdown produces cleaner messages that show friendly text instead of long URLs. If your school platform supports Markdown, this makes posts easier to read and more professional.</p><h3 id="f2a2ab3f-62cc-4131-a8cd-424d31dbcac4" data-toc-id="f2a2ab3f-62cc-4131-a8cd-424d31dbcac4" style="font-size: 20px; font-weight: 600; line-height: 1.2;">What if Chrome reports a missing icon when loading the extension?</h3><p>Either add the referenced icon files to your project (e.g., icon16.png) or remove the icon references from the manifest. An AI agent can detect and suggest these fixes, showing exact diffs before changes.</p><h2 id="799c91fc-08e2-45fd-bfd7-912453902567" data-toc-id="799c91fc-08e2-45fd-bfd7-912453902567" style="font-size: 24px; font-weight: 600; line-height: 1.2;">Final thoughts</h2><p>Small, focused extensions bring big productivity wins. Using an AI agent to scaffold and iterate speeds up the process so you can focus on UX and problem solving. Start with the simple School Link Helper idea and expand it: add favorites, a history of saved links, or keyboard shortcuts once the basics are solid.</p><p>Useful starting points: check the Precode Camp blog for beginner guides and JavaScript fundamentals to strengthen the skills you’ll use to tweak and extend your Chrome extension:</p><ul><li><p><a target="_blank" href="https://www.precodecamp.com/blog/why-learn-javascript-as-your-first-programming-language">https://www.precodecamp.com/blog/why-learn-javascript-as-your-first-programming-language</a></p></li><li><p><a target="_blank" href="https://www.precodecamp.com/blog/html-vs-css-vs-javascript-a-beginner-s-guide-to-web-development-s-power-trio">https://www.precodecamp.com/blog/html-vs-css-vs-javascript-a-beginner-s-guide-to-web-development-s-power-trio</a></p></li></ul>

Learn how to build a tiny Chrome extension—the School Link Helper—using GitHub Copilot. Convert URL + display text to a Markdown link, persist inputs with chrome.storage, and copy to the clipboard.

Quick Guide: Build a Chrome Extension with GitHub Copilot

What this project does and why it matters

Step-by-step: from empty folder to working extension

1. Create the project folder and manifest

How many files do I actually need to get started?

How do I persist form values so they are still there when I reopen the popup?

Why use Markdown links instead of pasting the raw URL?

What if Chrome reports a missing icon when loading the extension?

PreCodeCamp has tutorials and lessons covering a variety of topics, from programming to Bootcamp News

PreCodeCamp | Blog Articles

You need to know certain things as a Coding Boot Camp Learner. We will share news and tutorials.

Quick Guide: Build a Chrome Extension with GitHub Copilot

Quick Guide: Build a Chrome Extension with GitHub Copilot

Related Posts

Recruiter Exposes the Truth About Junior Developer Jobs

Stop Coding Burnout: Simple Habits to Learn Smarter, Not Harder

Stuck Learning to Code? 3 Common Mistakes and Simple Fixes

Essential Skills for Aspiring Developers in 2025

Choosing the Right Programming Language for Your Tech Career in 2025