Draw.io : EditorUI 인스턴스 가져 오기

Question

draw.io와 상호 작용하는 Chrome 확장 프로그램을 구축 중입니다. Draw.io는 현재 열려있는 다이어그램 (다이어그램의 SVG 이미지 포함)에 대한 모든 정보를 보유하는 EditorUI의 인스턴스를 만듭니다. JavaScript를 사용하여 해당 컨텍스트에 액세스 할 수 있습니까? 코드 삽입으로 액세스 할 수있는 윈도우 변수에는 EditorUI의 인스턴스를 만드는 기능 만 포함되지만 인스턴스 자체는 포함하지 않습니다. 상태/지역 범위를 가져올 수 없습니다.

Answer 1

다음은 내가이 문제를 해결 한 방법입니다. 기능을 삽입하는 것이 올바른 방법이었습니다. 처음에는 원하는 정보를 받기 위해 Draw3io 함수를 getCurrentFile();과 같이 호출하기를 바랬습니다. 그것들을 호출 할 수는 있지만 null이 나오지는 않습니다. 따라서 함수를 재정의하고 원본 콘텐츠를 유지하며 사용자 정의 이벤트 수신기에 필요한 것을 전송하기로 결정했습니다.

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}); 
    } 
}); 

[콘텐츠 스크립트를 사용하여 페이지 문맥에 삽입 코드] (의

Answer 2

App.main has a callback ui 인스턴스를 반환합니다.