Custom JavaScript and CSS on mobile devices

I want a strange

If you regularly visit any sites from a mobile device (phone, tablet), and if you regularly have a desire to change JS / CSS on them (but for some reason you don’t inform the developers of these desires), then the article may be interesting.


')
Perhaps you, like me, would be satisfied with the option with a proxy that will perform the substitution you need. See what you can do.

Let's paint the fridge ...

In general, the range of possibilities seems to be wide: changing the “theme” of the sites, the size of individual elements, correcting JS / CSS errors, including hidden features (for example, VK has an HTML5 player that is not active), or disabling the existing ones, like carefully placed on site "hover", because of which on mobile devices on the links have to poke twice, etc. But alas, in standard browsers most devices have no mechanisms for implementing UserCSS or UserScript . Somewhere there are bookmarklets (and I even wrote about a dozen for myself), but the process of their “preparation” cannot be called quick. In the event that the number of edits grows (or decreases), it becomes inconvenient to constantly edit the “bells”.

In general, how can this be solved:

• find hosting with apache or nginx
  
• we include there 2 extensions: a proxy and something that will allow changing the files passing through a proxy
  
• customize the replacement so that it connects to the pages you need JS / CSS
  
• write proxy on the device
  
• profit
  

I found “hosting” with Apache, I tormented him.

Injection

Enable proxy on Apache is easy, it turned out to be more difficult with the replacement of content on the fly. There are several extensions “on the market”: mod_substitute , mod_filter , mod_sar . I stupidly failed to collect mod_sar, mod_substitute had problems first with compressed pages (I had to assemble a chain of unpacking-replacement-packaging filters to work), then it turned out that he was spoiling some pages, the reason for “quickly” could not be established. Upgrade Apache and all filters to the latest versions (new mod_sed , for example) I haven’t shone (core and old in the system). In general, I stayed with mod_filter, I inserted something like

ExtFilterDefine fixtext mode=output intype=text/html \ cmd="/opt/bin/sed 's|</body>|<script src=\"/injector.js\" type=\"text/javascript\"></script></body>|i'" ProxyRequests On ProxyVia On <Proxy *> SetOutputFilter fixtext </Proxy> 

and enjoyed. Rule files “as usual”, via SSH / mc, or in Textastic via SFTP (I have an iPad).

Contents injector.js, example:

 function injectJS(file) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'file'; script.type = 'text/javascript'; head.appendChild(script); } if (window.location.hostname == 'habrahabr.ru') { injectJS('filepath/mod-habrahabr.ru.js'); } 

Together more fun

And then one got bored. I suggest to those who wish to join the testing and use.

A registration page is made where you enter your email. The part before @ is bitten off from it, with this name a user is created for openssh, a home folder under chroot , and UserDir for Apache. The generated password is sent to the mail. You can log in to the issued shell via SSH or SFTP, in the htdocs folder there is an example of an “injector” on JS, the vim editor is available.

The host for ssh / sftp and proxy is the same.

After successful authorization, the proxy connects to all pages (to which it can) your own injector.js from htdocs, what is the point of creating uchtok. The link to the root of the site where injector.js supposedly lies is replaced by the server with a path like / ~ username /, where the files for substitution are actually taken (JS / CSS).

The registration page is http: /injector.slcontent.ru/reg/ .

I would like to hear opinions related to the idea as such, advice, feedback on the use.

upd1 : To verify the correctness of the login / password pair sent to you, the easiest way to access the page

  http://injector.slcontent.ru/~username/ 

upd2 : Inside injector.js, if anyone saw, there is an access to the getlink.php script. It has a parameter ts. If ts = 1, a time stamp is added to the file name, which helps to avoid sticking, for example, style files in the cache with frequent edits.

upd3 : Attention, logins are reduced to a form compatible with Linux, in my case: dots are replaced with underscores; if the first character is a digit, the underscore is placed before the digit; register is reduced to the bottom. Everyone who had the numbers in the name (at the beginning) and the capital letters, unfortunately, did not “start”, although they received letters.

upd4 : After 14 hours on 01/29/2012 the registration page was unavailable, stupid error, fixed it.

upd5 : Examples of what can be “injected” through this proxy (for habr): improved comment navigator , changes in design , change of favicon, if the post is moved to drafts or even HabrAjax .

upd6 : If you wish, you can configure the device to go through a proxy not to all sites, but just for a couple, say. We use for this Web Proxy Auto Discovery Protocol . Actually, as has already been written (perhaps more than once), the purpose of this protocol is to tell where to look for a file with the type “application / x-ns-proxy-autoconfig”, by default - wpad.dat. This is told via DNS / DHCP or, in our case, you can specify the location of the file explicitly. In the proxy settings of most devices, this is Auto with the URL field. In the field you need to enter

  http://injector.slcontent.ru/wpad.dat? 

with a question mark at the end.

The principle here is the same as with injector.js - after authorization, a redirect is performed to the version of the file in the user's folder, i.e. all the rules to use / not to use proxy taxis the user himself. Example wpad.dat (actually, this is JS with the reserved function name FindProxyForURL):

 function FindProxyForURL(url, host) { var proxy = "PROXY injector.slcontent.ru"; var viaproxy = new Array( /\.ya\.ru$/, /\.yandex\.ru$/); for (i = 0; i < viaproxy.length; i++) { if (viaproxy[i].test(host)) { return proxy; } } return "DIRECT"; } 

It may even be possible to use as a blocker of inappropriate content (banners?), If you make a list with the necessary hosts and specify a non-existent proxy for them, 127.0.0.1, how often hosts are registered in the hosts.
upd7 : Years passed, and Content Blockers appeared on iOS ...