How to? get access to the mouse and click events

Add-ons Development
#1

I am sure this is answered somewhere, but I’m having trouble coming up with the right way to search for it. Also writing out this question has helped me think it through a bit so if this kind of question a bit too low effort I’ll remove it.

I want to develop an extension where users can select an element with the mouse much like with the inspector tool. Like with colorzilla if anyone has used that. I want to have access to the Element after a user clicks it.

From the popup, once a user clicks a button like ‘select element’, I’d like to register a mouse click event listener. So that when the user clicks on something in the page they are on I get access to this element.

Is this the right track? Or does anyone have better ideas or something I may be missing? And if anyone knows where in the docs I should poke around? Thanks.

How to get the result of element selector selection
#2

I would use mouseover and onmouseout event handlers.
For example, open developer console and run this:

window.onmouseover = e => e.target.style.setProperty('outline', '2px solid red');
window.onmouseout =  e => e.target.style.removeProperty('outline');
window.onclick =     e => e.target.style.setProperty('background', '#FF000077');

Then move mouse around and it will “highlight” hovered elements. Then clicked element will get a red background :slight_smile:.

Proof of concept, complete! :smiley:

1 Like
#3

Thanks, I knew about these window events. I still appreciate the help though.

The problem I had was accessing these events from my popup javascript file though. I’ll be doing something like you showed along with runtime.sendMessage() . This message part was the main piece I was missing.

Thanks!

#4

You can’t access them from popup, but you can indeed use messaging system to send messages.
What you should do is use “activeTab” permission, that will give you access to the currently opened page the moment you open the popup.
Then you can inject javascript file into that page and that file can have those event listeners and all the logic you need. You can still communicate with popup, but note that popup will CLOSE (!!!) the moment you click on anything on the page.

So it may be better to create “modal window” inside the page. That’s less trivial but still doable.

#5

Thank you. Eventually I may implement a modal window like you said.

For now though I am saving the information about the element I need into local storage. So that when the popup is reopened I can access it.

One more question, is there a way to stop the click event propagation in time so that if a user clicks on a link it does not follow or perform other actions? event.stopPropagation does not seem to work.

window.addEventListener('click', (event) => {
    event.stopPropagation();
    const target = event.target as HTMLElement;
    const computedStyles = window.getComputedStyle(target);
    console.log(computedStyles.backgroundColor, computedStyles.color, computedStyles.outlineColor);
  });
#6

The stopping propagation will only prevent event from bubbling up the DOM tree.
To prevent “default link action” which is opening the page, you need to call:

e.preventDefault();
// and instead of stopPropagation use stopImmediatePropagation:
e.stopImmediatePropagation();
1 Like