I'm building a Google Chrome extension that displays a page's open graph settings in a popup.html window when someone clicks the extension's icon, but am having difficulty getting the open graph settings to appear in the popup window.
While some of my code functions - I can append an image at the top of the body section, and send an alert message - the pop up window remains empty. The console error message I receive is:
Uncaught ReferenceError: jQuery is not defined background.js:1
My code is pasted below. I've spent the past four hours trying to figure this out, looking at numerous other SO issues like: Loading jQuery into chrome-extension jQuery not working in chrome extension popup How to load jQuery in Google Chrome Extensions How to use jQuery in chrome extension?
If you are able to help by pointing out what I am overlooking, I'd appreciate it. Thank you!
Manifest.json
{
"name": "OG v4",
"manifest_version": 2,
"version": "1.0",
"description": "see open graph more easily",
"icons":{"128":"iconbig.png"},
//"background": "popup.html",
"browser_action": {
"name": "OG",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>",
"http://*/",
"https://*/",
"file:///*/*",
"https://*.google.com/"
],
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",
"content_scripts": [ {
"js": [ "jquery-2.1.4.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
Popup.html
<!doctype html>
<html>
<head>
<title>Background Page</title>
<style>
#tidy, #tidy img {
width:300px;
/* max-width:300px; */
min-height: 100px;
}
#ogImageHere{
width:100%;
}
</style>
</head>
<body>
<div id="tidy">
<div id="ogSiteNameHere"></div>
<div id="ogTypeHere"></div>
<div id="ogURLHere"></div>
<div id="ogImageHere" width=100%></div>
<div id="ogTitleHere"></div>
<div id="ogDescriptionHere"></div>
<div id="ogImageHere"></div>
<div id="ogImageSecureURLHere"></div>
<div id="ogTypeHere"></div>
<div id="ogWidthHere"></div>
<div id="ogHeightHere"></div>
<div id="printHere"></div>
</div>
<script src='background.js'></script>
</body>
</html>
Background.js
var ogSiteName=jQuery("meta[property='og:site_name']").attr("content");
jQuery("#ogSiteNameHere").html('<p>Here is the site name: '+ogSiteName+'</p>');
var ogType=jQuery("meta[property='og:type']").attr("content");
jQuery("#ogTypeHere").html('<p>Here is the type: '+ogType+'</p>');
var ogURL=jQuery("meta[property='og:url']").attr("content");
jQuery("#ogURLHere").html('<p>Here is the URL: '+ogURL+'</p>');
var ogImage=jQuery("meta[property='og:image']").attr("content");
jQuery("#ogImageHere").html('<img src='+ogImage+' />').css("width","100%");
var ogTitle=jQuery("meta[property='og:title']").attr("content");
jQuery("#ogTitleHere").html('<p>Here is the title: '+ogTitle+'</p>');
var ogDescription=jQuery("meta[property='og:description']").attr("content");
jQuery("#ogDescriptionHere").html('<p>Here is the description: '+ogDescription+' </p>');
var ogImage=jQuery("meta[property='og:image']").attr("content");
jQuery("#ogImageHere").html('<p>Here is the image</p> <p><img src='+ogImage+' /></p>');
var ogImageSecureURL=jQuery("meta[property='image:secure_url']").attr("content");
jQuery("#ogImageSecureURLHere").html('<p>Here is the image secure URL:'+ogImageSecureURL+' </p> <p><img src='+ogImageSecureURL+' /></p>');
var ogImageType=jQuery("meta[property='og:image:type']").attr("content");
jQuery("#ogImageTypeHere").html('<p>Here is the image</p> <p>'+ogImageType+'</p>');
var ogImageWidth=jQuery("meta[property='og:image:width']").attr("content");
jQuery("#ogImageWidthHere").html('<p>Here is the image width '+ogImageWidth+' </p>');
var ogImageHeight=jQuery("meta[property='og:image:height']").attr("content");
jQuery("#ogImageHeightHere").html('<p>Here is the image height: '+ogImageHeight+'px.</p>');
//THIS ALERT WORKS
alert('it partly works!');
//THIS PREPENDED IMAGE WORKS
jQuery("body").prepend('<img src="http://www.catgifpage.com/ui/images/grumpy.png">');
popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('commentsbutton').addEventListener('click', addOGInfo);
});
