Background: I am trying to create a firefox extension where I when I click the extension button, a pop up appears with a "count" button displayed. When I click the "count" button I want it to go through all my open tabs that match a url and count how many comments there are. With that being said, I havent gotten that far into the code, but I cant seem to get the background script to communicate with the content-script. In this program I am just using a simple console.log statement to make sure they are connected. New to javascript and extensions in general so any help would be appreciated.
manifest.json
{
"manifest_version": 2,
"name": "Ticket Audit",
"version": "1.0",
"description": "Gets information about the tickets regarding comments",
"icons": {"48":"./image.png"},
"content_scripts": [
{
"matches": ["https://testsite.com/*"],
"js": ["content-script.js"]
}
],
"background":{
"scripts":["count.js"]
},
"browser_specific_settings": {
"gecko": {
"id": "test@gmail.com"
}
},
"permissions":[
"https://testsite.com/*/",
"activeTab",
"tabs"
],
"browser_action": {
"default_icon": "ts.png",
"default_title": "TicketAudit",
"default_popup": "ticketaudit.html"
}
}
count.js
function getTabs(){
browser.tabs.query({url:"https://testsite.com/*"})
.then(sendMessageToTabs)
}
function sendMessageToTabs(tabs){
for (const tab of tabs){
browser.tabs.executeScript(tab.id,{file: "/content-script.js"})
}
}
content-script.js
console.log("test")
ticketaudit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="popup-body">
<button onclick="getTabs()">Count</button>
</div>
<script src="count.js"></script>
</body>
</html>