0

I am designing a Chrome plugin. I have a script that injects CSS into a web page. It is linked to the popup.html for now, because it only works like that. 

The problem is, I have to click on the icon to open the popup before the css is injected. Because that loads the javascript file to inject the CSS. I don't want to have to do that. 

Oh, content scripts aren't an option, because they don't support the chrome.tabs API.

What I want to do: inject the CSS without ANY user interaction. Because to inject the CSS I have to click on the icon to open the popup to load the js to load the css.

How can I load that javascript file in the background to inject the css without ANY user interaction? 

Jacques Blom
  • 1,794
  • 5
  • 24
  • 42
  • _As I have mentioned in previous questions_??? StackOverflow isn't your blog... – gdoron Feb 19 '12 at 11:33
  • @Jacques, This question is almost at the point that it's clear. However, you're missing one part: **How** should the CSS be injected? When the tab is navigating to a certain URL? When the user interacts with some browser control? ..? – Rob W Feb 19 '12 at 11:37
  • Question is very unclear. Rephrase it or restructure it please. – Akshaya Shanbhogue Feb 19 '12 at 12:19
  • I have edited my question. Just to remind you again, the CSS needs to be injected without any user interaction, AUTOMATICALLY. – Jacques Blom Feb 19 '12 at 12:58

1 Answers1

1

As I have answered earlier, you can inject CSS via a Content script definition in manifest.json. Your content script can communicate with the background page using chrome.extension.sendRequest (in the content script) and chrome.extension.onRequest (at the background page).

So, content scripts are the way to solve your problem.

Examples:

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • This page, http://code.google.com/chrome/extensions/content_scripts.html says: "However, content scripts have some limitations. They cannot Use chrome.* APIs (except for parts of chrome.extension)" So how do I use chrome.extension.sendRequest on the content script? – Jacques Blom Feb 19 '12 at 18:07
  • @JacquesBlom Have you read the [linked documentation](http://code.google.com/chrome/extensions/extension.html#content%20scripts) and examples in the linked answers? I provided them for a reason... – Rob W Feb 19 '12 at 18:17
  • Would you please mind giving me an example or explain what I should do. Do I have to do the XMLHttpRequest on the background page and then inject the css with the content script. If so, how do I inject the css, because I can't use chrome.tabs.insertCSS. Thanks so much! – Jacques Blom Feb 20 '12 at 13:38
  • It isn't working. The code in the sendRequest function won't execute. I addrd an alert, but to no avail. An alert works with the onRequest function though. – Jacques Blom Feb 20 '12 at 16:07
  • `chrome.extension.onRequest` should be `chrome.extension.onRequest.addListener`. See http://pastebin.com/yXEdA6cu – Rob W Feb 20 '12 at 22:47
  • Here is my plugin's code: http://pastebin.com/0YEjHPUD. The 001.css is in the same folder. It won't work. Would you mind telling me what exactly is wrong? – Jacques Blom Feb 21 '12 at 14:23
  • This code didn't work. Even outside the sendRequest function. `var currentid = '001.css'; var style = document.createElement('link'); style.type = "text/css"; style.rel = "stylesheet"; style.href = currentid; (document.head||document.documentElement.firstElementChild).appendChild(style); ` – Jacques Blom Feb 21 '12 at 14:31
  • @JacquesBlom What's the response text of [`http://localhost:8888/login/popuplogin/myaccount.php`](http://localhost:8888/login/popuplogin/myaccount.php)? If `001.css` is contained within your extension's directory, use the `chrome.extension.getURL` method: http://pastebin.com/aRwMA4fS – Rob W Feb 21 '12 at 14:36
  • The response text is: `Pink,001,pink|Orange,002,orange|L!ime,003,lime|||||001` – Jacques Blom Feb 21 '12 at 14:41
  • @JacquesBlom Where's `001.css` located? If it's at your external server, you have to specify the absolute URI: `var currentid = 'http://localhost:8888/login/popuplogin/' + currenttheme + '.css';`. See http://pastebin.com/By6iAsnF – Rob W Feb 21 '12 at 14:43
  • It is in the plugin folder itself, for now. – Jacques Blom Feb 21 '12 at 14:45
  • The code you provided won't work. :( The website's CSS is still the same. – Jacques Blom Feb 21 '12 at 14:46
  • Use the developer tools to check if the requested file exist. The code will only fail if the style declarations are overridden by the page's style, or when the path is not found (if you want any more help, specify the locations of your script, CSS and page). – Rob W Feb 21 '12 at 14:51
  • What exactly do you mean by, "specify the locations of your script, CSS and page" – Jacques Blom Feb 21 '12 at 15:08
  • "Where are your script and CSS files located? What's the URL of the page in which you're ibjecting the CSS?" – Rob W Feb 21 '12 at 15:11
  • Oh, thanks! **My CSS file:** it is located in the root of the plugin directory (where manifest.json is) **My script:** Is also located in the root of the directory (called contentscript.js) **The URL i'm injecting the CSS to** is Facebook.com. You can access them all at: http://pastebin.com/0YEjHPUD – Jacques Blom Feb 21 '12 at 15:27
  • @JacquesBlom Then use the **[`chrome.extension.getURL`](http://code.google.com/chrome/extensions/extension.html#method-getURL)** method, as mentioned in my [previous comment](http://stackoverflow.com/questions/9348728/execute-js-to-change-css-in-background-chrome-extensions/9350056#comment11846759_9350056). See http://pastebin.com/aRwMA4fS – Rob W Feb 21 '12 at 15:31
  • I tried that, but it won't work. The only thing that worked so far was when I used chrome.tabs.insertCSS in a js file attached to the popup.html. – Jacques Blom Feb 21 '12 at 15:35
  • @JacquesBlom I have successfully tested my snippet in an isolated extension. The CSS is successfully injected. What exactely doesn't work? Add `!important` after your rules, eg `background-color: red !important;` to make sure that the styles are applied. **Test this extension to see that my snippet works fine: http://pastebin.com/85BiPde7** – Rob W Feb 21 '12 at 15:49
  • Thanks! It works brilliantly! My plugins are now finished. I really appreciate what you have done for me. – Jacques Blom Mar 02 '12 at 11:12
  • @JacquesBlom If your problem has been solved, mark the answer as accepted, so that others can see how to solve the question. – Rob W Mar 02 '12 at 16:11