Несоответствие анонимного define() в скрипте расширения расширения Chrome

Question

Я пытаюсь создать расширение Chrome с помощью TypeScript.
Установка довольно проста:

В 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 
    }], 
} 

В :

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

Документов для государства сообщения об ошибке:

Обязательно загрузить все сценарии, которые требуют define() через API RequireJS. Не загружайте скрипты сценариев HTML в HTML, чтобы загружать скрипты, в которых есть define().

Как описано в this question, кажется, что если вы используете import в типе сценария, он будет включен в модуль при компиляции с помощью AMD. Таким образом, включив "scripts/contentscript.js" в сценарий содержимого, вы пытаетесь загрузить скрипт модуля, не используя API требований. Вы можете попробовать удалить contentscript.js из content_scripts записи в манифесте и добавив следующие main.js:

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