Chrome擴展程序：為什么不起作用？

Question

我試圖獲取chrome中選項卡的當前URL，然后向站點發起請求並獲取內容並將其寫入文檔主體。 這是我的chrome ext。 JS：

var engine = {

    run: function () {
        chrome.tabs.query({
            'active': true,
            'windowId': chrome.windows.WINDOW_ID_CURRENT
        }, function (tabs) {
            var url = tabs[0].url;
            var urlfinal = 'http://SOMESITEHERE.com/api.php?url=' + url;
            var response = this.connect(urlfinal);
            document.write(response);
        });
    },



    //console.log(this.url),

    connect: function (link) {
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", link, false);
        xmlHttp.send(null);
        return xmlHttp.responseText;
    }

};

document.addEventListener('DOMContentLoaded', function () {
    engine.run();
});

但這會拋出：響應tabs.query時出錯：TypeError：未定義不是函數... bla bla

我做錯了什么？ 最好的方法是什么？

編輯：

這是My Manifest.json：

{
  "manifest_version": 2,

  "name": "SOMETHINGHERE",
  "description": "SOMETHINGHERE",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://SITEHERE.com/",
    "tabs"
  ]
}

Answer 1

“ TypeError：未定義不是函數”表示您正在嘗試調用具有undefined值的東西，就好像它是一個函數一樣。

在你的情況，你叫this.connect(urlfinal)但是this是不是你希望它是（不是engine ）。

您位於回調內部，而不再是run函數 ，並且this沒有屬性connect 。 因此， this.connect == undefined 。 在這種情況下，調用this.connect()會引發該錯誤。

為了解決這個問題，例如，您可以存儲this對象的頂層，並讓閉包處理其余的對象：

run: function () {
    var _this = this;
    chrome.tabs.query({
        'active': true,
        'windowId': chrome.windows.WINDOW_ID_CURRENT
    }, function (tabs) {
        var url = tabs[0].url;
        var urlfinal = 'http://SOMESITEHERE.com/api.php?url=' + url;
        var response = _this.connect(urlfinal);
        document.write(response);
    });
}

在此處查看有關此技術的更多信息。