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

The idea of a content script is a piece of javascript which is inserted onto the page (injected if you will). This gives you a certain degree of control over the page. Normally you’ll want to have an interface for users to interact with the new javascript you have added — such as some new button or modal. However as there is CSS from the original page this can cause conflicts. Often you’ll want to style these elements for which you have 2 options:

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.

By having a base class which has the general defaults, you’re then able to extend your classes from this. Make sure that you call your css classes something very unique though to not cause conflicts, i.e. something relevant to your app and long. You’ll also want to make sure you do this for every element you insert i.e. if you add a header, you’ll need to override that style in the same way. Example:

.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.

To download webfonts from Google, find the font you want i.e.

Google Fonts

Click on the download link (top right):

Select ‘Collection as zip’:

Then place the fonts you want into a new folder in your extension.

To reference these files in your CSS you’ll then to do the following:

@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’); 
}

When you reference this font in the future you use the font-family you’ve specified there to bring it in (again keep it unique to stop conflicts).

Finally, because of the way extensions work in Manifest 2.0, you’ll also need to set that these in the Web Accessible part of your manifest:

“web_accessible_resources”: [
 “styles/contentscript.css”,
 “fonts/Roboto-Regular.ttf”
 ]

And voila! A way for you to be able to style your content scripts as you would like to without needing to use an iFrame ☺

Are you based in NYC? Merlin Guides is hiring if so, if you’re interested please apply to one of our roles here (and include this article!).