Draw.io: Get instance of EditorUI

Question

I am building a Chrome extension that interacts with draw.io. Draw.io creates an instance of EditorUI that holds all information about the currently opened diagram (including an SVG image of the diagram). Is it possible to access that context using JavaScript? The window variables (which are accessible by code insertion) only contain a function to create an instance of EditorUI but not the instance itself. I can't get the state/local scope.

Possible duplicate of [Insert code into the page context using a content script](http://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script) — Makyen, Mar 15 '17 at 16:00

score 1 · Answer 1 · edited Mar 15 '17 at 09:41

1

App.main has a callback that returns the ui instance.

edited Mar 15 '17 at 09:41

Frodo Baggins

8,290
6
45
55

answered Mar 15 '17 at 09:17

user1084282

1,003
7
6

I am fairly new to Javascript and the minified source code drives me crazy (is there non-minified source code available?). Can you tell me how exactly I would use said callback? – Felix Mar 15 '17 at 09:40
Thank you, that looks like what I need. I still don't quite get it though: Draw.io calls App.main without a callback. If i call it myself I can only do so in a different context. How do I get my callback injected into the website? – Felix Mar 15 '17 at 09:56
1

@Felix, [Insert code into the page context using a content script](//stackoverflow.com/q/9515704) – wOxxOm Mar 15 '17 at 10:08
So far I injected my script by adding a script element to the website from a content script. I can now access window variables and override functions like App.main(). While a call from the content script uses the new function, draw.io itself still uses the original one. I just can't get into the website's context. – Felix Mar 15 '17 at 10:26
1

The website context is available only in the `script` element, there's no way to "get" it in the content script which runs in an [isolated world](https://developer.chrome.com/extensions/content_scripts). – wOxxOm Mar 15 '17 at 15:32
While this may provide a *partial* answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Note that in this case, it is not a complete answer, as you would also need to incorporate the information contained in the question linked by wOxxOm: [Insert code into the page context using a content script](http://stackoverflow.com/q/9515704) – Makyen Mar 15 '17 at 15:58
So there's no way to get the callback? – Felix Mar 15 '17 at 16:56
1

@Felix, no. You can pass only the data. The code that interacts with site functions directly should reside in the script element. Period. – wOxxOm Mar 15 '17 at 19:33

score 1 · Accepted Answer · answered Mar 16 '17 at 12:02

Here's how I solved it: Injecting a function was the right approach. At first I was hoping to simply call Draw.io functions like getCurrentFile(); to receive the desired information. While it is possible to call them you're not getting anything but null out of it. I thus decided to override the function, keep the original content and send what I need to a custom event listener.

var svg = null;

/**
 * Function to be inserted into Draw.io. Contains a function that overrides getCurrentFile(). Original functionality
 * of getter function is kept, file data is saved to a variable.
 */
var hijackFileGetter = '(' + function() {
        window.EditorUi.prototype.getCurrentFile = function() {
            if(this.currentFile !== null) {
                var svg = this.currentFile.data;
                var event = document.createEvent("CustomEvent");
                event.initCustomEvent("listenToChanges", true, true, svg);
                document.dispatchEvent(event);
            }
            return this.currentFile;
        };
    } + ')();';

/**
 * Injection of Javascript code into Draw.io
 */
var script = document.createElement('script');
script.textContent = hijackFileGetter;
(document.head||document.documentElement).appendChild(script);
script.remove();

/**
 * EventListener for communication from our injected script to this content script
 * Receives a new SVG every time changes are made
 */
document.addEventListener('listenToChanges', function (data) {
    svg = data.detail;
});

/**
 * Message passing from content script to popup (and the other way around)
 */
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.popup) {
        chrome.runtime.sendMessage({svg: svg});
        sendResponse({svgSearch: true});
    }
});

score 0 · Answer 3 · answered Jan 18 '20 at 02:18

Callback is what helped me!

I moved from GraphEditor to draw.io and could not get ahold of UI object

            `var MyUi;
            App.main(function(ui) {
            MyUi = ui;
            var fmi2 = new FMI2(ui);
            fmi2.init();
            //SidebarInit.apply(Edo.sidebar, arguments);
            //About Dialog
            fmi2.OverrideAbout();
            //Graph behaviour
            fmi2.fmiGraphSettings();
            //fmiGraphSettings(Edo.editor.graph);
            //Pod & Booth Controls
            fmi2.AddFMIControls();
            //AddPodControl(Edo);
            //Hints
            AddHints();
          });`

Draw.io: Get instance of EditorUI

3 Answers3