Javascript 使用d3的chrome扩展

我目前正在编写一个Chrome扩展（我对它有点陌生），并希望使用d3在网站上可视化一些东西。我使用background.js脚本通过单击扩展图标来操作站点

background.js：

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

因此，这会将我重定向到我的review.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在脚本完成一次完整运行后才可用。现在我的问题是：

---

如何在此脚本中使用d3？

您可以在加载

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

---

注意：Chrome扩展可能有更好的方法来处理延迟加载的脚本；我在这方面没有任何经验。

好的，所以最后我自己找到了一个解决方案： 因此，我的背景脚本为我加载整个d3库，如下所示：

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

就这样