使用第三方库

我想集成一个Timeline http://visjs.org/docs/timeline/在我的镀铬扩展中。我已经下载了这个插件的js文件和css文件，并将它们放在我的chrome扩展的根目录中。

chrome 扩展本身只是向现有页面注入JS并修改html代码。但是，当我尝试使用该库时，我会收到错误消息：

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

这是我的manifest.json：

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

之后内容.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();

我会收到上面的错误消息。

为了在 Chrome 扩展中成功使用第三方库，我缺少哪一点？

你没有抓住要点孤立的背景 https://developer.chrome.com/extensions/content_scripts#execution-environment以及它如何与动态交互<script>元素。

每个页面都包含一个 DOM 结构和它自己的 JavaScript 执行上下文，即“页面”上下文。

当扩展程序向页面添加内容脚本时，它会创建一个separateJavaScript 上下文，附加到同一个 DOM。这两个上下文不会互相看到：如果一个变量在一个上下文中，则它不会出现在另一个上下文中。这包括全局对象，例如window：每个上下文都有自己的副本。

这种隔离的主要原因是：

• 安全性：页面不能干扰更高权限的内容脚本上下文，也不能直接检测其存在。
• 方便：页面上下文和扩展可以使用不同的不兼容的库；页面上下文可以使用任何名称而不会发生冲突； ETC。

您的代码创建内容脚本上下文并添加content.js, jquery-3.2.1.min.js and vis.min.js（按照特定的顺序，如果 content.js 需要任何库，这本身可能就是一个问题）。

但接下来会发生的是，您创建一个新的 DOM 脚本节点并在其中添加脚本。这将被执行相反，在页面上下文中.

所以，按照你的情况，ui.js加载某处vis.min.js未加载，导致错误；同样，如果您尝试使用ui.js从内容脚本上下文中，它不会被加载到那里。

如果您最初试图解决的问题是动态内容脚本注入，您有 2 个选择：

1. 使用一个后台页面，可以执行chrome.tabs.executeScript根据要求从content.js- 这增加了相同的上下文。
2. （核选项）获取脚本的内容并eval()它们，在内容脚本中是允许的（但可能会在发布时导致审核问题）。

如果您需要从页面上下文访问数据，您will需要跨越边界 https://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script，但您需要了解这一点以及如何通过它传递消息 https://stackoverflow.com/a/26141393/934239.