So Basically I'm getting this error everytime the popup is opened, assuming its everytime sendMessage is sent. My Listener is in a content script that only loads on certain pages so could that be the reason? should have the listener in a background script instead?
Error Info:
Error: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Context: popup.html
Stack Trace: popup.html:0 (anonymous function)
popup.html
<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>
.notif {
visibility: hidden;
width: 100%;
position: absolute;
opacity: 0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear;
top: 0;
left: 0;
}
.outer {
position: relative;
height: 80px;
width: 100%;
}
.notif.unhidden {
visibility: visible;
opacity: 1;
transition-delay: 0.4s;
}
#copy {
background-color: rgb(135, 135, 135);
border-radius: 4px;
border-width: 1px;
}
#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: 20px;
}
</style>
</head>
<body>
<div class="hero is-transparent" style="height: fit-content; background-color: #1e1e1e;">
<div class="popup">
<div class="outer">
<div class="notif unhidden" id="n1"><img src="./assets/banners/top-banner-url.png"></div>
<div class="notif notification is-danger" id="failCopynotif"><button class="delete"></button>Failed to
Copy to Clipboard</div>
<div class="notif notification is-danger" id="errornotif"><button class="delete"></button>Error</div>
<div class="notif notification is-success" id="copynotif"><button class="delete"></button>Copied to
Clipboard</div>
<div class="notif notification is-success" id="startednotif"><button class="delete"></button>Started
Download</div>
</div>
<div style="padding-bottom: 10px;">
<button class="clipboard-btn button is-dark is-centered"
style="border-color: rgb(154, 154, 154); width: 100%;"><i class="fal fa-clipboard"></i>
Copy to Clipboard</button>
</div>
<div style="padding-bottom: 10px;">
<button class="download-btn button is-dark is-centered"
style="border-color: rgb(154, 154, 154); width: 100%;"><i
class="fal fa-arrow-alt-to-bottom"></i> Download </button>
<!-- is-loading -->
</div>
<div style="padding-bottom: 10px;">
<a><button class="support-btn button is-dark is-centered"
style="border-color: rgb(154, 154, 154); width: 100%;"><i
class="fal fa-book-heart"></i> Support </button></a>
</div>
<div style="padding-bottom: 20px;">
<a><button class="help-btn button is-danger is-centered"
style="border-color: rgb(37, 37, 37); width: 100%;"><i
class="fal fa-question-circle"></i> Get Help / FAQ</button></a>
</div>
</div>
</div>
<script src="scripts/jquery-3.6.0.min.js"></script>
<script src="scripts/popup.js"></script>
</body>
popup.js
var url = []
var data = []
function run() {
url.length = 0
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, {
action: "get-links"
}, function (response) {
data.length = 0
if (response === undefined) return console.log('Undefined')
let respLinks = response.info.links.join(', ').replace(/"/g, '')
data.push(respLinks)
return;
});
});
}
function copy() {
chrome.tabs.query({
active: true,
currentWindow: true
}, function (tabs) {
let started = document.querySelector('#copynotif')
let banner = document.querySelector('#n1')
banner.classList.remove('unhidden')
started.classList.add('unhidden')
setTimeout(function () {
started.classList.remove('unhidden')
banner.classList.add('unhidden')
}, 4000);
chrome.tabs.sendMessage(tabs[0].id, {
action: "copy"
})
});
}
function dl() {
chrome.tabs.query({
active: true,
currentWindow: true
}, async function (tabs) {
let started = document.querySelector('#startednotif')
let banner = document.querySelector('#n1')
banner.classList.remove('unhidden')
started.classList.add('unhidden')
setTimeout(function () {
started.classList.remove('unhidden')
banner.classList.add('unhidden')
}, 4000);
chrome.tabs.sendMessage(tabs[0].id, {
action: "download"
})
});
}
run()
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
const $notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
let banner = document.querySelector('#n1')
banner.classList.add('unhidden')
});
});
var down = document.querySelectorAll('.download-btn')
var clip = document.querySelectorAll('.clipboard-btn')
down[0].addEventListener('click', (dl));
clip[0].addEventListener('click', (copy));
});
