Chrome Extension Creation - Extension Works When Hosted Locally But Not When Published To Web Store

Question

Code:

function showpanel() {     
    var video = document.getElementsByClassName("jw-video")[0].src;
    console.log(video);
    window.open(video, '_blank');
}

setTimeout(showpanel, 1000);

Description:
This question is more about wondering why this is happening rather than trying to fix it.

The point of the extension is, I made it from my brother because he wanted to download videos from 123movies.is without downloading viruses. I originally was gonna make it through my web portfolio site but I then noticed it would be much easier to do it with an extension.

When I host the files locally on my personal pc everything runs fine. when the movie page loads, it opens up a new tab with the src of the video tag where I can simply press the download button. But when I published the extension files to the google chrome web store, any time I load up the movie page I get these two errors:

Uncaught TypeError: Cannot read property 'src' of undefined at showpanel (chrome-extension://pefemfiejenbjbbbilkiejfnpcjpeoaf/content.js:2)

Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

Whats causing these errors to only happen if the extension is published to the web store?

Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. — Makyen, Jul 13 '17 at 16:46
See: [Is there a JavaScript/jQuery DOM change listener?](https://stackoverflow.com/q/2844565) — Makyen, Jul 13 '17 at 17:00

score 0 · Accepted Answer · answered Jul 12 '17 at 09:15

It's hard to know what exactly is causing this problem without seeing the whole project.

However, there are a few things I would do. 1) Run your code in the console of one of the target pages. 2) Try loading the extension to the chrome web store with a simple console log statement that operates only on the sites you are trying to target. Then you know if the problem is the code or the extension manifest. The manifest is usually the hardest part for extension beginners to get right. 3) If that works, and the code is identical to the code in the extension, then you're looking at why it is that

document.getElementsByClassName("jw-video")[0]

is undefined when you run it from the webstore. Firstly I would tie the function to an event

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  showpanel();
});

rather than setting it to run on a timer. Then I would inject the script at document_start not document_end. Any undefined message like this in an extension is likely to be something relating to the injection of the content script in your manifest, most likely the timing of the injection or the permissions matching the website's protocol.

Chrome Extension Creation - Extension Works When Hosted Locally But Not When Published To Web Store

1 Answers1