크롬 확장 d3을 사용하여

Question

현재 Chrome 확장 프로그램을 작성 중이며 (웹 사이트에 새로 도입 된) 웹 사이트의 일부 내용을 시각화하기 위해 d3을 사용하려고합니다. 확장 아이콘을 클릭하여 사이트를 조작하기 위해 background.js 스크립트를 사용하고 있습니다.

background.js :

var w = window.innerWidth - 50; 
var h = 50; 

var setupDependencies = function() { 
    var head = document.getElementsByTagName("head"); 
    script = document.createElement("script"); 
    script.src = "http://d3js.org/d3.v3.min.js"; 
    script.charset = "utf-8"; 
    head[0].appendChild(script); 
} 

setupDependencies(); 

var smartReviewSVG = d3.select(".smartReviews") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h+10); 

하지만 난 생각 문제는 그냥 D3는 : 나는 몇 가지 기능이있어 어디

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript({file: "reviews.js" }); 
}); 

그래서이 내 review.js에 저를 리디렉션합니다 스크립트가 완전한 실행을 한 후에 사용할 수 있습니다. 그래서 지금 내 질문 :

이 스크립트 내에서 어떻게 d3을 사용할 수 있습니까?

Answer 1

당신은d3 스크립트를로드 한 후 코드 의 나머지 부분을 실행할 수 있습니다

function runD3() { 
    var smartReviewSVG = d3.select(".smartReviews") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h+10); 
} 

var setupDependencies = function() { 
    var head = document.getElementsByTagName("head"); 
    var script = document.createElement("script"); 
    script.onload = runD3; 
    script.onerror = function() { alert('Failed to load D3.') }; 
    script.src = "http://d3js.org/d3.v3.min.js"; 
    script.charset = "utf-8"; 
    head[0].appendChild(script); 
} 

setupDependencies(); 

참고 : 크롬 확장하지만 스크립트의 지연로드를 처리하는 더 나은 방법이있을 수 있습니다; 나는 그 지역에서 경험이 없다.

Answer 2

좋아요 그래서 결국 나는 혼자 해결책을 발견 그래서 내 배경 스크립트는 다음과 같이 나를 위해 전체 D3 lib 디렉토리를로드 :

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript({file: "d3/d3.min.js"}); 
    chrome.tabs.executeScript({file: "reviews.js" }); 
}); 

그게 전부입니다.