google-chrome - 您如何检测到脚本已加载*并*在 chrome 扩展中执行？

Question

几天来我一直在追踪一个错误......然后我意识到这个错误是我。 :/

我一直在使用 webRequest.onComplete，为脚本过滤。我的错误是我在加载和执行的脚本之间建立了不正确的关联。 get 加载的顺序与它们执行的顺序不同，因此事件的时间不是我需要它们的顺序。我需要在某些脚本之间注入(inject)，所以我需要一个事件在文件执行之后和之前下一个。

目前我能想到的唯一解决方案是在执行之前更改正在加载的 JS。但它让我的胃转动。而且 bfcache 会造成更大的破坏，因此也不是一个很好的解决方案。

我会使用 HTML5 规范的 afterscriptexecute，但这并没有在 Chrome 中实现。是否有另一个 API，也许是我可以使用的扩展 API？

Answer 1

注:此方法no longer works as of Chrome 36 .没有直接的替代方案。

注意:下面的答案仅适用于外部脚本，即那些加载了 <script src> .

在 Chrome(和 Safari)中，“beforeload”事件在资源加载之前触发。此事件允许阻止资源，以便永远不会获取脚本。在这种情况下，您可以判断加载的资源是否为脚本，并检查是否要执行某些操作

此事件可用于模拟 beforescriptexecute/afterscriptexecute :

document.addEventListener('beforeload', function(event) {
    var target = event.target;
    if (target.nodeName.toUpperCase() !== 'SCRIPT') return;
    var dispatchEvent = function(name, bubbles, cancelable) {
        var evt = new CustomEvent(name, {
            bubbles: bubbles,
            cancelable: cancelable
        });
        target.dispatchEvent(evt);
        if (evt.defaultPrevented) {
            event.preventDefault();
        }
    };
    var onload = function() {
        cleanup();
        dispatchEvent('afterscriptexecute', true, false);
    };
    var cleanup = function() {
        target.removeEventListener('load', onload, true);
        target.removeEventListener('error', cleanup, true);
    }
    target.addEventListener('error', cleanup, true);
    target.addEventListener('load', onload, true);

    dispatchEvent('beforescriptexecute', true, true);
}, true);

调度时间不是 100% 与原始的相同，但对于大多数情况来说已经足够了。这是(非模拟)事件的时间线:

beforeload             Before the network request is started
beforescriptexecute    Before a script executes
afterscriptexecute     After a script executes
onload                 After the script has executed

这是查看事件是否按预期工作的简单方法:

window.addEventListener('afterscriptexecute', function() {
    alert(window.x);
});
document.head.appendChild(document.createElement('script')).src = 'data:,x=1';
document.head.appendChild(document.createElement('script')).src = 'data:,x=2';

该演示可以在 http://jsfiddle.net/sDaZt/ 上观看。