How to add style and webfonts to a Chrome Extension content script (CSS)

An iFrame

This has the benefit of keeping everything separate. You can then style your content inside it how you wish. This has the added benefit of allowing you to also rely on libraries like jQuery or Angular without fear of this conflicting with libraries. Its definitely a good option (and one you’ll noticed used by the most popular content scripts). But sometimes you might not want to so for that you can…

Override Style

When you insert your extension and css you will need to ensure that every class has every attribute set to default (or risk the pages CSS style your script very different). The way I’ve done this in the past is using SCSS.

.my-unique-app-name-default {
font-family: $font-stack;
width: auto;
height: auto;
top: auto;
bottom: auto;
left: auto;
right: auto;
margin: 0;
padding: 0;
display: block;
background-color: transparent;
border-radius: 0;
font-weight: normal;
font-size: 13px;
color: $default-font-color;
-webkit-font-smoothing: antialiased;
box-shadow: none;
border: 0;
letter-spacing: normal;
}
.my-unique-app-name-sub-class {
@extend .my-unique-app-name-default;
text-align: center;
display: flex;
justify-content: center;
padding-top: 10px;
}
.my-unique-app-name-sub-class h4 {
@extend .my-unique-app-name-default;
font-size: 20px;
}

Webfonts

Now that you have this though, what about beautiful fonts? Well you can’t inject them in as if you own the site, so the best way to go about it is to download the webfonts you want, and then add them into your CSS.

@font-face {
font-family: ‘Your-unique-app-name-font’;
font-style: normal;
font-weight: 700;
src: url(‘chrome-extension://__MSG_@@extension_id__/fonts/Roboto-Regular.ttf’);
}
“web_accessible_resources”: [
“styles/contentscript.css”,
“fonts/Roboto-Regular.ttf”
]

--

--

Founder of Haystack (https://www.haystackapps.com), Merlin Guides, ex-Google, Entrepreneur, Pun-dit.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charles Douglas-Osborn

Charles Douglas-Osborn

Founder of Haystack (https://www.haystackapps.com), Merlin Guides, ex-Google, Entrepreneur, Pun-dit.