0

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
})
JRR
  • 327
  • 3
  • 16
  • 1) [How to see background.js console?](/a/10258029), Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. 2) browserAction is `action` now, see more in [mv3-migration](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/). 3) You don't need background.js and background section in manifest.json. Simply add `` and write your code in popup.js. – wOxxOm Jan 24 '22 at 01:06
  • Thanks wOx, so do I add `` as a content_script to the manifest.json? – JRR Jan 24 '22 at 04:31
  • No, in your html. – wOxxOm Jan 24 '22 at 08:35
  • Okay - how do I make it so the button activates the javascript? – JRR Jan 24 '22 at 23:46

0 Answers0