Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to inject CSS into webpage through Chrome extension?

I do not know how to inject CSS into a webpage through a Chrome extension. I am trying to inject this into a web page:

body {    background: #000 !important; }  a {    color: #777 !important; } 

Here is my manifest.json:

{ "update_url":"http://clients2.google.com/service/update2/crx",   "name": "Test Extension",   "version": "1.0",   "description": "This is a test extension for Google Chrome.",   "icons": { "16": "icon16.png",            "48": "icon48.png",           "128": "icon128.png" },   "background_page": "background.html",   "browser_action": {     "default_icon": "icon19.png"   },   "content_scripts": [     {       "matches": ["http://test-website.com/*"],        "js": ["js/content-script.js"]     }   ],      "permissions": [ "tabs", "http://test-website.com/*" ]  } 
like image 786
timmya Avatar asked Oct 01 '11 08:10

timmya


People also ask

How do I add custom CSS to my website in Chrome?

Clicking on the “style. css” link will take you to the line of CSS code in the “Sources” panel. Making changes to the file in the Sources panel and pressing cmd + s on a Mac or ctrl + s in Windows will save the changes to your file system and will apply the changes to the web page.


2 Answers

You can have to add an extra line in your manifest file:

"content_scripts": [     {       "matches": ["http://test-website.com/*"],        "js": ["js/content-script.js"],       "css" : ["yourcss.css"]     } ], 

The CSS file as defined in "css": ["..."]will be added to every page which matches the location as mentioned in matches.

If you're developing a Chrome extension, make sure that you have a look at these pages:

  1. Developer's guide
    • Manifest files
    • Content scripts
    • Background pages
like image 102
Rob W Avatar answered Sep 26 '22 08:09

Rob W


You can also inject a css file into one or more tab's content by using the following syntax as detailed on the Chrome Tabs API webpage:

chrome.tabs.insertCSS(integer tabId, object details, function callback); 

You will first need the ID of your target tab, of course.

The Chrome Extension documentation doesn't discuss how the injected CSS is interpreted, but the fact is that CSS files that are injected into a webpage, by this method or by including them in the manifest, are interpreted as user stylesheets.

In this respect, it is important to note that if you do inject stylesheets by using these methods, they will be limited in one crucial way ( at least, as of Chrome v.19 ): Chrome ignores "!important" directives in user stylesheets. Your injected style rules will be trumped by anything included in the page as it was authored.

One work-around, if you want to avoid injecting inline style rules, is the following (I'm using jQuery for the actual insertion, but it could be done with straight Javascript):

$(document).ready(function() { var path = chrome.extension.getURL('styles/myExtensionRulz.css'); $('head').append($('<link>')     .attr("rel","stylesheet")     .attr("type","text/css")     .attr("href", path)); }); 

You can then put the stylesheet in your extension's styles folder, but you won't need to list it anywhere on the manifest. The relevant part above is that you will use the chrome API to get your stylesheet's URL, then plug that in as the link's href value. Now, your stylesheet will be given a higher precedence, and you can use the "!important" directive where needed.

This is the only solution that works for me in the latest version of Chrome.

like image 32
jCyCle Avatar answered Sep 24 '22 08:09

jCyCle