CSS ontwikkelen met "Tamper Monkey".

Drupal tip
Drupal tip

CSS ontwikkelen met "Tamper Monkey".

Voor een klant moesten we CSS toepassen op een webapplicatie. Er was echter geen (S)FTP of andere manier van verbinden mogelijk voor externen. Doordat dit een kleine opdracht was besloten we om de klant hier niet mee te belasten. Als oplossing hebben we de Chrome plugin "Tamper Monkey" gebruikt met de volgende code


/ ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://webappklant.com/app/*
// @grant        none
// ==/UserScript==

(function() {
'use strict';
var sc = document.createElement('script');
sc.src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js';
var st = document.createElement('link');
st.rel='stylesheet';
st.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
st.href='http://localhost/bootstrap.css';

var styles = "body{background:yellow}";
var newSS=document.createElement('style');

newSS.innerHTML = styles;

document.getElementsByTagName("head")[0].appendChild(sc);
document.getElementsByTagName("head")[0].appendChild(st);
document.getElementsByTagName("head")[0].appendChild(newSS);
})();

Op deze manier konden we lokaal de CSS ontwikkelen om zo alles door te sturen.

Blijf op de hoogte via onze nieuwsbrief