web-dev-qa-db-ja.com

Chrome拡張機能| cdnのコンテンツおよびバックグラウンドスクリプトにライブラリを含める方法

my Chrome拡張機能には、コンテンツスクリプトとバックグラウンドスクリプトの2つのファイルがあります。cdnからコンテンツスクリプトにjQueryを追加し、cdnからバックグラウンドスクリプトにlodashを追加する必要があります。

私のマニフェストでは、次のようにcdnからlodashを追加しようとしました。

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

ご覧のとおり、cdnからjQueryを含めようとしましたが、この方法でも含まれていません。

多分誰かがこれを行う方法を知っていますか？よろしくお願いします！

javascriptjquerygoogle-chrome-extensioncdn
8
Ms.Smith

スクリプトは外部リソースから取得できますが、前述のように推奨される方法ではありません ここ 。

さらに、このようにbackgroundタグを使用しないでください。 ソース

拡張機能をダウンロードして必要なライブラリにバンドルし、 content_script として取得することをお勧めします。

YouTubeで実行されている拡張機能のmanifest.jsonの例：

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

外部スクリプトを使用する必要がある場合は、少しハックして実行するのが最適であることがわかりました。

一般的な考え方は、現在のWebページのスコープ内でJSコードの一部を実行し、目的のスクリプトに<script>タグを追加することです。

これは、独自のjsの一部を含める必要がある拡張機能のスニペットです。

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

そしてchromeそのような良い人であることはただそれを実行します。

9
Somrlik