Injecting your own style sheet into another web page

Hello,

I am working on a project (a Firefox extension if it matters), which basically highlights words on the page that a user enters via a text box. To do this, I need to apply an outside style sheet to the page, or insert my style sheet directly into the existing website.

The two things that I have tried so far:

First, I tried this:

var head = document.getElementsByTagName('head')[0];
var styleString = "<link rel=\"stylesheet\" href=\"highlight.css\" type=\"text/css\"/>";
head.innerHTML = head.innerHTML + styleString;

This made my JavaScript not execute at all (I didn't get any errors in the error console that seemed to be related, so I'm still not sure why this didn't work).

After that, I tried to inject the style rules directly into the browser like this:

var CSS = "
.tools {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
padding-bottom: 20px;
border-bottom: 4px solid;
}

... Insert the rest of the really long style sheet here ...

";
document.styleSheets[0].insertRule(CSS,0);


This did not work either.

Any idea on this would be much appreciated! Thanks :)

I don't think what you propose is possible (Thank Heavens! ;) )

For security reasons JavaScript cannot access anything beyond the domain of the current page. This is known as the "same origin policy" and prevents a document or script loaded from one origin from getting or setting properties of a document from a different origin.

i have had trouble adding external stylesheets like this before.
i doubt messing with head's innerHTML will trigger re-calc of the style rules.
you could try building the link tag programatically ala document.createElement("link"),
but i have had trouble doing that as well.

i use my own tested approach in situations like the one you outline.


try using the two functions below.
the first one loads a file into a string.
the second one turns a string into a new stylesheet.





function IO(U, V) {
//LA MOD String Version. A tiny ajax library. 2007, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, !1);
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;}

function aCSS(iCSS) {var vi = "adds a css tyle section to the document, filled with text like an external stylesheet";var D = document;var h = D.getElementsByTagName("head");if (!h[0]) {return;}var ns = document.createElement("style");ns.type = "text/css";h[0].appendChild(ns);try {if (ns.styleSheet && ns.styleSheet.cssText) {ns.styleSheet.cssText = iCSS;return;}ns.innerHTML = iCSS;} catch (e3) {try {ns.appendChild(document.createTextNode(iCSS));} catch (e3) {}}}

// example aCSS(" body * {color: red}")




for your purpose,


aCSS(IO("highlight.css"));


-----------------------------
note that to inject script into arbitrary pages,
you must meet at least one of the following requirements:

-run the code from the address bar (all browsers)
-run inside an extention (firefox, opera, and in a complicated manner, IE)
-run from a javascript console or utility like firebug. (firefox, opera)
-run using grease monkey (firefox)

Thanks goes out to both of you! You guys really helped me out, and I have some new things to look into now as well.