質問

質問 クローム 61 で、JavaScript のモジュールのサポートが追加されました。現在、私はChrome 63を使用しています。

を使おうとしています。 import / export の構文は、Chrome拡張コンテンツのスクリプトで、モジュールを使用するために使用します。

で manifest.json :

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]

で my-script.js (同じディレクトリに content.js ):

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

で content.js :

'use strict';

import injectFunction from './my-script.js';
injectFunction();

このようなエラーが発生します。 Uncaught SyntaxError: Unexpected identifier

もし、インポート構文を import {injectFunction} from './my-script.js'; このようなエラーが発生します。 Uncaught SyntaxError: Unexpected token {

でこの構文を使用することに何か問題がありますか？ content.js を使用することに何か問題があるのでしょうか（HTMLでは <script type="module" src="script.js"> の構文が必要なので）、それとも私が何か間違ったことをしているのでしょうか？Googleが拡張機能のサポートを無視するのはおかしいと思うのですが。

どのように解決するのですか？

私は何とか 回避策 .

免責事項

まず最初に言っておきたいのは、2018年1月現在、コンテンツスクリプトはモジュールに対応していないということです。このワークアラウンドは、モジュール script タグを、拡張機能に戻るページに埋め込むことで制限を回避します。

回避策

これは私の manifest.json :

    "content_scripts": [ {
       "js": [
         "content.js"
       ]
    }],
    "web_accessible_resources": [
       "main.js",
       "my-script.js"
    ]

の中に二つのスクリプトがあることに注意してください。 web_accessible_resources .

これは私の content.js :

    'use strict';

    const script = document.createElement('script');
    script.setAttribute("type", "module");
    script.setAttribute("src", chrome.extension.getURL('main.js'));
    const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    head.insertBefore(script, head.lastChild);

これは main.js をモジュールスクリプトとしてウェブページに挿入します。

すべてのビジネスロジックは main.js .

このメソッドが動作するために main.js (というスクリプトが必要です。 import ) は である web_accessible_resources でなければなりません。

使用例。 my-script.js

    'use strict';

    const injectFunction = () => window.alert('hello world');

    export {injectFunction};

そして main.js は、スクリプトをインポートする例です。

    'use strict';

    import {injectFunction} from './my-script.js';
    injectFunction();

これでうまくいきました。エラーも出ませんし、満足です :)