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);

从Chrome扩展中动态注入JS时，从onload（）内部调用方法？

1 个答案: