0

I am creating for the first time a browser extension.

I created my popup, which contains different buttons that should trigger javascript functions. Except that when I click on a button, nothing happens.

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <button id="test">Test</button>
    </div>
    
    <script src="js/popup.js"></script>
</body>
</html>

js/popup.js

function save() {
    console.log('I save !!');
}

// I tried :
document.getElementById('test').innerHTML = 'TOTO'; => KO
document.getElementById('test').addEventListener('click',
    save); => KO
document.getElementById('test').click(function () {
    save();
}); => KO

manifest.json

{
  "manifest_version": 3,
  "name": "name of extension",
  "version": "2.0",
  "description": "Description about extension",
  "icons": {
    "512": "images/lbo_favicon.png"
  },
  "default_locale": "en",
  "action": {
    "default_title": "Click Me",
    "default_popup": "popup.html"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "windows": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y",
        "chromeos": "Ctrl+Shift+Y",
        "linux": "Ctrl+Shift+Y"
      }
    }
  }
}

No reaction, no error in console either.

How can I get my clicks in the popup to be taken into account by my javascript ?

Thank you.

Sili
  • 33
  • 9
  • 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 Dec 14 '22 at 12:16
  • @wOxxOm I do use the extension console, but there is nothing in it. My console.log is not displayed and there are no errors either. It's inert. – Sili Dec 14 '22 at 12:33
  • Since the code is correct (except the last 3 lines where the callback is ignored) the only explanation is that you're using the wrong console, not the popup's console. – wOxxOm Dec 14 '22 at 13:18
  • Except that I do use the console in my popup inspector. : https://zupimages.net/up/22/50/di7l.png – Sili Dec 14 '22 at 13:27
  • Set a breakpoint in devtools debugger in your code and see what happens when you click the element. – wOxxOm Dec 14 '22 at 13:48
  • This is precisely what I am explaining and the reason for my question: when I click -> nothing happens. No error, no nothing, the console remains empty of any reaction. – Sili Dec 14 '22 at 13:51
  • I just understood. I actually load 2 js files in my popup. One dedicated to the translation. Another one for my actions. The translation one is in the same place as popup.js. It seems that popup.js is not loaded. – Sili Dec 14 '22 at 13:55
  • Well, you need to make sure the code you post here replicates the problem, otherwise it's impossible for us to guess. – wOxxOm Dec 14 '22 at 14:28
  • I don't see any reason why it only loads one javascript file. As far as I know, there is no restriction on the number of javascript files you can import into an html file. Any idea why it doesn't load? – Sili Dec 14 '22 at 14:41
  • Your code here loads just one js file, and this is exactly what the browser does. – wOxxOm Dec 14 '22 at 14:43
  • As I explain (and you blame me for "hiding" it), I actually import two scripts: js/translate.js and js/popus.js. Except that in the popup console, in the source tab, only js/translate.js appears. I'm just asking if anyone has any idea why it doesn't load my two script tags. – Sili Dec 14 '22 at 14:50
  • The point I make is that you need to show your real code, see [MCVE](/help/mcve). There might be a typo or another problem which we can't guess from your current incomplete code because it's correct. – wOxxOm Dec 14 '22 at 15:11

0 Answers0