How I Built a Chrome Extension With little Knowing JavaScript - Thanks to ChatGPT!
Mehran Mirzaei - PMP
Business Analyst Project Management Consultant and Lecturer | Business Reporting, Manufacturing Process Improvement
A month ago, I embarked on a journey to create a Chrome extension that could extract prices from a website and save them as a CSV file. The twist? I had little prior knowledge of JavaScript and HTML. But with the assistance of ChatGPT, I was able to turn my idea into a reality.
The Request: I approached ChatGPT with a straightforward goal: to build a Chrome extension that could scrape product prices from a specific website and save the data into a CSV file. I was a bit skeptical at first, given my lack of programming skills, but I was eager to learn and try.
The Process: ChatGPT guided me step-by-step through the process. Here's a brief overview of our back-and-forth:
Folder Structure:
price-scraper/
│
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── icon16.png
├── icon48.png
└── icon128.png
Creating the Manifest File: ChatGPT explained the necessity of a manifest file for the Chrome extension and provided the initial code.
{
"manifest_version": 2,
"name": "Price Scraper",
"version": "1.0",
"description": "Extract prices from a website and save as CSV",
"permissions": ["activeTab", "declarativeContent", "storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
}
Writing the Content Script: With the manifest file ready, we moved on to writing the content script that would extract the prices.
领英推荐
// content.js
let prices = [];
document.querySelectorAll('.price-class').forEach((price) => {
prices.push(price.innerText);
});
chrome.runtime.sendMessage({ prices: prices });
Handling Data in the Background Script: ChatGPT helped me understand how to handle the extracted data in the background script.
// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.prices) {
let csvContent = "data:text/csv;charset=utf-8,Price\n" + request.prices.join("\n");
let encodedUri = encodeURI(csvContent);
let link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "prices.csv");
document.body.appendChild(link);
link.click();
}
});
Creating the Popup: Lastly, we created a simple popup interface for the extension.
<!-- popup.html -->
<html>
<head>
<title>Price Scraper</title>
</head>
<body>
<button id="scrape-button">Scrape Prices</button>
<script src="popup.js"></script>
</body>
</html>
// popup.js
document.getElementById('scrape-button').addEventListener('click', () => {
chrome.tabs.executeScript(null, { file: 'content.js' });
});
// popup.js
document.getElementById('scrape-button').addEventListener('click', () => {
chrome.tabs.executeScript(null, { file: 'content.js' });
});
The Outcome: After a few iterations and some tweaks, the Chrome extension was up and running! I was able to extract prices from the website and save them directly into a CSV file with just a click of a button. It was an incredible learning experience and a testament to the power of AI-assisted development.
Reflection: This experience has shown me that even without a deep understanding of a programming language, it's possible to achieve significant results with the right guidance. ChatGPT not only provided the code but also explained the concepts in a way that made sense to me.
If you're considering a similar project or have a tech challenge, I highly recommend leveraging AI tools like ChatGPT. They can transform your ideas into functional solutions, even if you're stepping into unfamiliar territory.
Feel free to reach out if you have any questions about my experience or if you're interested in trying something similar!
#TechJourney #AI #ChatGPT #JavaScript #ChromeExtension #LearningByDoing#optimization
Professional in International Trade | Import | Export | Logistics, | Freight Forwarding and Transportation-FIATA/CIFFA | Purchase Consultant and Analyst
1 个月Insightful!
Senior Software Developer At TID Development Co(TejeratBank)
1 个月Dobaal
Supply Chain and Operations
1 个月Absolutely amazing! ????????????