注入JS加载外部脚本：突破模块限制技巧

在浏览器插件或注入式JavaScript中，直接使用ES6 import语句加载外部JS文件常遇“SyntaxError”。本文提出一种解决方案，即自定义异步加载函数，模拟模块导出机制，使注入脚本能动态获取并使用外部JavaScript库或自定义脚本的功能，有效规避原生模块导入的限制。该函数利用fetch API获取脚本内容，并通过eval函数在当前作用域内执行，同时模拟module对象以捕获脚本导出。文章提供详细代码示例，并强调安全性风险，如eval()函数可能导致XSS攻击，建议仅加载可信来源脚本。此外，还需注意脚本兼容性及全局变量声明的影响。本方法适用于特定“注入式JS中无法使用原生import”场景，是一种轻量级解决方案。

本文旨在解决在浏览器插件或注入式JavaScript中，直接使用ES6 import语句加载外部JS文件时遇到的“SyntaxError: Cannot use import statement outside a module”问题。我们将介绍一种实用的异步加载函数，通过模拟模块导出机制，使注入脚本能够动态获取并使用外部JavaScript库或自定义脚本的功能，有效规避了原生模块导入的限制，同时提供了详细的代码示例和使用注意事项。

1. 问题背景与挑战

当开发浏览器插件或通过其他方式向网页注入JavaScript代码时，我们经常需要引入外部的JavaScript库或自定义脚本。虽然CSS文件可以通过@import规则轻松引入，但对于JavaScript文件，直接使用ES6的import from 'url'语法通常会遇到“SyntaxError: Cannot use import statement outside a module”错误。这是因为浏览器在非模块脚本（例如通过