CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extension
Binary111
Binary111

Reputation: 159

Why won't this javascript load in my chrome extension?

The following opensource GitHub project allows you to create amazing progress bars, but although it loads in a webpage it won't in the chrome extension I'm developing. Here is the source code:

https://github.com/kimmobrunfeldt/progressbar.js/blob/master/dist/progressbar.min.js

Is there something I need to add to the "manifest.json" or something I can do to resolve this?

Here is an example, it works in a webpage but not in a chrome extension.

Thanks in advance for the help!

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value);
    }

    bar.text.style.color = state.color;
  }
});

bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0
#container {
  margin: 20px;
  width: 200px;
  height: 100px;
}
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/02a322d7/dist/progressbar.min.js"></script>

<div id="container"></div>

Upvotes: 1

Views: 88

Answers (2)

Jeffrey
Jeffrey

Reputation: 1271

Just to summarize this issue: Google, in attempts to help developers maintain secure extensions, has implemented a strict content security policy. By default, the security policy is extremely strict, as it works to prevent your code from running malicious code. It restricts the extension in three major ways:

  1. Eval() and related functions are disabled.
  2. Inline JavaScript will not be executed.
  3. Only local script and object resources will be loaded.

In this case, #3 is the cause of your issue. It exists to prevent developers from including scripts from third-parties that may be modified to provide malicious code without the developer's knowledge. This can be circumvented by modifying the content_security_policy in your manifest.json to include the domain of the desired script. For example,

"content_security_policy": "script-src 'self' 'https://your-code.com/'; object-src 'self'"

More on Chrome's content security policy can be found here.

Upvotes: 1

Binary111
Binary111

Reputation: 159

In order to use external js files in your extension, you need to add the simplified domain to your "manifest.json" file.

For example the URL: https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/02a322d7/dist/progressbar.min.js

Simplifies to: https://cdn.rawgit.com/

Now add this to your manifest.json:

{
  ...

  "content_security_policy": "script-src 'self' https://cdn.rawgit.com/; object-src 'self'",

  ...
}

and if you already have a "content security policy" just add the simplified domain next to your other domains separated by a space like this:

{
  ...

  "content_security_policy": "script-src 'self' https://cdn.rawgit.com/ https://firebase.com https://www.gstatic.com/; object-src 'self'",

  ...
}

Hope this helps!

Upvotes: 1

Related Questions