Chrome Extension: How to Completely Separate Your Content Script CSS from Webpage CSS

When I was writing our second Chrome extension Starry, I felt so frustrated that I was constantly banging my head against the table. If your Chrome extension is also trying to add CSS and HTML elements on top of existing webpages (e.g. a sidebar, a sticker, an overlay box, whatever you call it), you probably feel the same way.

Because there are trillions of webpages out there and each of them has different sets of CSS, it’s extremely difficult to ensure that they won’t clash with your content script. Let’s face it, you can’t possibly specify every CSS property for each of your element using the highest specificity. That’s just insane.

So I decided to do some research and create a library to solve the frustration that Starry and other Chrome extensions might have.

And, Boundary was born.

Introducing Boundary

Boundary is a CSS+Javascript library built for Chrome extension developers to easily create HTML elements that won’t affect or be affected by the current webpage’s CSS. Strongly recommended if you are considering adding a sticker, a sidebar or any overlay box using content script.

Boundary uses the concept of a “box” to represent an element that’s independent from the existing webpage, which means that the webpage’s CSS will not be applied to any “box” created by Boundary, nor will any CSS applied to elements within “boxes” be applied to the webpage.

How to Use

Install

Put boundary folder into your extension folder and modify manifest.json in the following manner:

...
"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": [
        "boundary/boundary.css",
        "your-stylesheet-for-boxes.css"
    ],
    "js": [
        "boundary/jquery.js",
        "boundary/boundary.js",
        "your-content-script-javascript.js"
    ],
    "all_frames": false
}],
"web_accessible_resources": [
    "boundary/boundary-extra.css",
    "your-stylesheet-for-elements-within-boxes.css"
],
...

Stylesheets

Put CSS for boxes themselves in your-stylesheet-for-boxes.css (E.g. box position, width, height, z-index).

Put CSS for elements within boxes in your-stylesheet-for-elements-within-boxes.css). Again, these CSS properties will not affect / be affected by the existing webpage.

Create A Box

var box = Boundary.createBox(id, className);
// THIS WILL RETURN A JQUERY DOM ELEMENT
// YOU CAN DO SOMETHING LIKE
box.html(SOME_HTML);

Load CSS for Elements Within A Box

Boundary.loadBoxCSS(boxSelector, CSSPath);

Remove A Box:

$(BOX_SELECTOR).remove(); // THIS IS PLAIN JQUERY

Find & Modify A Box:

var box = Boundary.findBox(BOX_SELECTOR);
box.append(SOME_HTML); // THIS IS PLAIN JQUERY
// OR
Boundary.appendToBox(BOX_SELECTOR, SOME_HTML);
Boundary.prependToBox(BOX_SELECTOR, SOME_HTML);
Boundary.rewriteBox(BOX_SELECTOR, SOME_HTML);

Find & Modify Matched Elements Within All Boxes:

var elem = Boundary.find(ELEMENT_SELECTOR);
elem.append(SOME_HTML); // THIS IS PLAIN JQUERY
// OR
Boundary.append(ELEMENT_SELECTOR, SOME_HTML);
Boundary.prepend(ELEMENT_SELECTOR, SOME_HTML);
Boundary.rewrite(ELEMENT_SELECTOR, SOME_HTML);

Find/Modify Matched Elements Within A Box:

var elem = Boundary.findElemInBox(ELEMENT_SELECTOR, BOX_SELECTOR);
elem.append(SOME_HTML); // THIS IS PLAIN JQUERY
// OR
Boundary.appendElemInBox(ELEMENT_SELECTOR, BOX_SELECTOR, HTML);
Boundary.prependElemInBox(ELEMENT_SELECTOR, BOX_SELECTOR, HTML);
Boundary.rewriteElemInBox(ELEMENT_SELECTOR, BOX_SELECTOR, HTML);

Download

As a gift from Starry team, Boundary is free and open sourced.

Click below to download it and give it a try. We also recommend taking a look at our Sample app to better understand the library.

Let us know if you have any question or feedback!

liviavinci/Boundary