javascript - 使用第三方库

Question

我想集成一个 Timeline在我的 chrome 扩展中。我已经下载了这个插件的 js 文件和 css 文件，并将它们放在我的 chrome 扩展程序的根目录中。

chrome 扩展本身只是将 JS 注入(inject)现有页面并修改 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"));

content.js 执行后，ui.js 成功注入(inject) 到页面，我在页面上看到我添加的按钮。现在，当我想像这样使用库时:

    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 扩展中成功使用第三方库，我错过了什么？

Answer 1

您错过了 isolated contexts 的重点以及它如何与动态交互 <script>元素。

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

当扩展将内容脚本添加到页面时，它会创建一个单独的 JavaScript 上下文，附加到相同的 DOM。这两个上下文看不到对方:如果你在一个中有一个变量，它不存在于另一个中。这包括全局对象，例如 window : 每个上下文都有自己的副本。

造成这种隔离的主要原因是:

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

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

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

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

如果您最初尝试解决的问题是动态内容脚本注入(inject)，您有 2 个选择:

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

如果您需要从页面上下文访问数据，您将需要cross the boundary ，但您需要了解它以及如何pass messages through it .