理解浏览器扩展开发：为什么 content script 里的 window 与页面的 window 不同以及解决方案
浏览器扩展开发为开发者提供了强大的工具，使得我们可以扩展和增强网页的功能。然而，在开发过程中，尤其是当涉及到与网页内容进行交互时，我们可能会发现 content script 里的 window 对象与页面的 window 对象有所不同。这篇博客将探讨这个现象的原因，并介绍一种解决方案来弥合这个区别。
为什么 content script 里的 window 与页面的 window 不同？
浏览器扩展设计的一个关键原则是隔离性，这有助于提高安全性和稳定性。浏览器在多个级别上将扩展代码与网页代码隔离开来：
-
不同的上下文：
content script运行在一个特殊的环境中，这个环境与网页的主 JavaScript 环境是分离的。虽然content script可以访问网页的 DOM，但它与网页的 JavaScript 代码是隔离的。 -
安全性考虑：这种隔离有助于防止扩展代码直接操纵网页中的脚本，从而减少安全漏洞。它防止恶意网页脚本访问和操控扩展的资源和数据，同时也可以保护网页不被不受信任的扩展代码破坏。
-
不同的执行环境：
content script和网页脚本之间的window对象不同，是因为它们运行在不同的 JavaScript 环境中。尽管它们在同一个浏览器标签页内，但它们的运行环境是分隔开的。
解决方案：如何在网页的上下文中执行代码？
在网上找了很多方法，最后还是injectScript的方法最靠谱
为了在页面的 JavaScript 环境中执行代码，并使 window 对象与页面的 window 对象一致，我们可以注入一个脚本到页面的 DOM 中。以下是一个具体的实现方案：
步骤 1：创建注入脚本的函数
首先，我们需要在 content script 中编写一个函数，用于将外部脚本注入到页面中。这个函数可以如下所示：
const injectScript = (file, node) => {const th = document.querySelector(node);const s = document.createElement("script");s.setAttribute("type", "text/javascript");s.setAttribute("src", file);th.appendChild(s);
};
步骤 2：获取扩展内脚本的路径
我们需要使用 chrome.runtime.getURL 来获取扩展内脚本 zr.js 的完整路径：
injectScript(chrome.runtime.getURL("/zr.js"), "body");
步骤 3：在 content script 中执行注入
将上述代码片段放在你的 content script 中，这样我们就可以将 zr.js 脚本注入到网页中，并在网页的上下文中运行：
// Content script
const injectScript = (file, node) => {const th = document.querySelector(node);const s = document.createElement("script");s.setAttribute("type", "text/javascript");s.setAttribute("src", file);th.appendChild(s);
};// 获取扩展内脚本路径并注入到页面中
injectScript(chrome.runtime.getURL("/zr.js"), "body");
样例代码解释
上面的代码实现了将扩展中的脚本 zr.js 注入到目标网页的 body 标签中。这使得 zr.js 脚本在页面的 JavaScript 环境中运行，从而可以直接访问页面的 window 对象。
结论
通过这种方式，我们可以绕过 content script 与网页脚本之间的隔离，使我们编写的扩展代码能够在网页的 JavaScript 环境中运行，并访问实际页面的 window 对象。这种方法不仅保持了浏览器扩展的安全性和隔离性，也赋予了我们在特定情况下更高的灵活性。
在实际开发中，确保注入脚本的时机和处理可能的安全策略限制（如 CSP）也是非常重要的。希望这篇文章对你理解和处理 content script 与页面 window 对象不同的问题有所帮助。