1

I am trying to style the output of an extension called Print Firendly PDF.

My main goal is to change the font for the body and the headline. I would also like to justify+hypehenate the text using hyphenator.js and add arbitrary content to the iframe, thought this is less important than changinf the font.

The extension simplifies a website for printing. The extension simply calls the server and loads an iframe (this is literally all the extension does):

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  var js = '//cdn.printfriendly.com/printfriendly.js';
  var url = "javascript:(function(){if(window['priFri']){window.print()}else{pfstyle='cbk';_pnicer_script=document.createElement('SCRIPT');_pnicer_script.type='text/javascript';_pnicer_script.src='" + js + "';document.getElementsByTagName('head')[0].appendChild(_pnicer_script);}})();";
  chrome.tabs.update(tab.id, {url: url});
});

document.addEventListener('DOMContentLoaded', function () {


  var currentIcon = localStorage["pf_icon"];
  if (currentIcon) {
    chrome.browserAction.setIcon({
      path: "images/" + currentIcon + ".png"
    });
  }
});

From there, you can send the text in the iframe to the Chrome printer.

The text within the iframe can be styled with the Chrome inspector:

enter image description here

But since it's not a part of the page, I am having difficulty injecting CSS into it programatically. If I do "inspect frame", I just get a black page. Is it possible to modify the extension to inject CSS and add arbitrary text?

EDIT:

But it is possible to inject the following javascript into the iframe and have it run: javascript:if(document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='https://mnater.github.io/Hyphenator/Hyphenator.js?bm=true');void(script.type='text/javascript');void(head.appendChild(script));}

user27636
  • 1,070
  • 1
  • 18
  • 26
  • What "add arbitrary content to the iframe" are you referring to? Ads? – Dinca Adrian Nov 13 '17 at 09:00
  • 1
    You could download the source and add your styles and js etc. locally. It could be somewhat automated, but if you actuall want the extension to do it, why not contact the author of the extension and ask? – tobiv Nov 13 '17 at 12:29

1 Answers1

1

This answer explains how to inject CSS into an iframe. And this answer for JavaScript injection. But what you have to know is this does not work cross domain unless the appropriate CORS header is set. From Wikipedia,

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served.

Not allowing to inject CSS or JS to iFrames is a security feature, and it is by design. If you don't have CORS access, and you are not the owner of the webpage, there is nothing you can do about it.

Also, in addition to the extension, there is a PrintFrienfly web button that allows you to add custom CSS before printing. Of course, this is also only usable in a webpage you manage.

enter image description here

nipunasudha
  • 2,427
  • 2
  • 21
  • 46