CODEWITHSUNDEEP
jqueryjsongoogle-chrome-extension
user3023289
user3023289

Reputation: 1

JQuery in Chrome Extensions

So... I was trying to make a extension, you just click on the button, up pops Bing,(because Google doesn't let you embed their website)and you got a little, quick browser. But the problem is, once you go to a website, it's to small. So I thought, no problem, I'll just use a little jquery magic. But, jquery won't work. I tested it as a webpage and it works just fine, but not as an extension. So what's up? I think it might be something with the manifest.json

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="popup.js"></script>
    <link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
    <iframe id="iframe" width:"500px" height="500px" src="http://m.bing.com/"></iframe>
    <div class="zoom" id="bigger" >+</div>
    <div class="zoom" id="smaller">-</div>
</body>
</html>

JQuery:

(function(){
    ('#bigger').click(function(){
        $('iframe').css({
            "width": "+=50px",
            "height": "+=50px"
        });
    });
});

manifest.json

{
  "manifest_version": 2,

  "name": "Test App",
  "description": "Should open up Bing.",
  "version": "1.0",

  "permissions": [
    "http://m.bing.com/"
  ],
  "browser_action": {
    "default_icon": "tri-16.png",
    "default_popup": "window.html"
  }
}

And I just got this together, so, ignore the terrible styling, I'll make it look cool later.

Upvotes: 0

Views: 76

Answers (2)

rsanchez
rsanchez

Reputation: 14657

Popup pages use the chrome-extension: schema, so starting a URL with // will not do what you expect.

The easiest way to use jQuery is to bundle the files with your extension, instead of trying to use them from a CDN. Performance will also be better, as they will be local files.

Upvotes: 1

Scorpion-Prince
Scorpion-Prince

Reputation: 3634

You might want to try by correcting the following line

('#bigger').click(function(){

To

$('#bigger').click(function(){

Upvotes: 0

Related Questions