Hi, I'm Ihtisham Hussain — a Full-Stack Software Engineer at Adept Tech Solutions. In my role, I contribute as a Technical Developer, Team Lead, and Business Developer, actively shaping the architecture, development, and strategic growth of data-driven applications. Outside of work, I’m passionate about exploring new technologies, supporting emerging projects at Adept, and sharing insights through this blog.

How to Build a Chrome Extension with AI and Automation: A Beginner’s Guide

Chrome extensions are a great way to enhance your browsing experience. Now, with the power of AI and automation, they can accomplish much more, such as summarizing emails, generating text, or even automating tedious tasks.

In this post, we’ll walk through why and how to build a Chrome extension that uses AI. It’s easier than you think!

Why Build a Chrome Extension with AI – Benefits of Using AI in Browser Extensions

 

Why Build a Chrome Extension with AI?

  • Automate Repetitive Tasks: Fill out forms, auto-respond to chats, or organize tabs.

  • Use AI to Add Intelligence: Think summarizing articles, translating pages, or writing social media posts using ChatGPT.

  • One-Click Tools: Add buttons directly into Chrome for quick actions (like “Summarize this page”).

  •  

What You Need

  • Basic knowledge of HTML, JavaScript

  • A free OpenAI API key (or similar service)

  • A code editor like VS Code

  • Google Chrome (of course)

Build chrome extension using openai

Simple Example: An AI-Powered Page Summarizer

Let’s say we want a button that summarizes the current webpage using ChatGPT.

Manifest File (manifest.json)

{ “manifest_version”: 3, “name”: “AI Summarizer”, “version”: “1.0”, “permissions”: [“activeTab”, “scripting”], “action”: { “default_popup”: “popup.html”, “default_icon”: “icon.png” } }

Popup HTML (popup.html)

<button id=“summarize”>Summarize This Page</button> <pre id=“output”></pre> <script src=“popup.js”></script>

JavaScript (popup.js)

document.getElementById(“summarize”).onclick = async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: async () => {
      const text = document.body.innerText.slice(0, 3000); // grab content
      const summary = await fetch(‘https://api.openai.com/v1/chat/completions’, {
        method: ‘POST’,
        headers: {
          ‘Content-Type’: ‘application/json’,
          ‘Authorization’: ‘Bearer YOUR_OPENAI_API_KEY’
        },
        body: JSON.stringify({
          model: ‘gpt-3.5-turbo’,
          messages: [{ role: ‘user’, content: `Summarize this: ${text}` }]
        })
      }).then(res => res.json());

      alert(summary.choices[0].message.content);
    }
  });
};

Notes

  • Don’t forget to replace YOUR_OPENAI_API_KEY with your actual key.

  • Be sure to enable permissions and host permissions for any sites you want to interact with.

  • Keep API limits in mind for public usage.

Final Thoughts

With just a few lines of code, you can create powerful tools that live right inside your browser. Whether it’s writing emails, summarizing pages, or automating clicks, AI + Chrome Extensions = a productivity superpower.

Want help building your own idea? Just ask!