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 では <を使用する必要があるため) ;コード>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
動的import()
関数を使用します。chromeAPI (chrome.runtime.sendMessageなど) を含む初期コンテンツ スクリプト。content_script.js
インポートされたスクリプトをマニフェストのでは、のようになります。 リーリーWeb Accessible Resourcesで宣言する必要もあります:
//マニフェストV3リーリー
//マニフェストV2リーリー
詳細についてはこちらをご覧ください:李> ＃＃＃それが役に立てば幸い。免責事項
まず、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内のインポート スクリプトの例:リーリー
これは効きます!エラーも発生せず、満足でした。 :)