有没有办法动态加载本地JS文件？

Question

出于开发目的,我希望能够轻松地将本地存储的脚本加载到浏览器中,而不必复制粘贴到控制台.

创建新<script>元素不起作用,它会产生Not allowed to load local resource: file://....错误(在Chrome中).

此外,创建用户脚本将无法工作 - 我每次进行编辑时都必须重新安装.

有没有其他方法可以通过bookmarklet/etc轻松加载本地脚本？

Answer 1

在Chrome中,您可以创建一个扩展程序,其中包含您需要加载的所有本地文件.它将使您的文件可以通过chrome-extension://...而不是file://...

创建一个以manifest.json新文件夹命名的文件,并将其填入:

{
  "name": "File holder",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["test.js", "other.js", "yetanother.js"]
}

然后,将要加载的所有脚本放在该新目录中,并确保它们包含在web_accessbile_reources清单列表中.通过转到chrome://extensions,启用Developer Mode和选择新文件夹来加载扩展Load unpacked extension....

现在,您可以使用扩展名目录中的所有文件chrome-extension://[app_id]/[file_name],其中" app_id"是chrome://extensions页面上扩展名列出的哈希值.请注意,因为协议和主机名与您实际工作的位置不同(除非您决定在扩展文件夹中进行所有开发,这可能是您可以接受的),扩展资源是跨域的,并且只能是通过<script>标签加载.

现在从控制台,你可以做到:

var s = document.createElement("script");
s.src = "chrome-extension://aefigdoelbemgaedgkcjpcnilbgagpcn/test.js";
document.body.appendChild(s);

(假设您的文件是test.js,您的应用ID是aefigdoelbemgaedgkcjpcnilbgagpcn.)

我知道,它有点打字,但也许您可以将chrome-extension://[app_id]零件存储为速记变量？