Scripts defined in content scripts but not accessible in popup (Chrome extension)

Question

I'm new in javascript and chrome extensions (this is first application). Extension get a QRcode of the open page's URL. For QRcode generation I use this lib: https://github.com/jeromeetienne/jquery-qrcode I read some quides and many answers on SO, but extension doesn't work. All *.js libraries are in the root catalog with manifest.json

manifest.json

{
"manifest_version": 2,

"name": "QRify",
"description": "This extension shows a QR code of the open page",
"version": "1.0",

"content_scripts": [
    {
        "matches": ["http://www.google.com/*"],
        "js": [
            "jquery.min.js",
            "jquery.qrcode.js",
            "jquery.qrcode.min.js",
            "qrcode.js"
            ]
    }
],  
"browser_action":{
    "default_icon": "icon.png",
    "default_popup": "popup.html"
}
}

popup.html

<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>

<script src="popup.js"></script>

</body>
</html>

popup.js

var pathname = window.location.pathname;
    jQuery('#URLqrcodeCanvas').qrcode({
    text    : pathname
});

Most likely I forgot something...

Side Note: Do not include both jquery.qrcode.min.js and jquery.qrcode.js. Just include any one of them. — Sachin Jain, Mar 15 '14 at 12:55
There is no such element with id `URLqrcodeCanvas` in your popup.html. Is that a typo or a mistake ? — Sachin Jain, Mar 15 '14 at 12:55
There are a couple of other things wrong too, you include jQuery and qrcode in the content script but they try to use them in the popup where you don't include them. `window.location.pathname` is going to be for the popup when I think you mean for it to be of the tab. — abraham, Mar 15 '14 at 14:59

score 2 · Accepted Answer · edited May 23 '17 at 12:21

There are few things which are wrong in your code. Let's take them step by step

Inclusion of both jquery.qrcode.js and jquery.qrcode.min.js : In production code, we try to use minified jquery because downloading of minified js files is faster.
No element with selector used in popup.js : You are trying to access URLqrcodeCanvas in your popup.js while no such element is present in popup.html. May be you should add this
You have not included jquery and qrcode in your popup.html : You need to understand the context of content script, popup scripts and background scripts. Read this

SO Answer: Difference between popup script, background and content script
Wrong use of window.location.pathname : May be you wanted to access the path of current active tab instead of popup. Once you understand the difference between popup and content script then you will be easily figure out this point. Read this

SO Answer: How to get url of active tab ?

Thanks to @Abraham for adding points 3 and 4 in this answer. Hope it helps!!

Scripts defined in content scripts but not accessible in popup (Chrome extension)

1 Answers1