【浏览器插件】理解浏览器扩展开发：为什么 `content script` 里的 `window` 与页面的 `window` 不同以及解决方案

理解浏览器扩展开发：为什么 content script 里的 window 与页面的 window 不同以及解决方案

浏览器扩展开发为开发者提供了强大的工具，使得我们可以扩展和增强网页的功能。然而，在开发过程中，尤其是当涉及到与网页内容进行交互时，我们可能会发现 content script 里的 window 对象与页面的 window 对象有所不同。这篇博客将探讨这个现象的原因，并介绍一种解决方案来弥合这个区别。

为什么 content script 里的 window 与页面的 window 不同？

浏览器扩展设计的一个关键原则是隔离性，这有助于提高安全性和稳定性。浏览器在多个级别上将扩展代码与网页代码隔离开来：

1. 不同的上下文：content script 运行在一个特殊的环境中，这个环境与网页的主 JavaScript 环境是分离的。虽然 content script 可以访问网页的 DOM，但它与网页的 JavaScript 代码是隔离的。

2. 安全性考虑：这种隔离有助于防止扩展代码直接操纵网页中的脚本，从而减少安全漏洞。它防止恶意网页脚本访问和操控扩展的资源和数据，同时也可以保护网页不被不受信任的扩展代码破坏。

3. 不同的执行环境：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 对象不同的问题有所帮助。