Chrome 拡張機能: コンテンツ スクリプトで ES6 モジュールをインポートする

Question

Chrome 61 では、JavaScript モジュールのサポートが追加されました。現在Chrome 63を実行しています。

import/export 構文を使用して、Chrome 拡張機能コンテンツ スクリプトでモジュールを使用しようとしています。

Inmanifest.json:

"content_scripts": [
    {
        "js": [
            「コンテンツ.js」
        ]、
    }
]

Inmy-script.js (content.js と同じディレクトリ):

'厳密に使用';

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

デフォルトの injectFunction;

をエクスポートします。

Incontent.js:

'厳密に使用';

'./my-script.js' から injectFunction をインポートします。
injectFunction();

次のエラーが発生します:キャッチされない構文エラー:予期しない識別子

インポート構文を import {injectFunction} from './my-script.js'; に変更すると、次のエラーが発生します: Uncaught SyntaxError : 予期しないトークン {< /p>

Chrome 拡張機能の content.js でこの構文を使用すると問題はありますか (HTML では <を使用する必要があるため) ;コード>

Answer 1

動的 import() 関数を使用します。

chrome API (chrome.runtime.sendMessage など) を含む初期コンテンツ スクリプト。

content_script.js では、 のようになります。 リーリー

インポートされたスクリプトをマニフェストの

Web Accessible Resources で宣言する必要もあります:

//マニフェストV3

リーリー

//マニフェストV2

リーリー

詳細についてはこちらをご覧ください:

• Chrome 拡張機能で ES6 の「インポート」を使用する方法
• Chrome 拡張機能での ES6 インポートの実際の例
• chrome.runtime.getURL 李> ＃＃＃それが役に立てば幸い。

Answer 2

免責事項

まず、2018 年 1 月の時点では、コンテンツ スクリプトはモジュールをサポートしていないことに注意することが重要です。この回避策は、返されたページに module script タグを埋め込むことで、拡張機能の制限を回避します。

これは安全ではない解決策です。

Web スクリプト (またはその他の拡張機能) は、セッター/ゲッター、Object.prototype のプロキシ、およびその他のプロトタイプ 関数やscript 要素内のコードは、デフォルトでコンテンツ スクリプトを実行する安全な分離された JS 環境ではなく、ページの JS コンテキストで実行されるためです。

安全な回避策は、こちらの別の回答 に示されている動的 import() です。

＃＃＃解決＃＃＃

これは私の

manifest.json: リーリー

web_accessible_resources

に 2 つのスクリプトがあることに注意してください。 これは私の

content.js: リーリー これにより、

main.js

がモジュール スクリプトとして Web ページに挿入されます。 すべてのビジネス ロジックは

main.js

にあります。 このメソッドが機能するには、

main.js

(および インポートするすべてのスクリプト) が マニフェストの web_accessible_resources に配置されている必要があります。 使用例: my-script.js

リーリー main.js

内のインポート スクリプトの例: リーリー これは効きます!エラーも発生せず、満足でした。 :)