Make harviewer more easily embeddable

[vrga]

As the title says, i'm trying to find way of embedding harviewer within my application, but the way its all currently hardcoded to id's, classes and contains a million small files that i could not reasonably get solved, i'm making a request, to enable this to be included as a js library on any page and to give a function to manually pass har data in, without relying on the hardcoded json/jsonp callbacks and not limited to window.load for viewer init.

Is this possible at all and/or are you willing to work on it or would external commits be welcome?

[janodvarko]

Please take a look at:
https://github.com/janodvarko/harviewer/wiki/Customization#har-preview-embedding

and perhaps also at:
https://github.com/janodvarko/harviewer/wiki/API

Does that help?

Honza

[vrga]

I was thinking more some way that does not involve iframes in any step at all :)
Current solution involves iframes + a small modification to harPreview.js to allow me to load the JSON directly, without the json/jsonp callbacks.

[janodvarko]

I see, can you send PR with your modification?

Honza

[vrga]

In a day or two, but it wasnt a well thought out thing, more like a quick hack.

[mateuszjarzewski]

It would be hard to get rid of iframe because HAR-Viewer UI is composed of many elements.
Those elements tends to get broken by other CSS styles used on the page..
One solution to that problem might be this project: https://github.com/premasagar/cleanslate
But still, this modification would require tons of testing.

I'm also fan of no-iframe solutions, but sometimes it's simply not effective.

[gitgrimbo]

If your main requirement is to pass in-memory HAR objects from a parent page to a child HAR Viewer IFRAME, then this branch attempts a possible solution using window.postMessage():

https://github.com/gitgrimbo/harviewer/tree/test-post-message

Is passing in-memory HARs from parent to child one of your specific requirements, or do you more broadly want a completely self-contained component to use on your page?

The basic idea is the parent page registers a message listener, and communicates with the child IFRAME(s) using window.postMessage() (hidden behind an api). E.g. in the example, the parent page 'owns' the simpleHar and urlParamsHar HAR objects, and will pass them to an IFRAME depending on a 'postMessage id' of the parent page's choosing.

<!-- Use postMessage: as the protocol, and pass a postMessage id that
    you expect to come back in the messages from Har Viewer -->
<div id="previewPostMessageOne" class="har" height="150"
    data-har="postMessage:ID-one"></div>

<!-- Use postMessage: as the protocol, and pass a postMessage id that
    you expect to come back n the messages from Har Viewer -->
<div id="previewPostMessageTwo" class="har" height="150"
    data-har="postMessage:ID-two"></div>

window.addEventListener("message", function(evt) {
    if ("undefined" === typeof HARViewer) return;

    var origin = evt.origin;

    // Do origin checks here if necessary
    // if (origin !== "https://expected") throw new Error(...)

    var api = HARViewer.initPostMessage(evt);

    if (api.isRequestForHar("ID-one")) {
        api.sendHar(simpleHar);
        api.sendHar(urlParamsHar);
        api.sendDone();
    } else if (api.isRequestForHar("ID-two")) {
        // reverse order to ID-one
        api.sendHar(urlParamsHar);
        api.sendHar(simpleHar);
        api.sendDone();
    }
}, false);

[vrga]

Sorry about forgetting to send anything, but my change was just done to this bit here, replacing the whole init:
https://github.com/janodvarko/harviewer/blob/master/webapp/scripts/harPreview.js#L91
to get the content from an embedded script element with the har data in it. I'll provide a snippet tomorrow or a few days later.

my specific requirement is to be able to ideally embed the view's into a page. i already do ajax requests to get the data and the current situation is where i just embed the har into a script tag and modified the script harPreview.js script to take data from there and that is accessed through an iframe.

The biggest issue was the inability to just package the whole thing into a single JS and CSS file, as this is just one part of a greater application i am building.

The main thing to note is that this the case where there are multiple views displayed at once. it works well enough via iframes.

If i understand your code up there correctly, this is not really a solution to my problem. It is however a very interesting idea and if it was a case of 1-10 iframes at once it would definitely be useable. my use case is however a fair bit larger and there can be up to a few thousand at once. (not always visible becuase users would strangle me, but they would still be loaded around the place)

[cadorn]

Checkout this branch I hope to bring up to date soon:

• https://github.com/fireconsole/harviewer
• http://fireconsole.github.io/harviewer/ (Look at the Embed tab and see the jsfiddle example)

[vrga]

so yes, i just checked my change, i replaced https://github.com/janodvarko/harviewer/blob/master/webapp/scripts/harPreview.js#L98
with
harPreview.appendPreview(JSON.parse(document.getElementById('jsonData').innerHTML));

and called it a day.
@cadorn , i'm sorry, but i dont really understand what the difference might be, other than the separate pinf-loader thing.

[cadorn]

The biggest issue was the inability to just package the whole thing into a single JS and CSS file, as this is just one part of a greater application i am building.

@vrga The loader packages the harviewer into a single JS and css file so you can easily embed it. Take a look at the net panel for the example on gihub pages.

[vrga]

@cadorn ah. Sorry, i'm remarkably weak with modern JS stuff. Will check it out then.