Javascript and Chrome extension new guy here. So here is what I am trying to figure out: I would like to build a Chrome extension that sends the Chrome active tab URL to an HTTP endpoint via POST (when I push the button) and then have it display the HTTP response result.
I reviewed https://developer.chrome.com/docs/extensions/mv3/getstarted/ and that helped me with some of the basics but I am not sure on where to get started in terms of moving from here. I have been all over the place trying to figure this out (which I appreciate in terms of learning something new) but now I am feeling stuck. Below is what I am currently working with - All recommendations on how to approach are appreciated, cheers.
manifest.json
{
"name": "Prototype",
"description": "Prototype",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "tabs"],
"action": {
"default_popup": "popup2.html",
"default_icon": {
"16": "/images/test.png"
}
},
"icons": {
"16": "/images/test.png"
}
}
popup2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="myButton.css">
</head>
<body style="background-color:Gray;">
<a href="#" class="myButton">Scan</a>
</body>
</html>
myButton.css
.myButton {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.myButton:active {
position:relative;
top:1px;
}
background.js
// background.js
chrome.browserAction.onClicked.addListener(function(e){
console.log(e.url);
//give you the url of the tab on which you clicked the extension
})