Tab query failure in extension

[wickedDesigns]

I've attempted to follow the directions, but I get this error in the extension when I start up a video on the site:

Error handling response: TypeError: Cannot read property 'id' of undefined

Context: devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@94f915a8d7c408b09cc7352161ad592299f384d2/&can_dock=true&dockSide=undocked

Stack Trace: plugin.js:8 (anonymous function)

It looks like for some reason, the tab running the video isn't showing up as both active and audible. I'm not sure how best to debug further.

[kprantis]

I am also experiencing this issue. Also, of note, I am seeing no output on the server after the "Downloading to: .." message. Is that expected?

[shogerr]

Thanks @kprantis and @wickedDesigns for the report. The tab query is very weak:

chrome.tabs.query({active:true, audible: true}, function(tab) {

and so the basic requirements are the tab is active, and it is playing audio. I was looking at that query today and it needs to be improved.

Here's the first big question, can you take a screenshot of the views you are using? I tend to use the episode list, and have no problems. I've also tracked two classes out of 200+ downloaded that have a bug. Playlist item #11966 is not picked up by the extension. So there are extreme edge cases.

Here is what typical output should look like after clicking a class:

saw: Machine Embroidery With Knits - 03 - Embroidering T-Shirts & Onesies
grabbing: Machine Embroidery With Knits - 03 - Embroidering T-Shirts & Onesies
Starting download: Machine Embroidery With Knits - 03 - Embroidering T-Shirts & Onesies

and then go on to report the download complete.

There are a couple of ways to troubleshoot chrome extensions, and they all are painful. With @wickedDesigns report, it's for sure the conent.js code failing. Let me go back and make sure I'm not using some old code, but the way I troubleshoot this problem is to have the content.js send to the websocket server just hardcoded values. Then get those working, and build off of that. So like, what I would do to troubleshoot that is replace the sendResponse object being sent to something like:

    sendResponse({
      series: "test",
      episode: "this"
      track: 1,
      resources: {}
      debug: {}
    });

and the comment out everything but the sendResponse. This way, none of the code can fail in content.js.

There is one way to get output from the extension, and it goes like this:

1. Open developer tools;
2. Detach the developer tools;
3. Press ctrl+shift+j and open up a second developer tools panel for the developer tools panel..

It's very silly.

One process I go through to get the chrome extension working is to:

1. close developer tools;
2. refresh the page;
3. open developer tools.

[kprantis]

So you will have to bear with me. While I am comfortable with programming, I have not done much javascript/nodejs/web work. :)

Here is a screenshot of the page I am on:

Closing devtools, refreshing the page, and re-opening makes no difference.

If I open a devtools of a devtools it doesn't seem to do much more than share the same error the chrome extentions page was telling me:

Definitely no output at all on my server after the "Downloading to" message.

I tried to do it where I was very behaved and left the tab in focus and can see with the speaker on the tab that it is registering the tab is playing audio, but no dice.

ETA: I also tried it with multiple classes, so not likely just that random edge case.

[shogerr]

Cool, thanks. Hmm, so I wonder if @wickedDesigns also is on a Mac. That could be the common thread here. I would try that tactic of replacing the code in content.js with some hardcoded values, and comment out all the other code. If the chrome extensions is generally working, values should come through to the server. Then we can chip away at which call is breaking this.

[kprantis]

Do you mean like this?

I did the above change, reloaded the plugin, closed devtools, refreshed page, reopened devtools on network tab, and hit play, and it made no difference, and there is still no server output...

Is there a way to easily test if there could be some sort of firewall or some such issue making the server unaccessible?

[wickedDesigns]

I'm away from home and my desktop right now, so I can't test anything out, but I'm using Windows 10 there, so that's not the issue. I'm wondering if there might be a delay between when the request goes out and when the video actually starts playing (and thus the audible property becoming true).

[kprantis]

I wonder if the 'id' error is a red herring. When I change the sendResponse I no longer get that error, or any errors regarding the plugin, but I still get no output in the node server output.

ETA: I did try creating a web socket to localhost:8888 straight from the console, and that was able to send a request (and crash the node server, heh), so that should at least confirm communication is possible and not something funny in my laptop config so that localhost:8888 isn't accessible even or something like that....

[adammenges]

FWIW we're seeing the issue on Ubuntu, too.

[shogerr]

I wonder if the 'id' error is a red herring. When I change the sendResponse I no longer get that error, or any errors regarding the plugin, but I still get no output in the node server output.

There should be some basic validation on the response before using the values... so that's a big ol' TODO. So yes, could easily be a red herring. I remember seeing this problem when code failed in content.js, but it may happen at other times.

@kprantis yep. Exactly like that. And your websocket test helps us tackle if its a firewall type issue in your case. Thanks.

What's Next The extension code (content.js) probably needs some try catch blocks or promises, and some error checking on the other end.

Turns out, content.js can log to the top level console just fine, so look for the output from any logging there.

Video Here's a quick capture of the extension and server in use. It also shows what happens if you start the server when the developer tools have previously been open, and a websocket connection was present before the connection was interrupted.

https://drive.google.com/file/d/17IeBPtsBthNPZQUkLthNXXgd2OVnH_3o/view?usp=sharing

[shogerr]

With committ fa0bbbc, a toggle for verbose output has been added. It is only a very basic setup to turn on and off verbosity for logging that will be added in future commits. Right now only tab information is logged when in debug mode. Here's the relevant tab info:

The debug mode can be enabled by right clicking the bluprntr icon and selecting 'Debug mode'. I've also added a basic check to the tab to at least avoid the extension running into an uncaught error. Hopefully this gets things setup to be worked a little easier.

Here is a helpful link on extension debugging: https://developer.chrome.com/extensions/tut_debugging

[shogerr]

I've pushed quite a big change today 9820bdf. Please pull the new code if you were having problems before. The debug mode will be added later. It may have caused some slowdown, maybe not. But, I did take time to clean up the output for the program and add a little test server.

Start the test server with

yarn test-server

Here's a screenshot of the new server output.

[shogerr]

I believe I've cleaned up some of the bigger problems with the way the extension was performing. In order to close this issue the following changes have been made to the project as of commit 94decfc:

• removed the audible filter from the tab query;
• increased server logging clarity and verbosity;
• added debug mode to the chrome extension that logs to the developer tools console.

If you encounter problems related to tab queries, please don't hesitate to open a new issue.