javascript - 我正在访问的网站可以访问由 Chrome 扩展程序添加的全局变量吗？

Question

假设我有一个 Chrome 扩展程序，向每个访问的页面添加一些 JS 代码(这在 content_scripts 中很常见):

{
    "name": "...",
    "content_scripts": [
        {
            "js": ["run.js"],
            "matches": ["http://*/*", "https://*/*"],
            "run_at": "document_end"
        }
    ]
    ...
}

假设 run.js 有一个全局 templates 变量:

var templates = {0: 'hello world', 1: 'bye bye'}; // default templates

chrome.storage.sync.get("templates", function(obj) {
    templates = obj.templates;
});

document.addEventListener("keydown", function(e) {
    // add template to textarea if a specific key is pressed
}

问题:我正在访问的网站是否可以抓取我模板中存储的所有个人数据(因为它位于全局变量 templates 中)，并通过 AJAX 将其发送到他们的服务器？ 如果是这样，怎么做？

或者这是不可能的，因为 Chrome 扩展程序 content_scripts 的变量和页面变量之间存在隔离墙？

Answer 1

🌍孤立的世界

不，上下文脚本是沙盒的，只能访问 DOM，您可以阅读 on the docs :

Content scripts live in an isolated world, allowing a content script to makes changes to its JavaScript environment without conflicting with the page or additional content scripts.

您注入(inject)的网站run.js将无法访问templates .

事实上，即使你这样做window.templates = templates在run.js ，注入(inject)的页面将得到undefined如果它尝试访问它。

🛠️实际示例

假设您有一个 Chrome 扩展程序，当您按下在页面上显示弹出窗口的浏览器操作按钮时，该扩展程序会在当前事件的选项卡上注入(inject)脚本。如果该弹出窗口之前已被注入(inject)，您只需调用 toggle方法就可以了。

你的注入(inject)脚本中可能有这样的内容:

import { Popup } from './components/popup.component';

const popup = window.POPUP;

if (popup) {
    popup.toggle();
} else {
    window.POPUP = new Popup();
}

然后:

• 第一次注入(inject)时，window.POPUP ，在上下文脚本的世界中，将是 undefined ，所以我们将创建一个新的 Popup实例并将其分配给 window.POPUP再次，在上下文脚本的世界中。

• 第二次及后续注入(inject)时，window.POPUP在上下文脚本的世界中，已经有一个值，我们只需调用 popup.toggle() .

• 如果注入(inject)页面上的脚本尝试访问window.POPUP任何时候，在它自己的世界里，它都会得到undefined .

• 如果注入(inject)的页面有 window.POPUP = true ，内容脚本仍然会得到 undefined当访问window.POPUP时第一次，像那两个人一样window.POPUP生活在不同的世界。