12

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?

2
  • 1
    If we're allowed to branch outside of JavaScript and the browser, here, maybe serve your script on a local server (perhaps you're doing local development)? You can start a local server with one line of Python.
    – cheeken
    Commented May 16, 2012 at 4:01
  • @cheeken: Yeah, that's actually a good idea.. I do have Apache installed, and I anyway do my development in the Apache folder, so that's a great alternative! Commented May 16, 2012 at 5:34

5 Answers 5

26

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?

6
  • I tried doing this with Chrome 22, and it displayed a warning that manifest version 1 support is being phased out. The documentation on changes in v2 includes "A package's resources are no longer available by default to external websites (as the src of an image, or a script tag). If you want a website to be able to load a resource contained in your package, you'll need to explicitly whitelist it via the web_accessible_resources manifest attribute. This is particularly relevant for extensions that build up an interface on a website via injected content scripts." I suspect we'll need this.
    – Barmar
    Commented Sep 25, 2012 at 16:41
  • Once I load the script file, how do I use it? My .js file contains a single top-level function definition, but when I try to call it in the Javascript console it says it's not defined.
    – Barmar
    Commented Sep 25, 2012 at 17:03
  • @Barmar: This answer was written before manifest version 2 was in widespread use. Thanks for the notice; I'll correct it now.
    – apsillers
    Commented Sep 25, 2012 at 19:43
  • @Barmar: The load happens asynchronously. If you trying to use the function immediately after you append the script tag, your function call will fail, because the script hasn't loaded yet. Instead, you need to use an onload handler to run after the script loads. I made a fiddle to demonstrate: jsfiddle.net/GvS2B/2
    – apsillers
    Commented Sep 25, 2012 at 19:54
  • I'm just typing the statements in your answer in the JavaScript console, not putting them in a web page. I just want some utility functions that I can use by hand when debugging.
    – Barmar
    Commented Sep 25, 2012 at 19:59
2

Sadly, Chrome doesn't allow you to load local files via AJAX; however, you can work around this limitation by launching the browser with the flag --disable-web-security (details vary per host operating system).

2
  • 5
    Might I suggest --allow-file-access-from-files instead? That will allow all other Web security feature to stay in effect and (I believe) still achieve the desired result.
    – apsillers
    Commented May 16, 2012 at 5:14
  • Interesting find but this SO answer raises some concerns about the effectiveness of that feature based on its outstanding issues.
    – maerics
    Commented May 16, 2012 at 5:29
1

run chrome as: chrome.exe --allow-file-access-from-files from CLI

0

you need to run local http server

this is a good document for this:

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

0
-1

Have you tried a relative path from your page to your js file liek so...

src='/js/javascript.js'

1
  • Won't work, I'm developing a userscript--otherwise, why would I copy-paste to the console in the first place? Commented May 16, 2012 at 5:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.