简体   繁体   中英

What’s the quickest, easiest way to execute a JavaScript file on a live web page?

I have this JavaScript file URL:

https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js

(hosted on GitHub and passed through RawGit), and I would like to inject it into a live web page via the browser's console.

In order to achieve that, I can dynamically create a <script> element and append it to the DOM:

(function () {
  var s = document.createElement('script');
  s.src = 'https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js';
  document.body.appendChild(s);
}())

But this is neither quick nor easy. I would like to use an API that makes this possible via a simple invocation, eg:

exec('https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js')

Do Chrome or Firefox provide such an API (or anything similar) in their console?


Use case: Quickly testing JavaScript libraries hosted on GitHub on live web pages.

Update: The Developer Toolbar has been removed from Firefox Nightly as of 18th May 2018.

In Firefox, you can inject scripts using the Developer Toolbar. Bring it up with Shift+F2 and type inject https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js

More info on MDN

You need a module loading capability from what I see. You have two routes:

  • Either use a module loader like Require.js that already does that kind of dynamic loading for you. It enforces you to use AMD style of scripts though. This website talks a bit more about modules in javascript. The require object will be available in console since it is global.

  • Use a hackish function that does that like jQuery does here , if you use jQuery already (it is a pretty big library to import just for this). jQuery is global and you can call that function in console.

EDIT : The reason I did not link browser specific functionality is because it is too specific. Using a JavaScript only solution works across all browsers to test for compatibility.

For chrome there's a plugin called Script Injector that does exactly that

https://chrome.google.com/webstore/detail/script-injector/fddnddnolonllcgfbenaloajnbhebmob?hl=en

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM