Android Webview Injecting JS&CSS

Question

I'm working on a simple rss reader app for personal use. The thing is a complete hack but I'm just using it personally so whatever. The problem I'm trying to solve is that a site I read and am ingesting the rss feed for has no mobile interface and each page is full of very heavy ads. I figure I can fix some of this though a simple app.

When clicking on an article in the app it opens a webview to the page. The ads all are loaded by JS on pageload so I prevent JS from being used in my webview until onPageFinished is called which really cuts down on page load time. So now the page structure for these articles never changes and there is a node that continues exactly what I want so I would love to at this point load JQuery to rip apart the DOM and make a much simpler structure and then apply my own css making it more mobile friendly.

As a test I can successfully load JS and change the page in the webview like this:

view.loadUrl("javascript:(function() { " +  
                "document.body.style.background = 'red'; " +  
                "})()")

That works great and the page background goes red. So now I'm trying in inject script/style tags that will point the src values to local files. I'm not really sure how to create the relative file paths here so maybe that is the problem. I've tried stuff like this:

view.loadUrl("javascript:(function() { " +  
                "var head= document.getElementsByTagName('head')[0]"+
                "var script= document.createElement('script');" +
                "script.type= 'text/javascript';" +
                "script.src= '/android_asset/js/articleSetup.js';"+
                "head.appendChild(script); "+
                "})()");

I can open the same file in the webview like this:

view.loadUrl("file:///android_asset/js/articleSetup.js");

but what I need is to not load the new file but to inject it into the webview as it is so that I can manipulate the DOM.

Any suggestions would be appreciated. Thanks in advance.

[This](http://stackoverflow.com/a/5656971/1893766)? – ozbek Jun 10 '13 at 02:46 — ozbek, Jun 10 '13 at 02:46

score 0 · Answer 1 · answered Jun 10 '13 at 01:28

I think the best answer is to create a script tag like this:

var script = document.createElement('script');
script.setAttribute('src', 'file:///android_asset/js/articleSetup.js');
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script);

so perhaps you can do something like

view.loadUrl("var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/js/articleSetup.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script);");

Although I'm not too sure about loading a JS file from a local file system onto a webpage, perhaps you could host the JS file somewhere?

Android Webview Injecting JS&CSS

1 Answers1