How to add borders around hovered divs preferably the feature should be activated after a button is clicked on the extension popup?

Question

I would like to give the possibility to the user to hover on divs on a page and have a border appear temporarily around the hovered div

I'm actually adding style to all divs but that's not ideal

div:hover {
    outline: 1px solid blue;
}

It would be better to activate this mode when a user clicks on a button on the popup like the example in the pictures below

No the button would activate the feature. Basically once activated the user can hover on any div on the page and it would add a border temporarily. Basically add a border on the div that is being hovered on (as seen in the pictures) — AziCode, Feb 10 '21 at 23:59

PXLDEV · Answer 1 · 2021-08-22T14:46:08.283

After some research I found this question which is about a similar situation.

For this issue, an example would look like this (adapted from linked question):

popup.js (linked in your popup):

document.getElementById('yourButton').addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(activeTabs) {
        chrome.tabs.sendMessage(activeTabs[0].id, { action: 'injectCSS' });
    });
});

then you could include an content.js into every (or your preferred) site via your application's manifest file:

"content_scripts": [
    {
      "matches": ["https://airbnb.com/*"],    //or "matches": ["<all_urls>"]
      "js": ["js/content.js"]
    }
]

content.js:

chrome.runtime.onMessage.addListener(function(request) {
    if (request.action === 'injectCSS') {
        var css = document.createElement('style');
        css.innerHTML = 'div:hover { outline: 1px solid blue; }';
        document.head.appendChild(css);
    }
});

Explanation:
popup.js listens for the onClick event of the button ID #yourButton in your popup. If triggered, a message event is piped to the currently selected tab and handled by content.js, wich is linked into the site by your extension's manifest. This script then creates a new <style> element, pastes the CSS into it and appends it to the <head> section of the DOM.

I hope I could help!

Great thanks for your answer, no need to indicate Airbnb. It should work on any website where the user activate the extension — AziCode, Feb 11 '21 at 00:00

score 0 · Answer 2 · answered Feb 11 '21 at 00:02

You can do this if you dynamically add a CSS class.

element.classList.remove("nameClass")
element.classList.add("nameClass");

mdn classList : < https://developer.mozilla.org/en-US/docs/Web/API/Element/classList >

Example:

 
let isEnabledHover = false;
let main = document.getElementById('myMain');

function myFunction() {
 
    if (isEnabledHover) {
        isEnabledHover = false;
      for (var i = 0; i < main.children.length; i++) {
          main.children[i].classList.remove("useRequireBorder");
      } 
    } else {
        isEnabledHover = true;
        for (var i = 0; i < main.children.length; i++) {
            main.children[i].classList.add("useRequireBorder");
        }
    }
    
 
}

.useRequireBorder:hover{
      outline: 1px solid blue;
}

<div id="myMain">
  <div>
    <button onClick="myFunction()">enabled hover element</button>
  </div>
  <div>
    <h1>Hello World</h1>
  </div>
  <div>
    <h2>Hello World</h2>
  </div>
  <div>
    <h3>Hello World</h3>
  </div>
  <div>
    <h4>Hello World</h4>
  </div>
</div>

How to add borders around hovered divs preferably the feature should be activated after a button is clicked on the extension popup?

2 Answers2