Chrome Extension - Edit Default HTML

Question

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?

Hatchet · Accepted Answer · 2016-01-16T20:58:58.067

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;
}

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.

@TheCodesee I'm sorry, but what do you mean by that? If you need to know how to inject CSS, https://stackoverflow.com/questions/11553600/how-to-inject-css-using-content-script-file-in-chrome-extension — Hatchet, Jan 16 '16 at 20:04
Thank you very much, I appreciate your range of answers and I was able to refer to them when I experienced further issues! — The Codesee, May 03 '16 at 18:03

Chrome Extension - Edit Default HTML

1 Answers1