在实时网页上执行 JavaScript 文件最快、最简单的方法是啥？

Posted 2023-03-07

【中文标题】在实时网页上执行 JavaScript 文件最快、最简单的方法是啥？

【英文标题】：What’s the quickest, easiest way to execute a JavaScript file on a live web page?在实时网页上执行 JavaScript 文件最快、最简单的方法是什么？

【发布时间】：2015-08-26 07:01:27

【问题描述】：

我有这个 javascript 文件 URL：

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

（托管在 GitHub 上并通过 RawGit 传递），我想通过浏览器的控制台将其注入到实时网页中。

为了实现这一点，我可以动态创建一个<script> 元素并将其附加到 DOM：

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

但这既不快也不容易。我想使用一个 API，通过简单的调用实现这一点，例如：

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

Chrome 或 Firefox 是否在其控制台中提供这样的 API（或类似的东西）？

---

用例：在实时网页上快速测试托管在 GitHub 上的 JavaScript 库。

【参考方案1】：

更新：The Developer Toolbar has been removed from Firefox Nightly as of 18th May 2018.

在 Firefox 中，您可以使用开发者工具栏注入脚本。用Shift+F2 调出它并输入inject https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js

More info on MDN

【讨论】：

这正是我想要的。

我们have plans 将命令系统从开发人员工具栏折叠到控制台本身，希望在今年晚些时候。

【参考方案2】：

根据我所见，您需要一个模块加载功能。你有两条路线：

要么使用像 Require.js 这样的模块加载器，它已经为您完成了这种动态加载。它强制你使用 AMD 风格的脚本。 This website 更多地讨论了 javascript 中的模块。 require 对象将在控制台中可用，因为它是全局的。

如果您已经使用 jQuery，请使用类似 jQuery does here 的 hackish 函数（它是一个非常大的库，仅用于此导入）。 jQuery 是全局的，您可以在控制台中调用该函数。

编辑：我没有链接浏览器特定功能的原因是因为它太具体了。使用仅 JavaScript 的解决方案适用于所有浏览器以测试兼容性。

【参考方案3】：

对于 chrome，有一个名为 Script Injector 的插件可以做到这一点

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