I want to detect the button event in the page,I inject my script.js strong text file from background.html, when button is click,I want to alert some message than let button do his work. so I have two question,

1.I try to use jquery in my srcript.js but its seem not work,i have include jquery file in background.html, how can i use jquery in .js file?

2.how to detect button event when it be click?

below is my code:

background.html

<script src=".7.2/jquery.min.js" type="text/javascript"></script>

<script>
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,{file:'script.js',allFrames:true});
  });
</script>

script.js

if( self.frameElement && self.frameElement.tagName == "IFRAME" ){
  $(":button").bind("click",function(){
    alert("iframe button");
  });
}
else{
  $(":button").bind("click",function(){
    alert("parent button");
  });
}

I want to detect the button event in the page,I inject my script.js strong text file from background.html, when button is click,I want to alert some message than let button do his work. so I have two question,

1.I try to use jquery in my srcript.js but its seem not work,i have include jquery file in background.html, how can i use jquery in .js file?

2.how to detect button event when it be click?

below is my code:

background.html

<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,{file:'script.js',allFrames:true});
  });
</script>

script.js

if( self.frameElement && self.frameElement.tagName == "IFRAME" ){
  $(":button").bind("click",function(){
    alert("iframe button");
  });
}
else{
  $(":button").bind("click",function(){
    alert("parent button");
  });
}

• javascript
• jquery
• google-chrome-extension

Share Improve this question Follow edited May 11, 2012 at 8:10 Apple Wang asked May 8, 2012 at 1:37 Apple WangApple Wang 24511 gold badge66 silver badges1212 bronze badges 5

• $(":button") looks wrong. Should be something like $("button.myClassName") or $("#myButtonId"). – Beetroot-Beetroot Commented May 8, 2012 at 2:08
• thanks Beetroot, i'm try this two method, but still not work, is there other wrong in my code? – Apple Wang Commented May 8, 2012 at 3:12
• I have to admit, I have no experience of writing chrome extensions. You did modify my suggestions with a real classname / real id didn't you? – Beetroot-Beetroot Commented May 8, 2012 at 4:16
• Yes I did. I use my classname and my id, but it's does not work. I had try juzerali's method, and it's work!! Thanks Beetroot-Beetroot to help !! I appreciate it!! – Apple Wang Commented May 9, 2012 at 12:38
• juzerali's answer shows he clearly has the right knowledge. – Beetroot-Beetroot Commented May 9, 2012 at 21:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

As to why jQuery in your script is not working, that is because you have included jQuery in your background page, you need to load it into the user's page's extension's world. To make it clear. Your script.js is supposed to be loaded in user's page. Chrome will load into the page but in an isolated world which is your extension's world on that page. You have to load jQuery on that page just like your script.js. As below:

<script>
    chrome.browserAction.onClicked.addListener(function(tab) {
        chrome.tabs.executeScript(null,{file:'jQuery.js',allFrames:true});
        chrome.tabs.executeScript(null,{file:'script.js',allFrames:true});
    });
</script>

As to your other question regarding listening to button clicks, its unclear from your question which button are you speaking of. Is it the browser action button? If that is the case your code will work just fine. If it is a button on user's DOM, you will have to add script as described above that listens to the click event and informs your extension (background.html), your background page in turn will load the script.