1

I have found a javascript function that inverts colors on webpage:

String javascript = "javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }';var elemHead = document.getElementsByTagName(\"head\")[0];var elemCSS = document.getElementById(\"darkenCSS\");if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement('link');newSS.rel = 'stylesheet';newSS.href = 'data:text/css,' + escape(styles);newSS.id = \"darkenCSS\";elemHead.appendChild(newSS);}})();";

Is it possible to run this automatically? By that I mean load www.google.co.uk and apply this javascript function.4

Hope that makes sense, I don't know much about javascript.

CLARIFICATION:

I want to know if this javascript function can be appended to a URL at all. Something like http://www.google.com/?Javascript_blah_blah_blah

FURTHER CLARIFICATION:

I am making a basic web browser in Android. I want to invert colours on the webpage. I have made a button, that executes this javascript on the page. This works. But needs the user to press the button each time.

I want to make a switch to make permanently inverted.

So I need to browse to the url input and have it invert the colours automatically.

Hope this helps

Tony
  • 2,335
  • 21
  • 25
  • You would probably have to create an extension for the browser you're using that would inject this script on every page. – sdleihssirhc Sep 13 '11 at 20:48
  • So, you want your browser to automatically run this and invert the colors of every page you visit? You can probably build a Chrome or FireFox extension to do this. That's about all I can offer, though. – Surreal Dreams Sep 13 '11 at 20:49
  • The automatic part is hard.. You can't exactly force another site to run js. You could build an extension in Chrome, or run it manually from the address bar or console... – hookedonwinter Sep 13 '11 at 20:49
  • You can save it as a [bookmarklet](http://en.wikipedia.org/wiki/Bookmarklet) which can probably be put on your browser's toolbar, making it a one-click operation. – Marc B Sep 13 '11 at 20:52
  • i have clarified my question ... can anybody who has already commented help now. Thanks for your input so far – Tony Sep 13 '11 at 21:00
  • Please update the question and be specific which platform and browser you want to be able to do this from. – rlemon Sep 13 '11 at 21:02
  • Further clarification added. Hopefully clearer this time :-) – Tony Sep 13 '11 at 21:07
  • 1
    If you are going to make a browser, you can just manipulate on the document's source code - simply append this chunk of code at the end of the page within `` tags and it will be executed. Put the quoted JS code directly, or create a function from it and then use window.addEventListener / window.setTimeout. – jakub.g Sep 13 '11 at 21:21
  • Thank qbk that might be the answer! – Tony Sep 13 '11 at 21:32

4 Answers4

3

Yes, paste the string without quotes into the address bar. Be sure that the psuedo-protocol javascript: is at the beginning

addition by rlemon

You first need to modify your script to unescape the escaped quotes, then add a new bookmark to your addressbar. Edit the bookmark and change the location to 

javascript:%20(function%20(){var%20newSS,%20styles%20=%20'*%20{%20background-color:%20black%20!%20important;%20color:%20green%20!important;%20}a:link,%20a:link%20*%20{%20color:%20green%20!important;%20text-style:%20underline;%20}a:visited,%20a:visited%20*%20{%20color:%20#7f0000%20!important;%20}a:hover,%20a:hover%20*%20{%20color:%20red%20!important;%20}';var%20elemHead%20=%20document.getElementsByTagName("head")[0];var%20elemCSS%20=%20document.getElementById("darkenCSS");if%20(elemCSS){elemHead.removeChild(elemCSS);}else{newSS%20=%20document.createElement('link');newSS.rel%20=%20'stylesheet';newSS.href%20=%20'data:text/css,'%20+%20escape(styles);newSS.id%20=%20"darkenCSS";elemHead.appendChild(newSS);}})();

There you have it!

Community
  • 1
  • 1
Joe
  • 80,724
  • 18
  • 127
  • 145
  • 1
    That's not really automatic though. – hookedonwinter Sep 13 '11 at 20:50
  • @patrick, yes it does. The code provided needs to be modified. but it works. Tested in Chrome 13 and FF 6.0.1 – rlemon Sep 13 '11 at 20:52
  • Sorry I haven't made myself clear .... I am running this in an Android WebView. I want to know if it is possible to have a url and append this javascript function to run. Something like http://www.google.com/?JavaScript...sd..d.d.d.. etc – Tony Sep 13 '11 at 20:54
  • @rlemon: I meant pasting javascript in the address bar doesn't work in FF anymore. It does in Chrome, I was wrong about that one so I updated my comment. – user113716 Sep 13 '11 at 20:56
1

The easiest way if you are using Firefox (it is said the add-on works in Chrome and Opera, but I never tried it) is to install Greasemonkey and create a userscript for the domain(s)/URLs you want - www.google.co.uk/*, www.google.com/* etc.

However things like this are better done with Stylish extension, but you can use only CSS there, no JavaScript. But in what you presented, the following CSS fragment should work like a charm:

* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }

There are lots of userscripts and userstyles available on the web.

jakub.g
  • 38,512
  • 12
  • 92
  • 130
  • how about on Android Webkit. This question needs some serious updates for clarification. – rlemon Sep 13 '11 at 21:01
  • Indeed :) Huh, can't tell about Android Webview. – jakub.g Sep 13 '11 at 21:08
  • The Android WebView seems to handle URL's pretty similar to Chrome. I would settle for knowing if it is at all possible to append this javascript function to a URL? Regardless of the browser – Tony Sep 13 '11 at 21:10
  • I don't believe it would be possible for security reasons to append JS to URL. See [here](http://stackoverflow.com/questions/705533/ways-to-insert-javascript-into-url) for further discussion. And generally speaking, whatever you append to URL will be set over the network as a part of URL; only the part after "#" will not, but it will be used as an anchor identifier within the page. – jakub.g Sep 13 '11 at 21:16
1

No, you can't "just run" javascript appended to a URL. This is security breach (will be). But you can use

  • bookmarklets ('URL' that begins with javascript:),
  • browser plugins (Chrome/FF/Safari - all can do this) or
  • you can look for plugin that can run userscripts. This is something like Greasemonkey.

Also you can try Fluid (Site Specific Browser, MacOS X only)... I think you get an idea.

BTW if you want/need to write bookmarlet you can run on specific site and want something to start - check this article: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

NilColor
  • 3,462
  • 3
  • 30
  • 44
  • You are welcome. And if you want to run javascript within your custom browser - you can implement userscripting idea. This way you can run any script on every page loaded in your browser. Not sure it can help you but take a look at GreaseKit (it's userscripting "plugin" for Safari/WebKit) - http://code.google.com/p/greasekit/ – NilColor Sep 14 '11 at 06:48
0

You could use Chrome + http://defunkt.io/dotjs/ to achieve that. That's exactly the purpose of this extension: automatically run some JS scripts on specific websites.

It's OSX only for now but I guess there are some other extensions doing that as well.

Capsule
  • 6,118
  • 1
  • 20
  • 27