如何在单一浏览器评估上下文环境中运行代码？

问题本质 #

• 选择「Top」上下文时，处于浏览器自身的Chrome环境，这里的document指向浏览器UI而非网页，因此无法访问网页元素，但原生console.log功能正常。
• 选择网页上下文时，处于当前页面的执行环境，可访问网页DOM，但如果页面代码重写了console.log（比如改为无返回值的函数），就会出现调用后显示undefined的情况。

解决办法 #

方法1：在网页上下文恢复原生console.log

执行以下代码修复被重写的控制台方法：

console.log = window.console.log.bind(window.console);

修复后即可在网页上下文同时正常使用console.log和访问网页元素。

方法2：在Top上下文直接访问网页内容

通过浏览器提供的API获取当前网页的窗口对象，进而操作DOM：

// 获取当前标签页的网页窗口
const contentWindow = gBrowser.selectedBrowser.contentWindow;
// 访问网页元素
const targetButton = contentWindow.document.querySelector('button');
// 正常打印
console.log(targetButton);

这样就能在Top上下文同时实现元素访问和日志输出。

方法3：绕过页面重写的console

如果只是临时打印，可直接调用浏览器原生的console对象：

window.console.log(你要打印的内容或元素);

内容的提问来源于stack exchange，提问作者user3560827