0

I'm trying to create a chrome extension which will contain a button and once the user will click on the button it will trigger a download event. However, I'm not sure why the button event is not getting triggered.

I'm providing various snippets of my code which I tried :

var buttonExists = document.getElementById("sync");
console.log(buttonExists);
// onClick's logic below:
if (buttonExists) {
  buttonExists.addEventListener("click", () => getData());
}

I even tried this code :

document.addEventListener("DOMContentLoaded", function () {
  console.log("Dom content loaded");
  var buttonExists = document.getElementById("sync");
  console.log(buttonExists);
  // onClick's logic below:
  if (buttonExists) {
   buttonExists.addEventListener("click", () => getData());
  }
});

getData function :

function getData() {
  console.log("In get data");
  console.log("Token", token);
  console.log("Url", url);
}

Background.html file :

<html>
  <head> </head>
  <body>
    <form>
      <button id="sync">Sync</button>
      <p id="demo"></p>
    </form>
    <script type="text/javascript" src="background.js"></script>
  </body>
</html>

Manifest.json:

{
  "name": "Extension boilerplate",
  "version": "0.0.1",
  "manifest_version": 2,
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "page": "src/bg/background.html",
    "persistent": true
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "page action demo",
    "default_popup": "src/bg/background.html"
  },
  "permissions": [
    "url",
    "webRequest",
    "declarativeContent"
  ],
  "content_scripts": [
    {
      "matches": ["url"],
      "js": ["src/bg/background.js"]
    }
  ]
}

Any help is appreciated.

Namrata Sanger
  • 105
  • 1
  • 1
  • 11
  • Remove `content_scripts` and `background` sections from manifest.json. Rename background.js to popup.js and rename background.html to popup.html. 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. – wOxxOm Apr 01 '21 at 04:39
  • @wOxxOm Thank you for commenting. I did as you said but the inspect window isn't poping up. Do you think I might have made some mistakes ? – Namrata Sanger Apr 01 '21 at 04:53
  • Replace `page_action` with `browser_action` in manifest.json. – wOxxOm Apr 01 '21 at 04:53
  • I did but why I'm unable to see the output of the getData function on my console. Moreover, I was using `page_action` because the extension should work only on a single website. However, now it started working on all the websites. – Namrata Sanger Apr 01 '21 at 04:59
  • I mean it shows the output but the very next second it removes the `console.log()` output. – Namrata Sanger Apr 01 '21 at 05:01
  • The page reloads because you've used a `
    ` element so just remove it, you don't need it.
     – wOxxOm Apr 01 '21 at 05:02
  • Thank you so much this really helped me a lot. I'm wondering if i use page_action will that be okay because I need to restrict it's use. – Namrata Sanger Apr 01 '21 at 05:08
  • Hi @wOxxOm can you please help me out with chrome extension. I'm not sure why it's happening. So, the thing is if I click on "Inspect popup" everything works fine but when I close it no functionality seems to be working. Moreover, I just need the chrome extension to work on a specific website while using browser_action it works on all the website. So, any idea how can I solve this problem. Any help is appreciated. – Namrata Sanger Apr 05 '21 at 07:12
  • The popup is a window so it runs when opened and it's completely destroyed when closed. You probably tried to use a global variable in which case you should switch to chrome.storage or localStorage. For further assistance open a new question with a proper [MCVE](/help/mcve). – wOxxOm Apr 05 '21 at 07:39
  • Thank you for commenting @wOxxOm. Yes, I'm using global variables. – Namrata Sanger Apr 05 '21 at 07:41
  • Hi @wOxxOm I tried using chrome.storage but now new problem is the download feature which starts working only when I click on inspect popup once. Is it because of using local variables in the function ? – Namrata Sanger Apr 05 '21 at 08:50
  • For further assistance open a new question with a proper [MCVE](/help/mcve). – wOxxOm Apr 05 '21 at 09:05

0 Answers0