i want to develop a chrome extension but i ma new for the concept.
i need these characteristics:
for a web page which is opened on browser, e.g. google search results (https://www.google.com/search?q=Turkey+pdf), find all resulted items that has pdf link for download directly. then by click on a button in extension popup window, all found pdfs will be downloaded to pc considering manifest 3 version.
i use folowing codes but the download process is not started and these errors are presented in developer mode that i cant solve them;
-Uncaught TypeError: Cannot read properties of undefined (reading 'download')
-Uncaught TypeError: Cannot read properties of undefined (reading 'download')
as well here is my code parts:
//manifest.json
"manifest_version": 3,
"name": "PDF Downloader_Test4",
"version": "1.0",
"description": "Download PDF links from Google search results",
"permissions": ["storage", "activeTab", "downloads"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://www.google.com/search?*"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png"
}
}
}
//background.js
chrome.runtime.onInstalled.addListener(() => {
console.log('PDF Downloader Extension Installed');
});
// Message listener
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === 'executeContentScript') {
// Execute content script to find and download PDF links
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const activeTab = tabs[0];
chrome.tabs.executeScript(activeTab.id, { file: 'content.js' });
});
}
});
//content.js
// Function to download PDFs
function downloadPDF(url) {
chrome.downloads.download({ url: url });
}
// Find and download PDF links
function findAndDownloadPDFLinks() {
const pdfLinks = document.querySelectorAll('a[href$=".pdf"]');
pdfLinks.forEach(link => {
downloadPDF(link.href);
});
}
// Execute when the DOM is ready
findAndDownloadPDFLinks();
//popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Downloader</title>
</head>
<body>
<h1>PDF Downloader</h1>
<p>Click the button below to download PDF links from the current page:</p>
<button id="downloadButton">Download PDFs</button>
<script src="popup.js"></script>
</body>
</html>
//popup.js
document.addEventListener('DOMContentLoaded', function () {
// Add click event listener to the download button
const downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', function () {
// Send a message to the background script to initiate the download
chrome.runtime.sendMessage({ action: 'downloadPDFs' });
});
});
i will be so glad if any one could help me to solve that.
so thanks in advance