Chrome Extension: Why Isn't It Working?

Question

I'm trying to get the current URL of the tab in chrome and then initiate a request to a site and get content back and write it to document body. Here's my 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();
});

But this throws: Error in response to tabs.query: TypeError: undefined is not a function ... bla bla

What I'm doing wrong? What is the best approach?

EDIT:

Here's 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"
  ]
}

The best approach is to think, look at _"bla bla"_ and see what exactly is throwing this error. At a glance, I don't think `this` is what you this is. — Xan, Oct 13 '14 at 15:03
Here it is: `Error in response to tabs.query: TypeError: undefined is not a function at Object.engine.run (chrome-extension://nleccpfdokiokcgnlfomgajdfcpclkja/popup.js:6:14) at HTMLDocument. (chrome-extension://nleccpfdokiokcgnlfomgajdfcpclkja/popup.js:29:10) ` — Mehul, Oct 13 '14 at 15:06
Would it not be down to the fact, your Function is actually not assigned? e.g. Function MyFunc() instead of Function() — Paulie, Oct 13 '14 at 15:07
Never ever use `document.write` in a callback... The document's DOM will completely be replaced if you do that. — Rob W, Oct 13 '14 at 20:33

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

"TypeError: undefined is not a function" means that you're trying to call something that has the value undefined as if it was a function.

In your case, you call this.connect(urlfinal), but this is not what you expect it to be (not engine).

You are inside a callback, not your run function anymore, and this has no property connect. Therefore, this.connect == undefined. In these circumstances, calling this.connect() throws that error.

To solve this, you can, for instance, store the top level this object, and let closures take care of the rest:

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

See more information on this technique here.

edited May 23 '17 at 11:49

Community

1
1

answered Oct 13 '14 at 15:16

Xan

66,873
13
150
174

Unfortunately, it returns url variable as undefined. I've set my permissions as well in manifest. Question updated. – Mehul Oct 13 '14 at 15:22
That would be a different question. I would first to `encodeURIComponent(url)` though. – Xan Oct 13 '14 at 15:30
Could you help? I'm screwed with this @Xan – Mehul Oct 13 '14 at 15:30
No actually it is returning tabs[0].url as undefined. – Mehul Oct 13 '14 at 15:31
Try `currentWindow: true` instead of passing an explicit constant. Also, did you properly reload the extension after the manifest change? – Xan Oct 13 '14 at 15:35
are you calling tabs from background script or content script? – Zig Mandel Oct 13 '14 at 16:50

Chrome Extension: Why Isn't It Working?

1 Answers1