DEV Community: AkK

Building a Chrome Extension: Key Concepts Explained

AkK — Tue, 15 Apr 2025 19:08:44 +0000

Creating a Chrome Extension may seem overwhelming at first — but once you understand its 3 main building blocks, it becomes much easier. Here's a quick breakdown of the core components:

✨ manifest.json
🔧 Content Script
🧠 Background Script

1️⃣ manifest.json – The Blueprint of Your Extension

This is the heart of your Chrome Extension. It tells Chrome everything it needs to know:

Name, version & description
What files it uses (scripts, icons, HTML)
Permissions needed (like tabs, storage, etc.)
Background behavior, UI elements, and more

📌 Why it matters: Chrome reads this file first to understand how your extension works.

🧾 Example:

{
  "manifest_version": 3,
  "name": "Simple Page Color Changer",
  "version": "1.0",
  "description": "Changes background color of any webpage.",
  "permissions": ["scripting", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2️⃣** Content Script – The Eyes & Hands of the Extension**
Content scripts are JS files that run inside the web pages you visit.

🔍 They can:

Access & manipulate HTML (DOM)
Style elements
React to user interaction on the page

🚫 They can’t:

Directly use Chrome APIs
Access browser features like tabs or bookmarks (they talk to the background script instead)

📄 Example – content.js

document.body.style.backgroundColor = "yellow";

This would change the background color of any webpage to yellow.

3️⃣ Background Script – The Brain Behind the Scenes
The background script runs independently of any webpage.

🧠 It can:

Listen to browser events (like installation, tab updates)
Communicate with content scripts and popups
Handle global data and logic
In Manifest V3, it runs as a service worker — meaning it's event-based and more efficient.

💡 Example – background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});

🔁 Communication Between Scripts
Since content scripts and background scripts run in different environments, they talk using message passing.

➡️ From content to background:

chrome.runtime.sendMessage({ greeting: "hello" }, (response) => {
  console.log(response.reply);
});

⬅️ From background to content:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.greeting === "hello") {
    sendResponse({ reply: "hi there!" });
  }
});

🧰 Optional But Useful Parts
🎯 popup.html – A small UI when the extension icon is clicked
⚙️ Options page – User settings & preferences
🖼️ Icons – Toolbar & branding visuals

Placeholder Contributor

AkK — Thu, 02 Nov 2023 03:34:24 +0000

Intro
Hey there! I'm excited to share my Hacktoberfest journey with you. This isn't my first time participating in Hacktoberfest, and I'm thrilled to be part of this vibrant open-source community once again. You can check out my GitHub profile here.
(PR's which I made)

Highs and Lows
During Hacktoberfest 2023, I experienced some incredible highs and, of course, a few lows. One of the biggest accomplishments for me was merging my first pull request (PR) into an open-source project. It was a fantastic feeling to see my code being accepted and integrated into a real-world project. It was like a light-bulb moment, and I gained confidence in my coding abilities.

However, it wasn't all smooth sailing. There were moments when I encountered problems that seemed impossible to fix. I remember spending hours trying to debug an issue, and at times, it was frustrating. But, here's the beauty of the open-source community – I reached out to the project maintainers and other contributors for help. Their guidance and collaborative spirit made the seemingly impossible problems surmountable. It taught me the importance of perseverance and seeking help when needed.

Growth
Before Hacktoberfest 2023, my skillset was decent, but I wasn't actively contributing to open-source projects. This event has been a game-changer for me. I improved my coding skills significantly by working on real-world projects and collaborating with experienced developers. I learned about version control, best coding practices, and how to work within a team, which will undoubtedly benefit my career.

My learning and career goals have evolved through this experience. I've realized that contributing to open source is not just about writing code; it's about teamwork, documentation, and communication. I plan to continue contributing to open-source projects and maybe even start my own. My goals now include becoming a more active member of the open-source community and mentoring others who are new to this exciting world.

Hacktoberfest 2023 has been an incredible journey of learning, growth, and making new friends in the open-source community. I can't wait to see where this path leads me in the future, and I encourage anyone who hasn't participated in Hacktoberfest to give it a try next year. It's a rewarding experience that can shape your career and expand your horizons in ways you can't imagine.

Complete the HacktOberfest23

AkK — Fri, 20 Oct 2023 09:33:51 +0000

I successfully completed Hacktoberfest this year, marking my second participation in the event. While the primary distinction from last year's experience was the swag, I'd like to emphasize the valuable experience I gained from actively contributing to various repositories.

This journey allowed me to dive into open source projects, collaborate with fellow developers, and improve my coding skills. The sense of community and learning that Hacktoberfest fosters was truly remarkable. It's not just about the rewards; it's about the knowledge and connections that come from participating.

If you're looking to boost your programming expertise, learn from others, and build a strong portfolio, I highly recommend making open source contributions a regular part of your coding journey. I'm excited to continue this positive momentum and contribute even more in the future.

(PR's which I made)

Career building

AkK — Sun, 13 Aug 2023 16:53:20 +0000

The things which I done in this week is done some DSA questions from hackerrank and studies some concepts in mongodb, I'm trying to maintain an streak which is trying to learn new things in an week. For the DSA section, which is done to improving the coding skill basically done questions from hackerrank, If any one want to refer it the github repo link : https://github.com/Z-M-Zero-to-Mastery/DSA-problem_solving
In this repo which consist of problems and solutions for it in different ways both efficient, non-efficient, shorthand way etc. In mongodb section, which I'm trying to learn some more advance topics in it like, normalization and denormalization , database design, relations, aggregation, scaling of the db etc. where I'm currently in my learning path. the topic which I learned in this week is about relations like one to one, one to many etc. For the next week I'm planning to cover more topics....

Daily Blog #2

AkK — Mon, 31 Jul 2023 15:25:32 +0000

Today an exciting thing is happen which is 2nd round of my interview. I applied to this company through linked in, I applied to many companies through linked in but some company will not give reply and some of them will reply but they will be ghosted. I'm happy that they are considering me for 2nd round. I'm applied for the position Full stack intern, the first round was technical round which they give an question in React which is a form we need to print an error message if the form is empty otherwise print an success message. Hopefully I passed the first round and the second round which is culture round which they ask situational based questions like :
How will handle the major error while working in an project ?
Is the any situation that makes coding a job worse if it is how will you overcome it.
How you come into coding ?
What are you expecting while working with the company ?
And after all of these they explained the work culture of the company. It was an great experience to attending this interview process. As an fresher this was not my first time attending the interview, By attending each of the interview I'm improving myself to present me in an better way, comparing with my past I can feel lot of changes happens to me.... "Learn from the mistakes" - as everybody says.

Daily Blog #1

AkK — Sun, 30 Jul 2023 15:34:29 +0000

Today onwards I'm planning to start write blog on daily basis. I don't know how much this daily blog lasts but I will try to keep it updated. The main motive for writing this is to improve my skills like writing, English etc. I'm an developer who develop some projects based on the area which I studied. Now I'm building an protfolio website to showcase my projects and works, currently I'm on it's building stage. I will be deploy soon ... That's all for today, I think this will be an great start for my daily blog.

Cloud Bootcamp 2023

AkK — Mon, 27 Mar 2023 15:08:32 +0000

Excited to start new journey in the cloud. Just started an 2 weeks bootcamp by cloud community, I'm excited to learn new things. They have been organized in three tracks like AWS, Azure, GCP and provide an mentors for each of this...

Completed HacktoberFest -22

AkK — Sat, 22 Oct 2022 04:43:36 +0000

I just completed my first hacktoberfest...