0

I have struggled for some time trying to figure out why my code wont run in a Chrome Browser Action Extension. If I build it all as a single HTML page and run it in a test it works fine. When I try to put the HTML in the "popup.html" file and then add the jquery code to my popup.js (Which contains some javascript that already works) it will not work. Basic action is: When extension icon is clicked, user sees 2 buttons to "add Link" or "Add Doc" When clicked, each button toggles open/closed a different iframe. Button tooltip also displays on hover. I am a novice programmer and fear I am missing something easy. What am I doing wrong?

Here is popup.html file

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="popup.js"></script>
</head>

<body>

<h1>My Web Page</h1>

<p> click the button to get the current tab URL for cut/paste  <button id="myBtn"> Try it</button> </p>

<p id="demo">Url displays Here</p>

<button id= 'link'> Add Link </button> <button id='Doc'> Add Doc </button>

<div id="testdiv">
<iframe height="400" allowTransparency="true" frameborder="0" scrolling="yes" style="width:400;border:none"  src="https://wufoo.com"><a href="https://wufoo.com">Fill out my Wufoo form!</a></iframe> 
</div>

<div id="testdiv2">
<iframe height="400" allowTransparency="true" frameborder="0" scrolling="yes" style="width:400;border:none"  src="https://wufoo.com"><a href="https://wufoo.com"">Fill out my Wufoo form!</a></iframe>
</div>

</body>
</html>

Here is the popup.js file

//----Here is jquery script for button tooltip on hover-----

$('#link').mouseenter(function(){
    $('body').append("<div id='linkTooltip' style='position:fixed;'></div>");
    $('#linkTooltip').html("Add a Web Link to your Portal");
    $('#linkTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#link').mouseleave(function(){
    $('#linkTooltip').remove();
});


$('#Doc').mouseenter(function(){
    $('body').append("<div id='DocTooltip' style='position:fixed;'></div>");
    $('#DocTooltip').html("Add a Document or online link to a document");
    $('#DocTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#Doc').mouseleave(function(){
    $('#DocTooltip').remove();
});


 //--------Here is the jquery script to toggle the iframes when button clicked.

$(document).ready(function(){
 $("#testdiv").hide()
    $("#link").click(function(){
        $("#testdiv").toggle()
    });
});

$(document).ready(function(){
  $("#testdiv2").hide()
    $("#Doc").click(function(){
        $("#testdiv2").toggle() 
    });
});

Manifest file is:

"manifest_version": 2,

"name": "IT Vendorconnect Sample",
"description": "This extension launches Wufoo Form on current page",
"version": "1.0",

"icons": { "128": "ITVCicon128x128.png" },

 "browser_action": {
  "default_icon": "ITVCicon.png",
  "default_popup": "popup.html"
 },

 //---------------

  "content_scripts": [ {
  "js": [ "jquery.min.js", "popup.js" ],
  "matches": [ "http://*/*", "https://*/*"]
  }],

  //---------------

"permissions": [ "tabs", "activeTab"

] }

JoeR
  • 85
  • 1
  • 7
  • 2
    You can't link to the jquery cdn. You need to provide the source in your extension's folder and link to that. – Teepeemm Apr 14 '15 at 01:55
  • 1
    possible duplicate of [JQuery code on Chrome Extension doesnt work](http://stackoverflow.com/questions/28398550/jquery-code-on-chrome-extension-doesnt-work) – Teepeemm Apr 14 '15 at 02:03
  • I downloaded jquery-2.1.3.min.js and refer to that file in my HTML doc instead of the CDN. I have no reference to it in manifest file -not sure if I need to. When running extension get "Uncaught ReferenceError: $ is not defined" at first jquery line. – JoeR Apr 14 '15 at 19:04
  • Could you post your manifest? – Teepeemm Apr 14 '15 at 22:17
  • manifest posted above – JoeR Apr 15 '15 at 01:00
  • The manifest isn't allowed to have comments. Nothing here would require a content script, or the permissions you've specified. But I'm not seeing why jquery isn't defined. Are you sure you've reloaded your extension? – Teepeemm Apr 15 '15 at 01:25
  • Yah its been reloaded. I managed to just recode in javascipt instead of jquery to get the functionality I needed to continue testing my prototype but I'd still like to use jquery as I find it easier to understand. – JoeR Apr 15 '15 at 12:11
  • I'm able to get it to work; I'm not sure why you can't, sorry. One more thing: your mouseenter and mouseleave won't work as written, because they're added before the appropriate elements exist in the DOM. You'll need to add them as part of your document.ready. – Teepeemm Apr 16 '15 at 11:38

0 Answers0