如何自动将 JavaScript 注入网页，以便可以从开发者控制台访问其变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17507686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to automatically inject JavaScript into web pages such that its variables can be accessed from the developer console
提问by crouleau
I have a library of JavaScript functions that I want to be able to access from the developer console of a web browser. I want to be able to run my functions side-by-side with the functions and variables defined by the webpage.
我有一个 JavaScript 函数库，我希望能够从 Web 浏览器的开发人员控制台访问它。我希望能够与网页定义的函数和变量并行运行我的函数。
One solution I see is simply copy/paste'ing the code directly into the browser console and then using it, but it would be better if there were a more elegant solution, especially because my codebase could grow a lot and I don't want to have to copy/paste every time I load.
我看到的一个解决方案是将代码直接复制/粘贴到浏览器控制台然后使用它，但如果有更优雅的解决方案会更好，尤其是因为我的代码库可能会增长很多而我不想要每次加载时都必须复制/粘贴。
Another solution I looked into was using Chrome Extensions. Chrome Extension Content Scripts (https://developer.chrome.com/extensions/content_scripts.html#host-page-communication) allow JavaScript code to automatically run on visits to webpages, however the above webpage states that
我研究的另一个解决方案是使用 Chrome 扩展。Chrome 扩展内容脚本 ( https://developer.chrome.com/extensions/content_scripts.html#host-page-communication) 允许 JavaScript 代码在访问网页时自动运行，但是上述网页指出
"[Content scripts cannot] use variables or functions defined by web pages or by other content scripts."
“ [内容脚本不能] 使用由网页或其他内容脚本定义的变量或函数。”
Is there any other way of accomplishing this?
有没有其他方法可以做到这一点？
Thanks for the help!
谢谢您的帮助！
回答by Adi H
UPDATE (7/7/2013):
I was updating to Firefox v22 and found out that on this latest version (or the last few versions as well... I'm not sure) the built-in Web Developer tool has a Javascript Scratchpad (press Shift + F4to pull it up) that will let you type in some code or, in your case, load a JS file and run it on a loaded page.
更新 (7/7/2013)：
我正在更新到 Firefox v22并发现在这个最新版本（或最后几个版本......我不确定）内置的 Web Developer 工具有一个 Javascript Scratchpad（按下Shift + F4以将其拉起）可以让您输入一些代码，或者在您的情况下加载一个 JS 文件并在加载的页面上运行它。
I haven't tested it extensively but I added a couple of variables to an existing page and they were both accessible via the built-in console as well as Firebug's console. Just do File > Open Fileto open your JS file and then do Execute > Run.
我没有对其进行广泛的测试，但我向现有页面添加了几个变量，它们都可以通过内置控制台以及 Firebug 的控制台访问。只需File > Open File打开您的 JS 文件，然后执行Execute > Run.
One option is to create a bookmarklet (reusable and can be injected into any page) but it works only for the simplest script. See: here
一种选择是创建一个书签（可重复使用并且可以注入任何页面），但它仅适用于最简单的脚本。见：这里
回答by PJR
Once your page is loaded in a browser, all the javascript functions would be under the "window" object. Like if you have,
在浏览器中加载页面后，所有 javascript 函数都将位于“window”对象下。就像如果你有，
function mytestfunciton() {
console.log('This is a test');
}
On your console window just try these
在你的控制台窗口上试试这些
window.mytestfunciton();
//and get the response below
This is a test
You can also wrap them in a global variable something like
您还可以将它们包装在一个全局变量中，例如
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);
};
All your functions are now wrapped under the global variable myapp and you can now invoke them from the console using something like
您的所有函数现在都包含在全局变量 myapp 下，您现在可以使用类似的方法从控制台调用它们
myapp.add(5,4);
or as before using the global "window" object
或者像以前一样使用全局“window”对象
window.myapp.add(5,4);
