有什么办法动态加载本地JS文件？ [英] Is there any way to load a local JS file dynamically?

问题描述

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

创建一个新的< script> 元素不起作用，它会给出不允许加载本地资源：file：// .... 错误（在Chrome中）。

另外，创建一个userscript不会起作用 - 我必须每次都重新安装它我做了一个编辑。

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

解决方案

在Chrome中，您可以创建一个扩展名，以存放您需要加载的所有本地文件。它将使你的文件通过 chrome-extension：// ... 而不是 file：// ...

在一个新文件夹中创建一个名为 manifest.json 的文件并将其填入：

  {
name：文件持有人，
manifest_version：2，
版本 ：1.0，
web_accessible_resources：[test.js，other.js，yetanother.js] 
} 
  pre> 
 
 
然后，将所有要加载的脚本放在新目录中，并确保它们包含在 web_accessbile_reources 清单列表。通过转到 chrome：// extensions ，启用 Developer Mode ，然后选择带有<$的新文件夹来加载扩展名c $ c>加载解压后的扩展...... 。
 
 
 
现在您可以使用 chrome-extension：// [app_id] / [file_name] ，其中 app_id 是为< c $ c> 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] 部分存储为一个简写变量？
 
For development purposes, I'd like to be able to easily load locally-stored scripts into the browser instead of having to copy-paste to the console.

Creating a new <script> element isn't working, it gives a Not allowed to load local resource: file://.... error (in Chrome).

Also, creating a userscript won't work--I'd have to re-install it every time I make an edit.

Is there an alternative way to easily load a local script via a bookmarklet/etc?
解决方案
In Chrome, you can create an extension that holds all of the local files that you need to load.  It will make your files accessible via chrome-extension://... instead of file://...

Make a file named manifest.json in a new folder and fill it with:
{
  "name": "File holder",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["test.js", "other.js", "yetanother.js"]
}
Then, put all the scripts you want to load in that new directory, and make sure they are included in the web_accessbile_reources manifest list.  Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension....

Now you can access all the files in your extension directory using chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page.  Note that because the protocols and hostnames differ from where you've doing your actual work (unless you decide to do all your development in the extension folder, which might be acceptable to you), the extension resources are cross-domain and can only be loaded via <script> tag.

Now from the console, you can do:
var s = document.createElement("script");
s.src = "chrome-extension://aefigdoelbemgaedgkcjpcnilbgagpcn/test.js";
document.body.appendChild(s);
(Assuming your file is test.js and your app id is aefigdoelbemgaedgkcjpcnilbgagpcn.)

It's a quite bit to type, I know, but perhaps you can store the chrome-extension://[app_id] part as a shorthand variable?

                        
这篇关于有什么办法动态加载本地JS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！