Inject CSS into page downloaded from wiki server

[jmozmoz]

I would like to modify the pdf created from a page served by a GitLab wiki server.

An example is this page: https://develop.openfoam.com/Development/openfoam/-/wikis/home. I would like to do this for pages served by our internal GitLab server. I would like to hide e.g. the line with the last commiter at the top of the page.

I tried e.g. the following css files:

body {
display: none !important;
}

or

.wiki-last-edit-by {
	display: none !important;
}

I tried the command line option --css (-c) using a locally stored css file, but this seems to have no effect. I guess the css file needs to be served by the same server as the web page?!? If I understand the code here correct, the link to the css file is injected into the downloaded html page before rendering it and I guess, that electron does not like to have a css file from a different server?

Or does the whole command line option only work, if local mark down files are printed? The README file in not clear about it? It says:

In the headline

To generate a PDF from a Markdown file with custom CSS (defaults to Github markdown style)

But the example uses an html-file:

electron-pdf index.html ~/Desktop/index.pdf -c my-awesome-css.css

Should css injection work for downloaded pages?

If not, would it be possible to add some javascript code to the electron-pdf/lib/preload.js to inject css after the page has be downloaded, but before it is printed? E.g. following this example: https://stackoverflow.com/questions/42930572/inject-css-into-webview-chrome-electron-html-css-js

Unfortunately, it is not possible to modify the css used by the GitLab wiki server (https://gitlab.com/gitlab-org/gitlab/-/issues/201890).

[jmozmoz]

With this change, I am able to insert CSS in the page after loading but before printing:

diff --git a/lib/exportJob.js b/lib/exportJob.js
index 4a0364e..095c7d8 100644
--- a/lib/exportJob.js
+++ b/lib/exportJob.js
@@ -426,8 +426,10 @@ class ExportJob extends EventEmitter {
       this._saveDownload(win)
     } else {
       this._renderAndCollectOutput(win, (context, outputDoneFn, observerContext) => {
-        const ctx = _.extend({}, observerContext, context)
-        const targetFile = this._getTargetFile(ctx)
+        const ctx = _.extend({}, observerContext, context);
+        const targetFile = this._getTargetFile(ctx);
+
+    win.webContents.executeJavaScript('var style = (function() {    var style = document.createElement("style");    style.appendChild(document.createTextNode(""));    document.head.appendChild(style);    console.log(style.sheet.cssRules);   return style;})(); style.sheet.insertRule(".gl-broadcast-message  {display: none !important;}", 0); style.sheet.insertRule(".wiki-last-edit-by {display: none !important;}", 0); ');
         this._generateOutput(ctx, targetFile, outputDoneFn)
       })
     }

The method is take from here: https://stackoverflow.com/a/28930990