I m trying to create an extension that would grab information of the DOM and copy it to the clipboard. I am working with alot of clients/appoinments. Having to copy their information every time is a hussle so I thought one click would do the trick!
I have most of it set up but for some reason my content.js is not firing at all. and i dont understand why.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
function: scriptToExecute
});
});
function scriptToExecute() {
chrome.runtime.sendMessage({action: "copyData"});
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received in content script:", request.action);
if (request.action === "copyData") {
// content.js
console.log('Content script loaded and ready to receive messages.');
var tds = document.querySelectorAll('td');
var partList = Array.from(tds).map(td => td.innerText);
const indices = [7, 9, 11, 23, 29, 31];
const selectedText = indices.map(index => partList[index] || '').join(' ');
navigator.clipboard.writeText(selectedText).then(() => {
console.log('Text copied to clipboard!');
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
});
"manifest_version": 3,
"name": "Copy Table Data",
"version": "1.0",
"permissions": [
"activeTab",
"clipboardWrite",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "16.png",
"32": "32.png",
"96": "96.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"icons": {
"16": "16.png",
"32": "32.png",
"96": "96.png"
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy Elements</title>
<style>
body {
font-family: Arial, sans-serif;
min-width: 200px;
padding: 10px;
}
button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Kopieer voor afspraak </h2>
<button id="copyButton">Kopieer afspraak gegevens</button>
<script src="popup.js"></script>
</body>
</html>
If anyone has time to take a look or nudge me into the right direction, that would be wonderful!