Question

我已经使用内容脚本将两个.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');

两次脚本注入均成功。现在＆＃39; a.js＆＃39;有一个名为FuncA（）{}的函数。现在，当我试图从b.js调用FuncA（）时，我收到了以下错误。

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

Answer 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事件作为脚本标记，您可以确切地知道它何时完成执行。

Answer 2

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

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

注入脚本中的Chrome扩展调用功能

2 个答案: