1

I'm wondering if there's an existing (Linux) tool/command to make a HTML file more "standalone" by automatically inlining third-party resources (JS and CSS).

I'm using a tool which generates HTML reports, and these reports contain references to third-party CSS (Bootstrap) and JS (jQuery). These resources don't work if the page is accessed via file://, due to security restrictions. They work when served from a HTTP server, but that's obviously not ideal when the files are local to the machine.

So far I've created a script to find/replace these particular URLs with data URIs of their content. This works for now, but is a maintenance burden due to everything being hard-coded.

Is there a more reliable/standard way to achieve a similar effect? I can think of a few ways to do this: creating data URIs (like my script), writing the content into the style/script elements, or replacing the URLs with relative paths to local copies. Any of these would be fine. Ideally I could just do something like:

$ inlineHtmlResources < existingFile.html > standloneVersion.html
Warbo
  • 2,611
  • 1
  • 29
  • 23
  • "save page as" works well – dandavis May 14 '18 at 21:49
  • @dandavis I presume you mean for Firefox or similar? I think this would require firing up a HTTP server temporarily too, since the URLs don't work. Can "save as" be triggered via a script, or would I have to rely on something like `xdotool`? The latter wouldn't work headless though, so I'd need XVFB or equivalent :( – Warbo May 14 '18 at 21:56
  • there's two inlining "standards"; mshtml and base64 resource urls, using dataURLs or email-like packaging. mshtml works pretty well since chrome added support a few years back. You could also write a small JS that simply spiders the urls (finding all the @href+@src), using ajax to fetch the content as a blob, then using FileReader to turn the blob into a dataURL which replaces the attrib's URL. after, `document.documentElement.outerHTML` should be a complete representation of the page. – dandavis May 14 '18 at 23:59

2 Answers2

0

You may want to have a look at webpack, which the following question addresses for essentially the same use case you suggest:

How to bundle html, js and css in one html file with webpack?

The above answer cites specifically this plugin: https://github.com/DustinJackson/html-webpack-inline-source-plugin

There are many alternatives; others are included in this question: Embedding all the external resources of an HTML page into a single file using javascript in the browser

Will
  • 6,601
  • 3
  • 31
  • 42
0

The answer from @WillCain was helpful, but as a plugin for a plugin for a system I've never used (webpack) it seemed a little overkill for me.

I ended up writing a simple Python script to do it instead http://chriswarbo.net/git/html-inliner/git

Warbo
  • 2,611
  • 1
  • 29
  • 23