来自注入脚本的 Chrome 扩展调用函数答案

【问题标题】：Chrome Extension Call Function from Injected Script来自注入脚本的 Chrome 扩展调用函数
【发布时间】：2016-05-27 21:36:58
【问题描述】：

我已经使用内容脚本将两个 .js 文件（例如 a.js 和 b.js ）注入到网页中，使用此处提到的技术：

Access window variable from Content Script

function injectScript(file, node) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', file);
    th.appendChild(s);
}
injectScript( chrome.extension.getURL('/js/my_file.js'), 'body');

两个脚本注入都成功。现在 'a.js' 有一个名为 FuncA(){} 的函数。现在，当我尝试从 b.js 调用 FuncA() 时，出现以下错误。

b.js:6 Uncaught ReferenceError: FuncA is not defined

【问题讨论】：

如果您已验证脚本注入正确，它应该可以工作。该错误可能是由“a.js”中的某些问题引起的。你介意发布它的内容吗？
你是对的。请看答案。

标签： google-chrome google-chrome-extension

【解决方案1】：

一个正确的处理方式是依赖回调，而不是任意超时。

function injectScript(file, node, callback) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', file);
    if (typeof callback == "function") {
      s.onload = function() { callback(); };
    }
    th.appendChild(s);
}

injectScript( chrome.extension.getURL('/js/a.js'), 'body', function() {
  injectScript( chrome.extension.getURL('/js/b.js'), 'body');
});

使用任意选择的 500 毫秒延迟，您可能会面临等待时间过长或在某些极端情况下等待时间不够长的风险。通过依赖脚本标签的onload 事件，您可以准确地知道它何时完成执行。

【讨论】：

【解决方案2】：

问题已解决。我注入的第一个脚本非常大。所以不知何故注入没有完成，我正在调用该函数。因此我增加了一些延迟。

injectScript( chrome.extension.getURL('/js/a.js'), 'body');
setTimeout(function(){
    injectScript( chrome.extension.getURL('/js/b.js'), 'body');
}, 500);

【讨论】：