How to Build a Chrome Web Scraping Extension

Array ( [as_domain] => amazon.com [as_name] => Amazon.com, Inc. [asn] => AS16509 [continent] => North America [continent_code] => NA [country] => United States [country_code] => US )

Start Your Project

Component	Description	Example File
Manifest.json	Defines permissions, scripts, and extension metadata.	manifest.json
Content Script	Executes scraping logic in the webpage context.	content.js
Background Script	Manages events and communication between tabs.	background.js
Popup UI	Provides user interface to start/stop scraping.	popup.html

Component

Description

Example File

Manifest.json

Defines permissions, scripts, and extension metadata.

manifest.json

Content Script

Executes scraping logic in the webpage context.

content.js

Background Script

Manages events and communication between tabs.

background.js

Popup UI

Provides user interface to start/stop scraping.

popup.html

{ "manifest_version": 3, "name": "Actowiz Web Scraper", "version": "1.0", "description": "A Chrome extension to scrape website data easily.", "permissions": ["activeTab", "scripting", "downloads"], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "content_scripts": [{ "matches": [""], "js": ["content.js"] }] }

 <html> <head><title>Actowiz Scraper</title></head> <body> <h3>Web Scraping Tool</h3> <button id="start">Start Scraping</button> <button id="export">Export Data</button> </body> <script src="popup.js"></script> </html>

// content.js let scrapedData = []; document.querySelectorAll('.product-card').forEach(product => { scrapedData.push({ title: product.querySelector('.product-title')?.innerText, price: product.querySelector('.product-price')?.innerText, rating: product.querySelector('.rating')?.innerText }); }); chrome.runtime.sendMessage({ data: scrapedData });

// background.js chrome.runtime.onMessage.addListener((msg) => { if (msg.data) { const blob = new Blob([JSON.stringify(msg.data)], { type: 'application/json' }); const url = URL.createObjectURL(blob); chrome.downloads.download({ url: url, filename: 'scraped_data.json' }); } });

function exportCSV(data) { const headers = Object.keys(data[0]); const csvRows = [ headers.join(","), ...data.map(row => headers.map(h => JSON.stringify(row[h] ?? "")).join(",")) ]; const blob = new Blob([csvRows.join("\n")], { type: "text/csv" }); const url = URL.createObjectURL(blob); chrome.downloads.download({ url, filename: "data.csv" }); }

Product Name	Price	Rating	Availability
L'Oréal Paris Serum	$12.99	4.6	In Stock
Sephora Lip Gloss	$18.00	4.8	Limited Stock
Estée Lauder Foundation	$45.50	4.9	Out of Stock

Product Name

Price

Rating

Availability

L'Oréal Paris Serum

$12.99

4.6

In Stock

Sephora Lip Gloss

$18.00

4.8

Limited Stock

Estée Lauder Foundation

$45.50

4.9

Out of Stock

Format	Pros	Best For
CSV	Lightweight, easy to open in Excel	Quick analysis
JSON	Structured, machine-readable	API integrations
Excel (XLSX)	Visual formatting	Business reporting

Format

Pros

Best For

CSV

Lightweight, easy to open in Excel

Quick analysis

JSON

Structured, machine-readable

API integrations

Excel (XLSX)

Visual formatting

Business reporting

Array ( [as_domain] => amazon.com [as_name] => Amazon.com, Inc. [asn] => AS16509 [continent] => North America [continent_code] => NA [country] => United States [country_code] => US )

Start Your Project

Our Data Drives Impact - Real Client Stories