google-chrome - 是否可以注入(inject)一个覆盖 DOM 中存在的 JavaScript 代码？ (例如默认警报功能)

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，但具有 separate execution environments .所以调用window.alert = function() {}仅重写 window.alert在您的内容脚本的执行环境中，而不是在实际页面的执行环境中。
到达实际页面执行环境的典型方式是注入(inject)一个<script>标记到 DOM 中。这可以在 several ways 中完成.一种方法是将 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 定义一个不可变的方法。更多详情，请参阅 Stop a function from execute with Chrome extension .