Chrome 扩展内容脚本中不匹配的匿名 define()

Question

我正在尝试使用 TypeScript 构建 Chrome 扩展。
设置非常简单：

在manifest.json

{   
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "tabs",
        "storage",
        "http://*/",
        "https://*/*"
    ],

    "content_scripts": [
     {
        "matches": [ "http://*/*", "https://*/*" ],
        "js": [ "scripts/require.js", "scripts/require-cs.js",
                "scripts/main.js", "scripts/contentscript.js" ],
        "run_at": "document_end",
        "all_frames": true
     }],
}

在model.ts中：

export class WebPage
{
    private id: number;
    private processed: boolean;

    get Id() { return this.id; }
    set Id(value: number) { this.id = value };

    get Processed() { return this.processed; }
    set Processed(value: boolean) { this.processed = value };

    constructor(id: number)
    {
        this.id = id;
        this.processed = false;
    }
}

编译后的 JavaScript 开头为：

define(["require", "exports"], function (require, exports) {
    var WebPage = (function () 
    {
           //Code omitted to keep the SO question short
    }});

在main.ts中：

(function ()
{
    console.log("Executing main.js");

    requirejs.config(
        {
            baseUrl: "scripts", paths: { "model" : "model" }
        });
})();

在contentscript.ts中：

import model = require("model");

console.log("Processing page");
var page = new model.WebPage(1);
page.Processed = true;
console.log("Done processing page");

编译后的结果 JavaScript 如下所示：

define(["require", "exports", "model"], function (require, exports, model) {
    console.log("Processing page");
    var page = new model.WebPage(1);
    page.Processed = true;
    console.log("Done processing page");
});

最后在 require-cs.js:

console.log("Executing requirejs-cs.js");

require.load = function (context, moduleName, url) {

    console.log("require.load called");
    var xhr = new XMLHttpRequest();

    xhr.open("GET", chrome.extension.getURL(url) + '?r=' + (new Date()).getTime(), true);

    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log("evaluating" + url)
            eval(xhr.responseText);
            context.completeLoad(moduleName);
        }
    };
    xhr.send(null);
};

这是我在与我的问题相关的所有其他问题中发现的内容。

加载页面时，所有这些都会导致以下输出：

Uncaught Error: Mismatched anonymous define() module: function (require, exports, model) {
    console.log("Processing page");
    var page = new model.WebPage(1);
    page.Processed = true;
    console.log("Done processing page");
}
http://requirejs.org/docs/errors.html#mismatch

我已经阅读了那些文档，我在 SO 上经历了很多类似的问题，
但我还没有找到适合我的东西。
大多数问题具体涉及 JavaScript，
也许在 TypeScript 方面缺少某些东西？

注意：TypeScript 编译器配置为使用 AMD。

Answer 1

错误消息状态的文档：

Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

如所述，好像在类型脚本中使用import，使用AMD编译时会变成模块。因此，通过包含 "scripts/contentscript.js" 作为内容脚本，您试图在不使用 RequireJS API 的情况下加载模块脚本。您可以尝试从清单中的 content_scripts 条目中删除 contentscript.js 并将以下内容添加到 main.js:

requirejs(["contentscript"], function() {});

Chrome 扩展内容脚本中不匹配的匿名 define()

Mismatched anonymous define() in Chrome extension content script

google-chrome-extension

requirejs

typescript