Instantly share code, notes, and snippets.

Embed
What would you like to do?
Emulate print media in Firefox 62 (userscript work in progress)
// For Firefox's Web Console, creates the functions showAsPrint() and undoShowAsPrint()
// to roughly emulate print media and revert
function p2s(media){
if (media.indexOf('all') > -1) return media; //no need to change
if (media == 'print') return 'all, wasprint'; //show on screen, too
if (media.indexOf('print') > -1 && media.indexOf('screen') > -1) return media; //no need to change
if (media == 'screen') return 'wasscreen'; //hide these rules
if (media.indexOf('screen') > -1) return media.replace('screen', 'wasscreen'); //hide these rules
return media + ', WTF'; //for debugging only
}
function showAsPrint(){
var docSS = document.styleSheets, ss, oldMedia, newMedia;
for (var i=0; i<docSS.length; i++) {
ss = docSS[i];
if (!ss.disabled){
if (ss.ownerNode && ss.ownerNode.id.indexOf('stylus-') == -1 && ss.ownerNode.id.indexOf('stylish-') == -1){
// check link or style tag for media attribute and edit as needed
if (ss.ownerNode.hasAttribute('media') && ss.ownerNode.getAttribute('media') != 'all'){
oldMedia = ss.ownerNode.getAttribute('media');
newMedia = p2s(oldMedia);
if (newMedia != oldMedia){
console.log('Updating: ' + ss.ownerNode.outerHTML + ' to ' + newMedia);
ss.ownerNode.setAttribute('media', newMedia);
}
}
// check content of style sheet for media rules
for (var j=0; j<ss.cssRules.length; j++){
if (ss.cssRules[j].type == 4){
oldMedia = ss.cssRules[j].conditionText;
newMedia = p2s(oldMedia);
if (newMedia != oldMedia){
console.log('Updating CSSMediaRule from ' + oldMedia + ' to ' + newMedia);
ss.cssRules[j].conditionText = newMedia;
}
}
}
} else if (!ss.ownerNode){
console.log('No .ownerNode on i=' + i + ' (' + ss.cssRules + ')');
}
}
}
}
function unp2s(media){
if (media == 'all, wasprint' || media == 'all,wasprint') return 'print'; //undo applying to screen
if (media == 'wasscreen') return 'screen'; //undo hiding
return media; // otherwise, we didn't mess with it
}
function undoShowAsPrint(){
var docSS = document.styleSheets;
for (var i=0; i<docSS.length; i++) {
var ss = docSS[i];
if (!ss.disabled){
if (ss.ownerNode && ss.ownerNode.id.indexOf('stylus-') == -1 && ss.ownerNode.id.indexOf('stylish-') == -1){
// check link or style tag for media attribute and edit as needed
if (ss.ownerNode.hasAttribute('media') && ss.ownerNode.getAttribute('media') != 'all'){
ss.ownerNode.setAttribute('media', unp2s(ss.ownerNode.getAttribute('media')));
if (ss.ownerNode) console.log('Updated: ' + ss.ownerNode.outerHTML);
else console.log('Updated media attribute but lost .ownerNode for i=' + i + ' (' + ss.cssRules + ')');
} else {
// check content of style sheet for media rules
for (var j=0; j<ss.cssRules.length; j++){
if (ss.cssRules[j].type == 4){
ss.cssRules[j].conditionText = unp2s(ss.cssRules[j].conditionText);
console.log('CSSMediaRule updated to ' + ss.cssRules[j].conditionText);
}
}
}
}
}
}
}
@jscher2000

This comment has been minimized.

Owner

jscher2000 commented Sep 21, 2018

The above does not call a function, so add

showAsPrint();

to the end when pasting into the Web Console* to run that function. Until the page is reloaded, you don't need to reinject the script, just call either function.

BSD-3-clause license.

*https://developer.mozilla.org/docs/Tools/Web_Console

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment