是否可以注入一个javascript代码来覆盖DOM中现有的代码?(例如默认警报功能)

Question

好的，所以我想要的是覆盖一个已经存在于选项卡中的方法，我要使用的是默认的警报函数。在JS函数中覆盖它将非常容易。只需添加

window.alert = function(){ 
   //Do Something
}

但问题是，当我尝试使用chrome.tabs.executeScript("window.alert = function() { };");时，它不起作用。我试图通过在我想要覆盖该功能的选项卡中使用Chrome控制台手动执行此操作，我在日志中键入了覆盖功能，然后按enter键，完成后，警报功能被覆盖，但我无法通过Chrome扩展来执行此操作。

当您添加executeScript时，它似乎会创建一个与选项卡DOM中的Javascript不同的Javascript，因为我可以使用选项卡DOM中已经存在的函数的名称来创建函数。

有没有一种方法可以让executeScript在选项卡DOM中编写脚本，这样它就可以覆盖页面生成的.js文件编写的任何函数？

谢谢！

Answer 1

函数不作为DOM的一部分存在；相反，它们存在于包含DOM的执行环境中。内容脚本（包括使用executeScript运行的脚本）和实际网页共享相同的DOM，但具有单独的执行环境。因此，调用window.alert = function() {}只会在内容脚本的执行环境中重写window.alert，而不是在实际页面的执行环境。

到达实际页面的执行环境的典型方法是将<script>标记注入DOM。这可以通过多种方式实现。一种方法是在web_accessible_resource中列出一个脚本，并在文档中插入引用该脚本的<script>元素。所需的绝对URL可以通过chrome.extension.getURL获得。

var s = document.createElement("script");
s.src = chrome.extension.getURL("script_in_extension.js");
(document.head||document.documentElement).appendChild(s);

请确保将脚本配置为"run_at": "document_start"，以便在加载页面的任何函数之前进行覆盖。

注意：您的操作可以很容易地被页面撤销：

window.alert = function(){ /*...*/ }; // Your overwrite
delete window.alert;                  // Run from the page/console/...
window.alert('Test?');                // Displays alert box.

如果不能删除覆盖的函数是至关重要的，请使用Object.defineProperty定义一个不可变的方法。有关更多详细信息，请参阅停止使用Chrome扩展执行函数。