v3 - adding onclick listener for button in options page

[Tyler Crews]

Hey, I'm having a difficult time finding some good documentation for how to create a listener for a button onclick.

Had an in-line function call in my button at first, but obviously that failed out because it's not allowed for chrome extensions.

So I'm trying to create a listener, but I'm not sure how this syntax is supposed to look.

For context, the html document is an internal page that I'm pulling up with my chrome (browser) action.

in my html page:

<script src='serviceWorker.js'> </script>

<button class='button button1' id='button 1'><b> Instructions</b></button>

//trying to refer to this button by its id, but I can change that

in my service worker js:

document.getElementById('button 1').addEventListener('click', myFunction('Instructions'));

function myFunction(div id){

    console.log('makes div invisible');

    document.getElementById(div id).style.display = 'none';

    return;

};

All I know is that this isn't really close. 

Thanks for your help!

[Erek Speed]

Creating event listeners for a button isn't a chrome extension specific problem which is why you might have trouble finding documentation restricted to chrome extensions. I recommend a general JS/HTML tutorial before getting too much deeper since it will just get harder from here. Also, if you use a language aware IDE like Visual Studio Code it can warn you for common errors earlier in your development process.

Email is not the best place to do a line by line review of your code but if you look at this sample JS file you can see some examples of click listeners and compare them to yours to figure out what's wrong:

https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/mv2-archive/api/water_alarm_notification/popup.js

It's a bit strange that your JS file is called 'serviceWorker.js' but that doesn't really matter if you're including it via a script tag in your HTML.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/3ccfdaef-04b3-4716-bc21-01b023419a1dn%40chromium.org.

[avm99963]

Hi everyone!

Added to what Erek said, I'd like to leave some comments about your code which will hopefully help you move in the right direction to fix it.

  1 document.getElementById('button 1').addEventListener('click', myFunction('Instructions'));

  2 function myFunction(div id){

  3     console.log('makes div invisible');

  4     document.getElementById(div id).style.display = 'none';

  5     return;

  6 };

• Regarding line 1: while inline event handlers execute the code inside its attribute when the event is dispatched (for instance, <span onclick="alert('hello')">Click me</span> shows an alert when it is clicked), the addEventListener method doesn't work "in that same way". The addEventListener method's second argument is usually a function, so generally you provide the name of the function or the function as an anonymous function.
  
  In your case, the runtime evaluates myFunction('Instructions') as it runs your code, and passes the result of that function as the 2nd parameter of addEventListener as if it was the function which it should run each time the click event is dispatched, and this isn't what you want.
  
  
• Regarding lines 2 and 4: variables can't have spaces in the name, so div id should be substituted by something like div_id.
  
  
• Also, a final thing: when addEventListener calls your function, it provides an argument with the event details, you can take a look here in case it is useful to you: EventTarget.addEventListener() - Web APIs | MDN

So I'd suggest changing the code to something like this: (there isn't any div with the id "Instructions", but the text of the button, so I'll suppose that in your HTML you have something else like <div id="Instructions">To start the system you must...</div>)

  1 document.getElementById('button 1').addEventListener('click', function(e) {

  2     myFunction('Instructions');

  3 });

  4

  5 function myFunction(div_id) {

  6     console.log('makes div invisible');

  7     document.getElementById(div_id).style.display = 'none';

  8     return;

  9 };

In this example I've used an anonymous function.

Here's the code at JSFiddle so you can try it out: https://jsfiddle.net/0k8wa5rz/

Cheers :-)

[Tyler Crews]

@erek thanks for the resource, reading through it now.

These should be pretty much unchanged for manifest v3 right?

and is it weird to name it serviceworker? Is it usually just the same name as the html doc? 

In my extension's case I'm trying to have my action popout run with the same javascript page for the bulk of my extension so I can pass user inputs into the variables there, but maybe that's doing too much on the same page? 

@avm thanks for the great notes, and the docs to read through. That's a good catch with the listener format, it's been my formatting issue trying to get other listeners to work too -_-.

Really appreciate the help!

[Erek Speed]

On Wed, Aug 18, 2021 at 12:20 AM Tyler Crews <tycr...@gmail.com> wrote:

@erek thanks for the resource, reading through it now.

These should be pretty much unchanged for manifest v3 right?

and is it weird to name it serviceworker? Is it usually just the same name as the html doc? 

In my extension's case I'm trying to have my action popout run with the same javascript page for the bulk of my extension so I can pass user inputs into the variables there, but maybe that's doing too much on the same page? 

There may be some confusion here, even if you use the same file for your background page and your HTML page they won't share any variables. For example, if you saved a variable due to user input from your HTML page and then tried to use that variable in the SW when responding to some other event the variable would be empty since the two contexts are separate. Moreover, since SW are ephemeral any variables stored in memory will be lost when the SW is destroyed. If you need to persist state, you should use storage as per this article: https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/#state