Расширение Chrome | Как включить библиотеку в контент и фоновые скрипты из cdn

Question

У моего расширения Chrome есть два файла: контент и фоновые скрипты. Мне нужно добавить jQuery в скрипт контента из cdn и lodash в фоновый скрипт из cdn.

В своем манифесте я попытался добавить lodash из cdn следующим образом:

"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'"

Но это не помогло.

Мой файл содержимого внедряется на страницу из фонового файла:

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

И, как вы можете видеть, я пытался включить jQuery из cdn, но таким образом он тоже не включался.

Может кто знает способ как это сделать? Спасибо заранее!

Answer 1

Вы можете получить свои скрипты из внешних ресурсов, но это не самый предпочтительный способ, как указано здесь.

Кроме того, вы не должны использовать background пометить как это. Источник

Вам лучше скачать и связать ваше расширение с необходимыми библиотеками и получить его как content_script.

Пример из моего manifest.json для расширения, работающего на YouTube:

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

---

Если вам нужно использовать некоторые внешние скрипты, я обнаружил, что лучше всего сделать это с помощью небольшого взлома.

Общая идея заключается в том, что он выполняет часть кода JS в области текущей веб-страницы и добавляет <script> тег с желаемым сценарием.

Это фрагмент из расширения, которое требовало включения некоторых наших проприетарных js:

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

И Chrome, будучи таким хорошим парнем, просто исполняет его.