타사 라이브러리 사용

Question

Timeline을 내 크롬 확장에 통합하려고합니다. 이미이 Addon의 js 파일과 css 파일을 다운로드하여 Chrome 확장의 루트 디렉토리에 넣었습니다.

크롬 확장 자체는 JS를 기존 페이지에 삽입하고 html 코드을 수정하는 것입니다.

"content_scripts": [{ 
    "matches": ["https://web.whatsapp.com/*"], 
    "css":["vis.min.css"], 
    "js": ["content.js","jquery-3.2.1.min.js","vis.min.js"], 
    "run_at": "document_end" 
    }], 
    "permissions": [ 
    "activeTab" 
    ], 

여기 content.js :

function injectJs(link) { 
     var scr = document.createElement("script"); 
     scr.type="text/javascript"; 
     scr.src=link; 
     (document.head || document.body || document.documentElement).appendChild(scr); 
} 

//injectJs(chrome.extension.getURL("/vis.min.js")); 
injectJs(chrome.extension.getURL("/ui.js")); 

후 다음

Uncaught ReferenceError: vis is not defined 
    at addTimeLine (ui.js:230) 
    at createClientBox (ui.js:270) 
    at ui.js:62 

내 manifest.json을한다 : 나는 라이브러리를 사용하려고 할 때 나는 오류 메시지가 표시됩니다 content.js이 실행되면 ui.js가 성공적으로 페이지에을 삽입하고 내가 추가 버튼을 볼 수 있습니다. 페이지. 이제 다음과 같은 라이브러리를 사용하려고 할 때 :

var addTimeLine = function() { 
     var visualization = document.createElement('div'); 
     visualization.id = 'visualization'; 
     // Get the conatiner where the timeline should be displayed 
     var container = document.getElementById('visualization'); 

     // Create a DataSet (allows two way data-binding) 
     var items = new vis.DataSet([{ 
       id: 1, 
       content: 'item 1', 
       start: '2013-04-20' 
      }, 
      { 
       id: 2, 
       content: 'item 2', 
       start: '2013-04-14' 
      }, 
      { 
       id: 3, 
       content: 'item 3', 
       start: '2013-04-18' 
      }, 
      { 
       id: 4, 
       content: 'item 4', 
       start: '2013-04-16', 
       end: '2013-04-19' 
      }, 
      { 
       id: 5, 
       content: 'item 5', 
       start: '2013-04-25' 
      }, 
      { 
       id: 6, 
       content: 'item 6', 
       start: '2013-04-27' 
      } 
     ]); 

     // Configuration for the Timeline 
     var options = {}; 

     // Create a Timeline 
     var timeline = new vis.Timeline(container, items, options); 
    }; 

    addTimeLine(); 

위 오류 메시지가 표시됩니다.

크롬 확장 프로그램에서 타사 라이브러리를 성공적으로 사용하기 위해 누락 된 점은 무엇입니까?

Answer 1

isolated contexts의 요점과 동적 인 <script> 요소와의 상호 작용이 누락되었습니다.

각 페이지에는 DOM 구조와 자체 JavaScript 실행 컨텍스트 인 "페이지"컨텍스트가 포함되어 있습니다.

확장 프로그램이 페이지에 콘텐츠 스크립트를 추가 할 때 별도의 JavaScript 컨텍스트를 만들고 동일한 DOM에 첨부합니다. 두 컨텍스트는 서로를 볼 수 없습니다. 하나의 변수가있는 경우 다른 컨텍스트에는 존재하지 않습니다. 여기에는 window과 같은 전역 개체가 포함됩니다. 각 컨텍스트에는 자체 복사본이 있습니다.

이 격리 주된 이유는 다음과 같습니다

• 보안 : 페이지가 더 높은 권한 콘텐츠 스크립트 문맥을 방해 할 수없고 직접 자신의 존재를 감지 할 수 없습니다.
• 편의점 : 페이지 컨텍스트와 확장 프로그램은 서로 다른 호환되지 않는 라이브러리를 사용할 수 있습니다. 페이지 컨텍스트는 충돌없이 모든 이름을 사용할 수 있습니다. 등

코드는 콘텐츠 스크립트 컨텍스트를 생성하고 (content.js이 라이브러리 중 하나를 기대하는 경우 자체에 문제가있을 수 있습니다 특정 순서에) 그것을 content.js, jquery-3.2.1.min.js 및 vis.min.js을 추가합니다.

하지만 다음은 새로운 DOM 스크립트 노드를 만들고 여기에 스크립트를 추가하는 것입니다. 페이지 컨텍스트에서 이 실행되면 대신 실행됩니다.

따라서 상황에 따라 ui.js은 vis.min.js이로드되어 어딘가에 오류가 발생합니다. 마찬가지로 내용 스크립트 컨텍스트에서 ui.js을 사용하려고 시도하면 내용이로드되지 않습니다.

원래 동적 콘텐츠 스크립트 삽입 하였다 해결하려고했던 문제가, 당신은이 옵션이있는 경우 :

1. 이 content.js에서 수요에 chrome.tabs.executeScript을 실행할 수있는 배경 페이지를, 고용을 -이 같은 컨텍스트에 추가 .
2. (Nuclear 옵션) 내용 스크립트에 허용되는 스크립트 내용 (eval())을 가져옵니다 (그러나 게시 할 때 검토시 문제가 발생할 수 있음).

당신은 페이지의 컨텍스트에서 데이터에 액세스해야하는 경우, 당신 것이다 필요 cross the boundary에,하지만 당신이 그것을 어떻게 pass messages through it에 대해 알고 있어야합니다.