Tamperscript Injection Pt2

script.js

// INJECTING THE HTML
document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>';

// CSS INJECTION FUNCTION
//https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
}

// INJECT THE CSS INTO FUNCTION
// Write the css as concenated strings
insertCss(
  "#injection {color :red; font-size: 30px;}" +
  "body {background-color: lightblue;}"
)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

tamperscript-injection-pt2.markdown

Tamperscript Injection Pt2

A sample of how you would inject javascript to create HTML and custom CSS.

A must know requirement when writing a tampermonkey script

Useful if you want to have your own buttons for notetaking.

https://stackoverflow.com/questions/21436550/javascript-how-to-get-only-one-element-by-class-name/21436552

https://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript

https://stackoverflow.com/questions/584751/inserting-html-into-a-div

A Pen by Vincent Tang on CodePen.

License.