Source Code - LinkedInEmailExtractor.zip
- Essence of a Chrome Extension: At its core, a Chrome extension is a compact software program designed to elevate and enhance your browsing experience within the Google Chrome web browser. Think of it as a specialized tool that seamlessly integrates into your browser, offering additional features, functionalities, or modifications to tailor your online activities.
- Building Blocks: A Chrome extension is constructed using a combination of essential components:
- Manifest File: This file, written in JSON format, serves as the blueprint of the extension. It contains crucial information about the extension, such as its name, version, description, permissions, and the files it uses.
- HTML, CSS, and JavaScript: These core web technologies form the backbone of the extension's user interface and interactive elements. HTML structures the content, CSS styles the appearance, and JavaScript brings dynamic behavior and functionality.
- Optional APIs: Chrome provides a rich set of APIs (Application Programming Interfaces) that extensions can leverage to interact with the browser, web pages, or even the user's system. These APIs grant extensions access to specific functionalities and data, enabling them to perform a wide range of tasks.
- Enhancing Your Browsing Experience: Chrome extensions can modify the appearance of web pages, add new features to the browser, interact with web content, or even communicate with external servers. From ad blockers and password managers to productivity tools and language translators, the possibilities are virtually limitless.
Ek basic Chrome extension ka structure kuch aisa hota hai:
/my-extension
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ ├── icon128.png
└── styles.css
manifest.json ek configuration file hoti hai jo extension ka pura setup define karti hai.
{
"manifest_version": 3,
"name": "Meri Pehli Chrome Extension",
"version": "1.0",
"description": "Yeh ek simple extension hai!",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": ["storage", "activeTab"],
"host_permissions": ["<all_urls>"]
}
Background script (background.js) wo jagah hai jahan pe extension ka main logic chalta hai. Yeh service worker ke through run hota hai.
chrome.runtime.onInstalled.addListener(() => {
console.log("Extension installed!");
});
Content script web pages ke andar inject hota hai aur unko modify karta hai.
document.body.style.backgroundColor = "yellow";
popup.html ek chhoti si HTML file hoti hai jo extension ke popup me dikhai deti hai.
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<script src="popup.js" defer></script>
</head>
<body>
<h1>Welcome to My Extension!</h1>
<button id="changeColor">Change Background</button>
</body>
</html>
Aur iska popup.js file kuch aisa hoga:
document.getElementById("changeColor").addEventListener("click", () => {
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor = "blue";'
});
});
- Chrome me
chrome://extensions/open karo. - "Developer Mode" enable karo (top-right corner me toggle milega).
- "Load Unpacked" button dabao aur apne extension ka folder select karo.
- Bas, extension ready hai! 🎉
- Storage API: Data store karne ke liye.
- Messaging API: Background aur content script ke beech communication ke liye.
- Permissions: Specific features ko access dene ke liye.