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

Question

为了开发目的，我想要能够轻松地将本地存储的脚本加载到浏览器中，而不必复制粘贴到控制台中。

创建一个新的<script>元素没有效果，会在Chrome浏览器中显示一个Not allowed to load local resource: file://....错误。

此外，创建用户脚本也行不通——每次编辑后都需要重新安装。

是否有其他的方法可以通过书签等方式轻松加载本地脚本？

- Manishearth

---

如果我们可以超出JavaScript和浏览器范围，这里，也许可以在本地服务器上提供您的脚本（也许您正在进行本地开发）？您可以使用一行Python启动本地服务器。 - cheeken

@cheeken：是的，那真是个好主意。我确实已经安装了Apache，并且我也在Apache文件夹中进行开发，所以这是一个很好的选择！ - Manishearth

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，启用开发者模式并选择带有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] 这一部分存储为缩写变量？

- apsillers

---

我尝试在Chrome 22上进行此操作，它显示了一个警告，即正在逐步淘汰清单版本1支持。有关v2中更改的文档包括“默认情况下，包的资源不再对外部网站（如图像的src或脚本标记）可用。如果您希望网站能够加载包含在您的包中的资源，则需要通过web_accessible_resources清单属性明确将其列入白名单。这对于通过注入的内容脚本在网站上建立界面的扩展特别相关。”我怀疑我们会需要这个。 - Barmar

一旦我加载了脚本文件，如何使用它？我的.js文件包含一个顶层函数定义，但当我尝试在Javascript控制台中调用它时，它显示未定义。 - Barmar

@Barmar：这个答案是在广泛使用清单版本2之前编写的。感谢您的提醒；我现在会对其进行更正。 - apsillers

@Barmar：加载是异步进行的。如果您在附加“script”标记后立即尝试使用该函数，则函数调用将失败，因为脚本尚未加载。相反，您需要使用“onload”处理程序在脚本加载后运行。我制作了一个演示：http://jsfiddle.net/GvS2B/2/ - apsillers

我只是在 JavaScript 控制台中键入您答案中的语句，而不是将它们放入网页中。我只需要一些实用函数，以便在调试时手动使用。 - Barmar

@Barmar 你应该 1) 运行我上面的三行代码注入来追加标签，2) 在控制台运行完那段代码后等待一两秒钟，然后3) 尝试在控制台上使用函数作为独立命令。如果这样做不起作用，那么你的脚本或扩展设置可能出了问题，你应该开一个单独的问题来解决这个问题。 - apsillers

Answer 2

不幸的是，Chrome 不支持通过 AJAX 加载本地文件; 但是，您可以通过使用标志 --disable-web-security （每个主机操作系统的详细信息有所不同）来解决此限制。

- maerics

---

我可以建议使用 --allow-file-access-from-files 吗？这将允许所有其他网络安全功能保持有效，并且（我相信）仍然可以实现所需的结果。 - apsillers

有趣的发现，但是这个SO答案提出了一些关于该功能有效性的担忧，基于其未解决的问题。 - maerics

Answer 3

如何在命令行中以以下方式运行Chrome： chrome.exe --allow-file-access-from-files

- mostafa amiri

Answer 4

你需要运行本地http服务器

这是一个很好的文档：

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

- mostafa amiri

Answer 5

你尝试过使用相对路径从你的网页到js文件中吗？像这样：

src='/js/javascript.js'

- Sunil Dodiya

---

不行，我正在开发一个用户脚本——否则，我为什么要首先复制粘贴到控制台呢？ - Manishearth