0

我一直在尝试使用 TypeScript 编写一个 Firefox 网络扩展。由于这是一种奇怪的尝试，因此扩展非常简单；它应该是一个时钟。我有三个脚本和一个作为模块导出的类。我的问题是，当上下文发生变化时，我的类成员函数似乎并没有保持它们与对象的绑定（从而变得未定义）。通过单击指定页面调用脚本：[单击内容->背景->内容（resp）]。

/**
 * Holds basic system/browser time data
 */
export class Clock {
  private time : string;
  private hh : number;
  private mm : number;
  private ss : number;

  constructor(date : Date) {
    this.hh = date.getHours();
    this.mm = date.getMinutes();
    this.ss = date.getSeconds();
    this.time = this.setTime();

    this.getTime = this.getTime.bind(this);
    this.logTime = this.logTime.bind(this);
  }

  public setTime = (): string => {
    return `${this.hh}:${this.mm}`;
  }

  public clockStringify = () : string => {
    const timeData = {
      hh : this.hh,
      mm : this.mm,
      ss : this.ss,
      time: this.time
    };

    return JSON.stringify(timeData);
  }

  public logTime() : void {
    console.log(`${this.hh}:${this.mm}`)
  }

  public getTime() : string {
    return this.time;
  }
}

/*
 * This is from the content.ts script which runs on top of the web-page in FF
 */
function handleResponse(clock : Clock) {
  console.log("Content RESP handler >> ");
  console.log("Clock info dump >>");
  console.log(clock.clockStringify());
  clock.logTime();
  console.log(clock.getTime());
}

/*
 * This from my background.ts script which runs in the background-page of FF
 */
function handleMessage(request : any, sender : any, sendResponse : any) {
  let clock = new Clock(new Date());

  console.log("Background handler >> " + request);
  console.log("Clock info dump >>");
  console.log(clock.clockStringify());
  clock.logTime();
  console.log(clock.getTime());

  sendResponse(clock);
}

Clock.ts 的转译 JavaScript：

/**
 * Holds basic system/browser time data
 */
export class Clock {
    constructor(date) {
        this.setTime = () => {
            return `${this.hh}:${this.mm}`;
        };
        this.clockStringify = () => {
            const timeData = {
                hh: this.hh,
                mm: this.mm,
                ss: this.ss,
                time: this.time
            };
            return JSON.stringify(timeData);
        };
        this.hh = date.getHours();
        this.mm = date.getMinutes();
        this.ss = date.getSeconds();
        this.time = this.setTime();
        this.getTime = this.getTime.bind(this);
        this.logTime = this.logTime.bind(this);
    }
    logTime() {
        console.log(`${this.hh}:${this.mm}`);
    }
    getTime() {
        return this.time;
    }
}

background.ts 和 content.ts 的 JavaScript 几乎相同，因此省略。

我已经查看了所有内容，并得出了上面在 Clock.ts 中可以看到的解决方案。我不知道为什么他们的绑定不能正常工作。我在 Clock.ts 中使用了不同的出价方法来查看是否有区别，但没有。

我的FF输出是：

Webconsole context has changed
Background handler >> [object Object] background.js:6:13
Clock info dump >> background.js:7:13
{"hh":11,"mm":55,"ss":32,"time":"11:55"} background.js:8:13
11:55 Clock.js:26:17
11:55 background.js:10:13
...
Content script loaded >> content.js:1:9
Content RESP handler >> content.js:12:13
Clock info dump >> content.js:13:13
...
[extension-runners/index.js][debug] Reloading installed extensions on user request
[extension-runners/index.js][debug] Reloading all reloadable add-ons
[firefox/index.js][debug] Firefox stdout: 1586919326952 addons.xpi      WARN    Addon with ID ac86eefbc0a51ff2c5ab50e8b732e9c26c23dea6@temporary-addon already installed, older version will be disabled
[firefox/remote.js][debug] Received message from client: {"from":"root","type":"addonListChanged"}
Last extension reload: 11:55:27 GMT+0900 (Japan Standard Time)[firefox/remote.js][debug] 

[firefox/index.js][debug] Firefox stderr: JavaScript error: moz-extension://68316183-66b2-f244-be4a-a97929269985/js/content.js, line 14: TypeError: clock.clockStringify is not a function

我正在转换为"target": "ES2016"and "module": "es2015"。绑定中是否缺少一些概念？它们不是在浏览器的相同上下文中工作吗？

4

0 回答 0