web_accessible_resources无法访问chrome.tabs.executeScript

Question

我正在开发一个扩展程序，该扩展程序使用 chrome.tabs.executeScript 从已置于关闭的文件中加载 requirejs 的实例以防止它来自污染全球空间。让我们称之为 __ MyGlobal 。这按预期执行。

然后我使用 chrome.tabs.executeScript 在同一个标​​签中运行代码。此代码是一个基本的__MyGlobal.require（[ dependencies ]，function（）{}）调用。这按预期执行。

要求调用的依赖关系在__MyGlobal.declare（）调用时失败。

错误是未捕获的ReferenceError：__ MyGlobal未定义。

如果我在控制台中输入__MyGlobal，则进一步测试它未定义。 如果我将域名更改为我的扩展名，则控制台会按预期显示__MyGlobal。

我不确定如何

简而言之

1. chrome.tabs.executeScript加载require.js
2. chrome.tabs.executeScript加载带有依赖项的require（）语句
3. require（）文件依赖项加​​载（它们在web_accessible_resources中声明）
4. require（）依赖项具有自己的依赖项（define statements）
5. define语句无法访问requirejs

如何使用 chrome.tabs.executeScript 加载代码并加载为 web_accessible_resources 以便一起玩？他们在不同的领域吗？谢谢！

Answer 1

使用 chrome.tabs.executeScript 注入的脚本是“内容脚本”，这意味着它们在不同于网站的javascript环境中执行。他们与网站的DOM相互作用。

requirejs通过创建脚本标记来加载依赖项。因此，requirejs加载的脚本被加载到页面的javascript环境中，而不是扩展程序的javascript环境。

如果您执行的操作不仅仅是Chrome的最基本开发，那么您可以阅读有关Chrome扩展环境分离here. Programmatic-Injection and Execution-Environment的方式的更多信息。

可以在require.js文件的底部添加以下示例（由wOxxOm (source here)提供的信用），以便在requirejs作为内容脚本在其自己的javascript环境中运行时，通过ajax加载requirejs。 / p>

var legacyLoad = requirejs.load;
requirejs.load = function(context, moduleName, url){
    if(location.protocol === 'chrome-extension:'){//works for extension pages
        legacyLoad(context, moduleName, url);        
    }
    else {//works for content scripts
        var x = new XMLHttpRequest();
        x.open('GET', url);
        x.onload = function() {
            if (x.status === 200) {
                // Run script in the current global context.
                try {
                    window.eval(x.responseText);
                } 
                finally {
                    context.completeLoad(moduleName);
                }
            } 
            else context.onScriptError(new Event('error'));

        };
        x.onerror = function() {
            ontext.onScriptError(new Event('error'));
        };
        x.send();
    }
}