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

时间:2015-06-18 04:25:32

标签: google-chrome-extension requirejs typescript

我正在尝试使用TypeScript构建Chrome扩展程序 设置非常简单:

{ "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; } }

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

编译时,生成的JavaScript以:

开头
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");

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");
});

编译时,生成的JavaScript如下所示:

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

我在与我的问题相关的所有其他问题中找到了这一点。

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

Function FindDocPerson(person As String, document As String) As Variant
    Const MatchExact As Integer = 0
    Dim ws As Excel.Worksheet
    Set ws = ActiveWorkbook.Worksheets("Sheet1")

    Dim table As Excel.Range
    Set table = ws.UsedRange

    Dim docRange As Excel.Range
    Set docRange = table.Columns(1).Offset(1, 0).Resize(table.Columns(1).Rows.Count - 1)

    Dim personRange As Excel.Range
    Set personRange = table.Rows(1).Offset(0, 1).Resize(1, table.Columns.Count - 1)

    Dim personIndex As Long
    Dim docIndex As Long

    On Error GoTo errHandler

    personIndex = Application.WorksheetFunction.Match(person, personRange, MatchExact) + 1
    docIndex = Application.WorksheetFunction.Match(document, docRange, MatchExact) + 1
    FindDocPerson = table.Cells(docIndex, personIndex).Value2
    Exit Function

errHandler:
    FindDocPerson = VBA.CVErr(Excel.xlErrNA)
End Function

我读过那些文档,我在SO上发了很多类似的问题 但我还没有发现任何对我有用的东西。
大多数问题具体涉及JavaScript,
也许TypeScript方面缺少一些东西?

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

1 个答案:

答案 0 :(得分:2)

错误消息状态的文档:

  

请务必通过RequireJS API加载调用define()的所有脚本。不要在HTML中手动编写脚本标记以加载其中包含define()个调用的脚本。

this question中所述,似乎如果在类型脚本中使用import,则在使用AMD编译时它将变为模块。因此,通过将"scripts/contentscript.js"包含为内容脚本,您将尝试在不使用RequireJS API的情况下加载模块脚本。您可以尝试从清单中的contentscript.js条目中删除content_scripts,并将以下内容添加到main.js

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