在 JavaScript 模块中，如何从外部文件加载 class？

Question

我正在编写一个 Chrome 扩展程序，并试图将功能隔离开来。 我希望功能页面从另一个文件实例化 class。 有人能告诉我我哪里错了吗？

错误信息：

VM792:4 Uncaught ReferenceError: ExternalClass is not defined
    at processThatPage (<anonymous>:4:5)
    at <anonymous>:5:3

class 文件（lib/externalclass.js）：

/* jshint esversion: 8 */
/* global console */

export class ExternalClass {
    constructor() {
        console.log("constructing the external class");
    }
}

试图导入 class (lib/processpage.js) 的文件：

/* jshint esversion: 8 */
/* global console */

import { ExternalClass } from "./externalclass.js";

export function processThatPage() {
    let dltracker;
    console.log("Trying to make external class");
    dltracker = new ExternalClass();
}

入口点：automata.js

/* jshint esversion: 8 */
/* global console */
/* global chrome */

import { processThatPage } from "./lib/processpage.js";

chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.onUpdated.addListener( pageLoadCheck);
});

async function pageLoadCheck(tabId, changeInfo, tab) {
    if (changeInfo.status === 'complete' && tab.url.startsWith("https://www.target.net/path"))
    {
        chrome.scripting.executeScript(
        {
            target: { tabId: tab.id },
            func: processThatPage,
            world: "MAIN"
        });
    }
}

为了完整起见，清单 (manifest.json)：

{
  "name": "My Automator",
  "description": "What I'm trying to accomplish",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "automata.js",
    "type": "module"
  },
  "permissions": ["storage", "tabs", "scripting", "downloads", "alarms"],
  "host_permissions": ["http://*.target.net/*", "https://*.target.net/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "options_page": "options.html"
}

我希望这是一个简单的。 谢谢！

Answer 1

executeScript 本身并不运行 function，它只是获取function 的文本，将其发送到 web 页面，然后根据该文本创建一个新的Function并运行它。

这意味着注入的 function 无法访问其父 scope 中的外部函数/类/变量。

解决方案：

1. 包括 function 中的所有内容；

2. 首先为依赖项调用 executeScript，但请注意，这不适用于模块脚本，因此您要公开的内容必须是全局的，或者它可以是这样的 IIFE：

    (() = { function globalFoo() {...... } function bar() {...... } Object.assign(window, {globalFoo}); })();