I've been having some issues having my different scripts in my extension communicating with each other. the main stuff like sending the array from as.js -> background.js -> popup.js works but im having issues sending the data from background.js -> as.js for the file download. any insight would be helpful aswell as any tips on where i can improve the existing working code.
Thanks, Sam
Code:
manifest.json
{
"manifest_version": 3,
"name": "Helper",
"description": "Desc",
"version": "0.1",
"icons": {
"16": "./icons/16.png",
"48": "./icons/48.png",
"128": "./icons/128.png"
},
"background": {
"service_worker": "./scripts/background.js"
},
"action": {
"default_icon": {
"16": "./icons/16.png",
"48": "./icons/48.png",
"128": "./icons/128.png"
},
"default_title": "Test Extension",
"default_popup": "./popup.html"
},
"content_scripts": [
{
"matches": [
"https://www.website.com/*"
],
"js": [
"./scripts/jquery-3.6.0.min.js", "./scripts/fileSaver.js", "./scripts/as.js"
],
"run_at": "document_idle"
}
],
"optional_permissions": [
"activeTab",
"tabs",
"storage"
]
}
background.js
const data = []
chrome.runtime.onConnect.addListener(function (port) {
console.assert(port.name === "mh");
port.onMessage.addListener(function (msg) {
if (msg.links === undefined) {
switch (msg.type) {
case "getData":
port.postMessage({
'data': data
});
break;
case "text":
port.postMessage({
dlData: data
});
break;
}
} else {
if (Array.isArray(msg.links)) {
data.length = 0
msg.links.forEach(e => {
data.push(e)
});
}
}
});
});
as.js (The Part that actually does stuff to the page)
//
// Random Unrelated Stuff...
//
var port = chrome.runtime.connect({
name: "mh"
});
port.postMessage({
links: data
});
port.onMessage.addListener(function (da) { // <--- This is the point where the code stops working.
console.log('hello')
console.log(da)
toTextFile('download', da.dlData)
});
function toTextFile(fileName, data) {
var blob = new Blob(
[`${data.join("\n")}`], {
type: "text/plain;charset=utf-8"
}
);
saveAs(blob, `${fileName}.txt`);
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
<style>
#copy {
background-color: rgb(135, 135, 135);
border-radius: 5px;
}
#text-copy {
text-align: center;
padding-left: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
font-size: x-small;
color: rgb(7, 7, 7);
}
.popup {
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
}
</style>
</head>
<div class="hero is-transparent" style="height: 400px; width: 400px; background-color: rgb(30, 30, 30);">
<div class="popup">
<div class="field is-grouped">
<p class="control">
<p class="title is-3" style="color: rgb(123, 123, 123);" href="#">Image URL's </p>
</p>
<p class="control">
<button class="button is-dark">
<i class="fal fa-clipboard"></i>
</button>
</p>
<p class="control">
<button class="button is-dark" id="download">
<i class="fal fa-arrow-alt-to-bottom"></i>
</button>
</p>
</div>
<div id="copy">
</div>
</div>
<script src="scripts/jquery-3.6.0.min.js"></script>
<script src="scripts/popup.js"></script>
</div>
</html>
popup.js
getData()
async function getData() {
// Request Data
var port = chrome.runtime.connect({ name: "mh" });
port.postMessage({ type: 'getData' });
// Download Button
var dl = document.getElementById("download")
dl.addEventListener('click', port.postMessage({ type: 'text' }));
// Process da Links
port.onMessage.addListener(function (msg) {
if (!msg.data) return;
if (Array.isArray(msg.data)) {
var data = msg.data.join('<br>').replace(/"/g, '')
var p = document.createElement('p');
p.innerHTML = `${data}`;
p.setAttribute("id", "text-copy");
document.getElementById('copy').appendChild(p);
}
});
}
