2021-08-12
2934
#chrome#react#typescript
Juan Cruz Martinez
62850
Aug 12, 2021 â‹… 10 min read

Creating a Chrome extension with React and TypeScript

Juan Cruz Martinez I'm an entrepreneur, developer, author, speaker, YouTuber, and doer of things.

Recent posts:

Build Chatbots in Langchain and RAG LogRocket Article

How to build smarter frontend chatbots with RAG and LangChain.js

Build smarter frontend chatbots with RAG and LangChain.js. Learn how to add context, improve accuracy, and cut costs with a practical tutorial.

Nelson Michael
Sep 18, 2025 â‹… 8 min read
alexandra spalato ai hallucination quote

How to stop your AI agents from hallucinating: A guide to n8n’s Eval Node

Walk through a practical example of n8n’s Eval feature, which helps developers reduce hallucinations and increase reliability of AI products.

Alexandra Spalato
Sep 17, 2025 â‹… 6 min read

Secure your AI-generated projects with these security practices

Secure AI-generated code with proactive prompting, automated guardrails, and contextual auditing. A practical playbook for safe AI-assisted development.

Ikeh Akinyemi
Sep 16, 2025 â‹… 5 min read

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 â‹… 11 min read
View all posts

7 Replies to "Creating a Chrome extension with React and TypeScript"

  1. great article!
    This was my very first chrome extension.

    Btw. I could load the extension in MS Edge for macOS, without any adjustments.

    My only little complaint would be that the section about the actual implementation of the content script doesn’t say a word about having to create a folder “types” and actually defining the types for DOMMessage and DOMMessageResponse. I somehow believed that those came from @types/chrome.

    Keep them articles coming!

  2. Hey Juan, Great article!! Really helped get me started on my react app and using DOM. Have 2 questions for you im hoping you can help me understand or resolve an issue.
    1) im getting an error from in the error.message saying error type unknown, was a data type supposed to be created to handle these error?
    2) when I spin the extension up in chrome it uses ALOT of resources and I’ve noticed the console is constantly ticking due to the send message and message response being updated every second. How do I set these new values without it updating the app and resending the message?

    1. Hey, Jordan.
      About typing, you might want to check github repository linked from this page. You have to create src/types/DomMessages.ts
      About resources, I assume it is because useEffect should have second value as dependencies. In this case, it should be useEffect(() => {…}, []). Updating useState in useEffect without the second value causes an infinite loop.

  3. great article, I have a question like if I have to do some activity when the user click on the active tab’s page like on click of a certain button on the tab I have to inject modal on that tab so how can I do it ?

  4. Many thanks for this tutorial. Pls i want to manipulate the DOM using CSS. How do you advise i incorporate it into the build folder? Also is it possible to add buttons into a webpage dom using typescript. Tried using the querySelectorAll().foreach() to insert button it doesnt work. It only works for paragraphs and text. Why is this so?

  5. Hi. Great tutorial. It has one small, yet crucial issue with its flow. The part where you start explaining about the usage of chrome.tabs, you never mentioned on which file should it all be written in.

    regards!

Leave a Reply