javascript - 如何从注入(inject)的脚本中调用函数？

Question

这是来 self 的 contentScript.js 的代码:

function loadScript(script_url)
  {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= chrome.extension.getURL('mySuperScript.js');
      head.appendChild(script);
      someFunctionFromMySuperScript(request.widgetFrame);// ReferenceError: someFunctionFromMySuperScript is not defined
  }

但是我在从注入(inject)的脚本中调用函数时遇到错误:

ReferenceError: someFunctionFromMySuperScript 未定义

有没有一种方法可以在不修改 mySuperScript.js 的情况下调用这个函数？

Answer 1

您的代码存在多个问题:

1. 如您所见，注入(inject)脚本 (mySuperScript.js) 中的函数和变量对内容脚本 (contentScript.js) 不直接可见。那是因为两个脚本运行在不同的execution environments .
2. 插入 <script>带有通过 src 引用的脚本的元素属性不会立即导致脚本执行。因此，即使脚本在同一环境中运行，您仍然无法访问它。

要解决这个问题，首先要考虑是否真的有必要运行mySuperScript.js在页面中。如果您不从页面本身访问任何 JavaScript 对象，则不需要注入(inject)脚本。您应该尽量减少页面本身运行的代码量以避免冲突。

如果您不必运行页面中的代码，则运行 mySuperScript.js之前contentScript.js , 然后任何函数和变量都立即可用(像往常一样， via the manifest 或 programmatic injection )。如果由于某种原因脚本确实需要动态加载，那么您可以在 web_accessible_resources 中声明它。并使用 fetch 或 XMLHttpRequest 加载脚本，然后 eval 在您的内容脚本的上下文中运行它。

例如:

function loadScript(scriptUrl, callback) {
    var scriptUrl = chrome.runtime.getURL(scriptUrl);
    fetch(scriptUrl).then(function(response) {
        return response.text();
    }).then(function(responseText) {
        // Optional: Set sourceURL so that the debugger can correctly
        // map the source code back to the original script URL.
        responseText += '\n//# sourceURL=' + scriptUrl;
        // eval is normally frowned upon, but we are executing static
        // extension scripts, so that is safe.
        window.eval(responseText);
        callback();
    });
}

// Usage:
loadScript('mySuperScript.js', function() {
    someFunctionFromMySuperScript();
});

如果你真的必须从脚本中调用页面中的函数(即 mySuperScript.js 必须绝对在页面的上下文中运行)，那么你可以注入(inject)另一个脚本(通过 Building a Chrome Extension - Inject code in a page using a Content script 中的任何技术)然后将消息传递回内容脚本(例如 using custom events )。

例如:

var script = document.createElement('script');
script.src = chrome.runtime.getURL('mySuperScript.js');
// We have to use .onload to wait until the script has loaded and executed.
script.onload = function() {
    this.remove(); // Clean-up previous script tag
    var s = document.createElement('script');
    s.addEventListener('my-event-todo-rename', function(e) {
        // TODO: Do something with e.detail
        // (= result of someFunctionFromMySuperScript() in page)
        console.log('Potentially untrusted result: ', e.detail);
        // ^ Untrusted because anything in the page can spoof the event.
    });
    s.textContent = `(function() {
        var currentScript = document.currentScript;
        var result = someFunctionFromMySuperScript();
        currentScript.dispatchEvent(new CustomEvent('my-event-todo-rename', {
            detail: result,
        }));
    })()`;

    // Inject to run above script in the page.
    (document.head || document.documentElement).appendChild(s);
    // Because we use .textContent, the script is synchronously executed.
    // So now we can safely remove the script (to clean up).
    s.remove();
};
(document.head || document.documentElement).appendChild(script);

(在上面的示例中，我使用的是 template literals，它在 Chrome 41+ 中受支持)