CSS a Flare for Injection - xtras.css Boomarklet and Github Proxy PHP

README.md

CSS Flare for Injection

---

CSS and JS injection collection .js snippet

Just some fun for hijacking my own projects and testing stuff adding some flare and animation to dress up projects and be universally applied for the most part. See Ray Anthony Kind of a kit, various tools to serve as multiple methods solving the same problem.

Components:

• Main version
• raw js use this as a src reference in a script tag, to inject the css live. note: copy full path exactly raw js bookmarklet ready click add new bookmark and and copy the code block at this file all into your new bookmark. make sure it leads with javascript: as sometimes browsers will cut that part and it is necessary. be sure to copy the contents at this url not the url itself you want all the code. here is the block:

javascript:(function (){ var style = document.createElement('style'), styleContent = document.createTextNode(
'p,footer,header,a,article,soundmanager,video,input,post,h1,hr,h3{ animation-delay:1.5s; animation:fly-in-from-right 0.93s 1s ease both; transform-origin:top right; } top-panels,h4,h5,img,.bottom-panels,.list-group-item,list-item,list,li,ol,shop-button,shop-item,cart,ad,dl,dt,dd,figure {animation-delay:1.8s; animation:fly-in-from-left 2.93s 1.2s ease both; -webkit-animation-delay:1.8s; -webkit-animation:fly-in-from-left 2.93s 1.5s ease both; transform-origin:top left; } @keyframes fly-in-from-top { from { transform:translateX(12rem) rotate(90deg); opacity:0; } } @keyframes fly-in-from-left { from { transform:translateY(12rem) rotate(180deg); opacity:0; } } @keyframes fly-in-from-right { from { transform:translateY(12rem) rotate(-360deg); opacity:0; } }'+ 'frame,iframe,section{ animation-delay:2s; animation:fly-in-from-left 2s 2s ease both; transform-origin:top left; } body { font-size: 1.3em; line-height: 1.5; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #222; background-color: #fff;} * { box-sizing: border-box; } script { display: none; }'
);style.appendChild(styleContent ); var mexMeHead = document.getElementsByTagName('head'); mexMeHead[0].appendChild(style); })();

• github styles block - This one works on github or you can apply a little github into the flare on someone elses site live!

Most will want to apply via <script> tags as the source, just like with any cdn. Well, if you are trying to hotlink it from this gist or github in general, Github has sniffing protection enabled which means it is telling your browser not to allow processing something as .js when in fact it is declared to be a .txt If you want to solve that problem now or in the future there are many ways. Among them is preventing the site from successfully communicating to your browser this lock mechanism which can be done by some header hacking. To accomplish it you can run a proxy script on a php server I've linked one below. You can also use my X-Frame Assassin for Chrome Here's a few ways you can overcome this hurdle:

• download the xframe-assassin for chrome that wil override it - Its mine and I just updated it to work smoother

• use an older browser - meh

• use http://statspring.com/?RAW_URL_HERE service is updating may require additonal refresh - this is fun to play with though

• use rawgit - meh.

• Proxy method:

<script charset="UTF-8" crossorigin="anonymous" src="http://[NEW URL PART].runnablecodesnippets.com/?link=https://gist.githubusercontent.com/rayantony/2fa7ed9ab778b86819a73dcf3e9a4e6a/raw/dfffaeb254be0fc6e7ac66ada0d12900d4854dab/xtras.js"></script>

It runs this server [Github Proxy PHP source

if this doesn't work it is because the link was shut off. you can restart it then place the new link you see where the old one was:

http://[NEW URL PART].runnablecodesnippets.com/?link=https://gist.githubusercontent.com/rayantony/2fa7ed9ab778b86819a73dcf3e9a4e6a/raw/dfffaeb254be0fc6e7ac66ada0d12900d4854dab/xtras.js

Proxy from Stack Overflow

By Ray Anthony twitter Rayrc WebMX Group licensed with One World License

bookmarklet.js

javascript:(function (){ var style = document.createElement('style'), styleContent = document.createTextNode(
'p,footer,header,a,article,soundmanager,video,input,post,h1,hr,h3{ animation-delay:1.5s; animation:fly-in-from-right 0.93s 1s ease both; transform-origin:top right; } top-panels,h4,h5,img,.bottom-panels,.list-group-item,list-item,list,li,ol,shop-button,shop-item,cart,ad,dl,dt,dd,figure {animation-delay:1.8s; animation:fly-in-from-left 2.93s 1.2s ease both; -webkit-animation-delay:1.8s; -webkit-animation:fly-in-from-left 2.93s 1.5s ease both; transform-origin:top left; } @keyframes fly-in-from-top { from { transform:translateX(12rem) rotate(90deg); opacity:0; } } @keyframes fly-in-from-left { from { transform:translateY(12rem) rotate(180deg); opacity:0; } } @keyframes fly-in-from-right { from { transform:translateY(12rem) rotate(-360deg); opacity:0; } }'+ 'frame,iframe,section{ animation-delay:2s; animation:fly-in-from-left 2s 2s ease both; transform-origin:top left; } body { font-size: 1.3em; line-height: 1.5; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #222; background-color: #fff;} * { box-sizing: border-box; } script { display: none; }'
);style.appendChild(styleContent ); var mexMeHead = document.getElementsByTagName('head'); mexMeHead[0].appendChild(style); })();

proxy.php

<?php
###################################################################################################################
# http://stackoverflow.com/questions/8779197/linking-files-directly-from-githubProxy
#
# This script can take two URL variables
# 
# "type"
#   OPTIONAL
#   STRING
#   Sets the type of file that is output
# 
# "link"
#   REQUIRED
#   STRING
#   The link to grab and output through this proxy script
# 
###################################################################################################################



# First we need to set the headers for the output file
# So check to see if the type is specified first and if so, then set according to what is being requested
if(isset($_GET['type']) && $_GET['type'] != ''){
    switch($_GET['type']){
        case 'css':
            header('Content-Type: text/css');
            break;

        case 'js':
            header('Content-Type: text/javascript');
            break;

        case 'json':
            header('Content-Type: application/json');
            break;

        case 'rss':
            header('Content-Type: application/rss+xml; charset=ISO-8859-1');
            break;

        case 'xml':
            header('Content-Type: text/xml');
            break;

        default:
            header('Content-Type: text/plain');
            break;
    }

# Otherwise, try and determine what file type should be output by the file extension from the link
}else{
    # See if we can find a file type in the link specified and set the headers accordingly

    # If css file extension is found, then set the headers to css format
    if(strstr($_GET['link'], '.css') != FALSE){
        header('Content-Type: text/css');

    # If javascript file extension is found, then set the headers to javascript format
    }elseif(strstr($_GET['link'], '.js') != FALSE){
        header('Content-Type: text/javascript');

    # If json file extension is found, then set the headers to json format
    }elseif(strstr($_GET['link'], '.json') != FALSE){
        header('Content-Type: application/json');

    # If rss file extension is found, then set the headers to rss format
    }elseif(strstr($_GET['link'], '.rss') != FALSE){
        header('Content-Type: application/rss+xml; charset=ISO-8859-1');

    # If css xml extension is found, then set the headers to xml format
    }elseif(strstr($_GET['link'], '.xml') != FALSE){
        header('Content-Type: text/xml');

    # If we still haven't found a suitable file extension, then just set the headers to plain text format
    }else{
        header('Content-Type: text/plain');
    }
}

# Now get the contents of our page we're wanting
$contents = file_get_contents($_GET['link']);

# And finally, spit everything out

xtras.js

(function (){ var style = document.createElement('style'), styleContent = document.createTextNode(
'p,footer,header,a,article,soundmanager,video,input,post,h1,hr,h3{ animation-delay:1.5s; animation:fly-in-from-right 0.93s 1s ease both; transform-origin:top right; } top-panels,h4,h5,img,.bottom-panels,.list-group-item,list-item,list,li,ol,shop-button,shop-item,cart,ad,dl,dt,dd,figure {animation-delay:1.8s; animation:fly-in-from-left 2.93s 1.2s ease both; -webkit-animation-delay:1.8s; -webkit-animation:fly-in-from-left 2.93s 1.5s ease both; transform-origin:top left; } @keyframes fly-in-from-top { from { transform:translateX(12rem) rotate(90deg); opacity:0; } } @keyframes fly-in-from-left { from { transform:translateY(12rem) rotate(180deg); opacity:0; } } @keyframes fly-in-from-right { from { transform:translateY(12rem) rotate(-360deg); opacity:0; } }'+ 'frame,iframe,section{ animation-delay:2s; animation:fly-in-from-left 2s 2s ease both; transform-origin:top left; } body { font-size: 1.3em; line-height: 1.5; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #222; background-color: #fff;} * { box-sizing: border-box; } script { display: none; }'
);style.appendChild(styleContent ); var mexMeHead = document.getElementsByTagName('head'); mexMeHead[0].appendChild(style); })();