CODEWITHSUNDEEP
jquerycssgoogle-chrome-extension
The Codesee
The Codesee

Reputation: 3783

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?

Upvotes: 1

Views: 196

Answers (1)

Hatchet
Hatchet

Reputation: 5428

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.

Upvotes: 2

Related Questions