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

理解浏览器扩展开发：为什么 `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");