javascript - 从 Chrome 扩展动态注入(inject) JS 时，从 onload() 内部调用方法？

Question

This fantastic answer展示如何从 Chrome 扩展程序动态地将 JavaScript 插入到页面中:

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

当调用onload()函数时，它是在浏览器页面的隔离世界中执行的，而不是在扩展程序的隔离世界中执行，对吧？

假设这是正确的，我遇到了一个我不明白的问题。

在我的 script.js 中，我有与此类似的代码:

var globalObj = globalObj || {};
globalObj.method = function () {
    console.log('hey!');
};

然后我将上面的onload()函数更改为:

s.onload = function() {
    this.parentNode.removeChild(this);

    globalObj.method();
};

但控制台显示错误:

Uncaught ReferenceError: globalObj is not defined

为什么 globalObj 没有在 onload() 函数内部定义？

Answer 1

onload 在内容脚本上下文中执行，而不是在页面上下文中执行。

要在页面上下文和脚本上下文之间进行通信，可以使用多种方法；例如，自定义 DOM 事件将实现您所需要的:

// Content script
s.onload = function() {
  this.parentNode.removeChild(this);
  var event = new CustomEvent("invokeMethod");
};

// script.js
window.addEventListener("invokeMethod", function(evt) {
  globalObj.method();
}, false);