Using Third Party Libraries

I want to integrate a Timeline in a chrome extension of mine. I already downloaded the js files and css files of this addon and put them in the root directory of my chrome extensio

Solution 1:

You're missing the point of isolated contexts and how it interacts with dynamic <script> elements.

Each page contains a DOM structure and its own JavaScript execution context, the "page" context.

When an extension is adding a content script to a page, it creates a separate JavaScript context, attached to the same DOM. The two contexts don't see each other: if you have a variable in one, it's not present in the other. This includes global objects such as window: each context gets its own copy.

The main reason for this isolation are:

• Security: the page can't interfere with a higher-privilege content script context and can't detect its presence directly.
• Convenience: the page context and the extension can use different incompatible libraries; a page context can use any names without clashes; etc.

Your code creates a content script context and adds content.js, jquery-3.2.1.min.js and vis.min.js to it (in that specific order, which may be a problem in itself if content.js expects any of the libraries).

But what happens next is that you create a new DOM script node and add your script there. This gets executed in the page context instead.

So, in your situation, ui.js loads somewhere that vis.min.js isn't loaded, leading to the error; likewise, if you try to use ui.js from the content script context, it won't be loaded there.

If the problem you were originally trying to solve was dynamic content script injection, you have 2 options:

1. Employ a background page, which can execute chrome.tabs.executeScript on demand from content.js - this adds to the same context.
2. (Nuclear option) Get contents of your script and eval() them, which is allowed in content scripts (but may cause problems with review when publishing).

If you need to access data from the page context, you will need to cross the boundary, but you need to be aware about it and how to pass messages through it.