Tag Archives: content_scripts

How to inject CSS of jquery-ui, fontawesome, … in the current page

Hello, this time some trick about Chrome Extension.

Let’s put some background, you got a content.js script, and for some reason you need to inject jquery-ui, font-awesome and some other stuff in the page of the user because you want to display some div that are draggable and with some cute “pictures”.

If you try to inject the css of jquery-ui inside the page, for example by doing an append in the head of the page, it will work for the css itself. But what if, like jquery-ui, it requires images (for ex: background: url(‘../images/image.jpg’);)? If you try to so, you’ll notice that the browser will try to load the images from the domain name of the current page, and not from your extension, and obviously it won’t find it.

A solution could be to just modify the sources with grep or whatever you want to match your needs. But, what if you want to upgrade your jquery-ui in a few days? Dirty …

So as a workaround I did this little function (requires JQuery):

// first declare this variable, replace the xxxxxxxxxxxxxxxxxxx by the id of your extension
var CHROME_EXTENSION_URL = 'chrome-extension://xxxxxxxxxxxxxxxxxxx';

/**
	inject CSS file in the current page, it replaces the relative URL by absolute ones using the chrome-extension URL
	**/
function injectCSS(file){
	var folder = file.split('/');
	folder = (folder.length >= 2)? folder[0] + '/' : '';
	
	$.get(chrome.extension.getURL(file), function(data){
		var content = data.replace(/url(s*('|")(?!data:image)(.{2})?/g, function(str, $1){
			return 'url(' + $1 + CHROME_EXTENSION_URL + '/' + folder;
		});
		$('' + content + '').appendTo('head');
	});
}

It loads the CSS file (need to be in the “web_accessible_resources” section of the manifest.json, see below), replaces the relative path for “url(” by the the chrome-extension:// URL and injects it as a style markup in the current page.
The “(?!data:image)” is there to not replace for the base 64 encoded images.

Next step is to use this function to use jquery-ui and font-awesome, just do like that:

// for the parameter write the path from the beginning of your application's directory
injectCSS('jquery-ui/jquery-ui.min.css');

injectCSS('font-awesome/css/font-awesome.min.css');

And finally, don’t forget to modify your manifest.json to add the “web_accessible_resources” section and update the “content_scripts”.
It must look like that in this case:


{
	"name": "your app's name",
	"description": "your description",
	"version": "1.0",
	"permissions": [
		"activeTab"
	],
	"browser_action": {
		"default_title": "your title",
		"default_popup": "popup.html"
	},
	"web_accessible_resources": [
		"jquery-ui/*",
		"font-awesome/*"
	],
 	"content_scripts": [
		{
			"matches": ["http://test.com/"],
			"js": [
				"jquery/jquery.min.js",
				"jquery-ui/jquery-ui.min.js",
				"content.js"
			],
			"css": [
				"content.css"
			]
		}
	],
	"manifest_version": 2
}

You can make the whole jquery-ui folder available (to allow images, fonts, …), same goes for font-awesome.
Also in the “content-scripts”, you notice I inject “jquery/jquery.min.js” and the “jquery-ui/jquery-ui.min.js”, it’s to use them from the content.js and inside the current page.
Voilà, if you tried it and find some bug or anything, just drop some feedback. 🙂