如何自动将JavaScript注入网页，以便可以从开发人员控制台访问其变量

Question

我有一个JavaScript函数库，我希望能够从Web浏览器的开发人员控制台访问它。 我希望能够与网页定义的函数和变量并排运行我的函数。

我看到的一个解决方案是直接将代码复制/粘贴到浏览器控制台然后使用它，但如果有更优雅的解决方案会更好，特别是因为我的代码库可能会增长很多，我不想要每次加载时都要复制/粘贴。

我研究的另一个解决方案是使用Chrome扩展程序。 Chrome扩展程序内容脚本（ https://developer.chrome.com/extensions/content_scripts.html#host-page-communication ）允许JavaScript代码在访问网页时自动运行，但上述网页指出

“ [内容脚本不能]使用由网页或其他内容脚本定义的变量或函数。 ”

有没有其他方法来实现这一目标？

谢谢您的帮助！

Answer 1

更新（2013年7月7日）：
我正在更新到Firefox v22并发现在这个最新版本（或者最后几个版本......我不确定）内​​置的Web Developer工具有一个Javascript Scratchpad（按Shift + F4拉它这将允许您键入一些代码，或者在您的情况下，加载JS文件并在加载的页面上运行它。

我没有对它进行过广泛的测试，但我在现有页面中添加了几个变量，它们都可以通过内置控制台和Firebug控制台访问。 只需执行File > Open File打开您的JS文件，然后执行Execute > Run 。

---

一种选择是创建一个bookmarklet（可重用并可以注入任何页面），但它只适用于最简单的脚本。 见： 这里

Answer 2

在浏览器中加载页面后，所有javascript函数都将位于“window”对象下。 就像你有，

function mytestfunciton() {
  console.log('This is a test');
}

在您的控制台窗口上试试这些

window.mytestfunciton();
//and get the response below
This is a test 

您也可以将它们包装在全局变量中

var myapp = {};
myapp.add = function(a,b) {
            myapp.sumvalue = a + b;
                            console.log('Sum Value:'+myapp.sumvalue);
        };
myapp.substract = function (a,b) {
            myapp.differencevalue = a - b; 
                            console.log('Difference Value:'+myapp.differencevalue);
          };

您的所有函数现在都包含在全局变量myapp下，现在您可以使用类似的东西从控制台调用它们

myapp.add(5,4);

或者像以前一样使用全局“窗口”对象

window.myapp.add(5,4);