21

my Chrome extension has two files: content and background scripts. I need to add jQuery to content script from cdn and lodash to background script from cdn too.

In my manifest I tried to add lodash from cdn like this:

"background": {
      "scripts": ["background.js", "https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"]
  },

  "content_security_policy": "script-src 'self' https://cdn.jsdelivr.net;     object-src 'self'"

But that didn't help.

My content file is injected to the page from the background file:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        chrome.tabs.insertCSS(null, {file: "mainStyles.css"});
        chrome.tabs.executeScript(null, {
            code: 'var config = ' + JSON.stringify(config)
        }, function() {
            chrome.tabs.executeScript(null, { file: "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" }, function()     {
                chrome.tabs.executeScript(null, { file: "content.js" })
            });
        });
    }
});

And as you can see I tried to include jQuery from cdn but this way it's not included either.

Maybe someone knows the way how to do this? Many thanks in advance!

Pavel Vlasov
  • 4,206
  • 6
  • 41
  • 54
Ms.Smith
  • 413
  • 1
  • 7
  • 15

1 Answers1

25

You can get your scripts from external resources, but it's not the preferred way as stated here.

Furthermore, you shouldn't use the background tag like this. Source

You're better off downloading and bundling your extension with required libraries and getting it as a content_script.

Example from my manifest.json for an extension running on youtube:

"content_scripts": [ {
    "matches": ["http://*.youtube.com/*", "https://*.youtube.com/*"],
    "js": ["jquery.js", "content.js"]
}],

If you must use some external scripts, I found that doing it using a little hack works the best.

The general idea is that it executes a piece of JS code in the scope of current webpage and adds a <script> tag with your desired script.

This is a snippet from an extension that required some of our proprietary js to be included:

chrome.tabs.executeScript(tab.id, {code:
    "document.body.appendChild(document.createElement('script')).src = 'https://example.com/script.js';"
});

And chrome being such a good guy just executes it.

Somrlik
  • 680
  • 5
  • 13
  • thank you for your answer, but yes, I know this way of downloading necessary libraries and then including them like you did. But I really need to know the way how to include them from external sources – Ms.Smith Jun 03 '16 at 10:32
  • 1
    @Ms. Smith OK, will provide, gimme a minute. – Somrlik Jun 03 '16 at 10:35
  • @Somrlik neither of those methods are working for me. I'm trying to add lodash and use it in a js file added via `script` tag to my `popup.html`. However I keep getting `_ is undefined`. I've tried other packages so it must be with my implementation. Any ideas? – Big Money Mar 12 '19 at 22:28
  • 1
    Nevermind: I was able to get it working by injecting the package with `chrome.tabs.executeScript` with the file being by downloaded package. – Big Money Mar 12 '19 at 22:39
  • 1
    Refused to load the script 'https://example.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. – Sailist Apr 23 '22 at 11:03
  • yup this doesn't work anymore @Sailist – James Pog Sep 24 '22 at 20:14