当从Chrome扩展动态注入JS时，从onload(）内部调用方法

Calling a method from inside onload() when dynamically injecting JS from Chrome extension?

本文关键字：onload 内部 方法 调用 扩展 Chrome 动态 注入 JS 当从      更新时间：2023-09-26

这个奇妙的答案展示了如何从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()函数内部定义？

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);
相关文章：