The Codesee The Codesee - 6 months ago 11
CSS Question

Chrome Extension - Edit Default HTML

I'm using

jQuery
in a Google Chrome extension to overwrite a website's default
CSS
.

The default class for
.CatalogHoverContent
is
display: none;
, however when the class
.SmallCatalogItemView
or
.CatalogItemInner
is hovered, it changes to
display: block;


I've attempted to prevent this by overwriting the style using the code below, however the website's default style seems to be overwriting this and the class
CatalogHoverContent
still isn't shown by default.

.CatalogHoverContent {
display: block;
}


Is there an alternative way to edit the style, such as JavaScript?

Answer

The trigger is the CSS. There are :hover rules attached to the two <div>s in the screenshot below: SmallCatalogItemView:hover and .CatalogItemInner:hover:

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    padding-bottom: 12px;
    padding-top: 10px;
}

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    top: -10px;
}

.SmallCatalogItemView:hover .CatalogItemInner {
    border: 1px solid #ccc;
    height: auto;
    left: -10px;
    top: -20px;
    width: 130px;
    z-index: 6;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
}

.CatalogItemInner:hover {
    position: absolute;
}

.CatalogItemInner, .CatalogItemInner:hover {
    background: #FFF;
    border: 0;
    outline: 0;
    overflow: visible;
    position: absolute;
    margin: 0;
    padding: 0;
}

screenshot

To stop this CSS from running, there are a few options:

  • Use JavaScript to set the style property of each element:

    var elements = document.querySelectorAll(".CatalogItemInner");
    for (var i = 0; i < elements.length; i++) {
        var el = elements[i];
        el.style.border = "none";
        // ...
        // Set the rest of the rules
    }
    
  • Use JavaScript to edit the stylesheet (document.styleSheets[i].cssRules[j].style.removeProperty() MDN). This will take some fine-tuning, though. You have to get the correct indices. How to change/remove CSS classes definitions at runtime?

  • Remove the CatalogItemInner class. This may have unintended side effects.

    element.classList.remove("CatalogItemInner");
    
  • Take a look at this and overwrite all of the rules:

    // Something like:
    addCSSRule(sheet, ".CatalogItemInner", "border: none");
    // etc.