CODEWITHSUNDEEP
jqueryhtmlgoogle-chromegoogle-chrome-extension
erp
erp

Reputation: 3024

Tabs in chrome browser action

I am working on an extension where in the browser action popup I want to have two tabs for selection. I read that you need to have a separate js file for any kind of js you want to do which I did. When i run the html page regularly (not inside of the extension) my js works fine and everything functions accordingly, but not in the extension popup. Here is the top part ofmy html file where i link the external js file

  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  <link rel="stylesheet" type="text/css" href="tab.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="tab.js"></script>
  <style>
    body {
      min-width: 250px;
      overflow-x: hidden;
    }
  </style>

And here is the js file (that again works fine while not inside of the browser action)

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
        jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

I have never really dealt with extensions before so I am not sure if this kind of js/jquery is even allowed inside of the browser action popups. Thanks in advance

EDIT This is not a problem with CSP afaik. I have no "refused to load scripts" etc..

Upvotes: 1

Views: 191

Answers (1)

Fran&#231;ois Beaufort
Fran&#231;ois Beaufort

Reputation: 5659

I'm not sure but it looks like you may have an issue with your Content Security Policy. See https://developer.chrome.com/extensions/contentSecurityPolicy#resourceLoading

Script and object resources can only be loaded from the extension's package, not from the web at large. This ensures that your extension only executes the code you've specifically approved, preventing an active network attacker from maliciously redirecting your request for a resource.

Instead of writing code that depends on jQuery (or any other library) loading from an external CDN, consider including the specific version of jQuery in your extension package.

Upvotes: 1

Related Questions