CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension
user3327457
user3327457

Reputation:

Chrome extension - working when accessed as HTML file, but not as extension

I am making an extension for chrome, however this is my first time doing that and so I made a simple script to see if I was doing it correctly.

This script works fine when view as a regular page in the browser, but when it is loaded as a chrome extension it falls down completely. Could someone tell me what special thing has to be changed to allow this to work as an extension?

HTML:

<!doctype html>
<html>
    <head>
        <script src='lib/jquery-1.11.0.min.js'></script>
        <script src='lib/jquery.knob.js'></script>
        <script src='script.js'></script>
    </head>
    <body>
        <input type='text' value='0' class='dial' id='dis'>
        <input type='text' id='in' placeholder='Enter percent to change to'>
        <button onclick="change()">Change it!</button>
    </body>
</html>

Javascript:

$(function() {
    $("#dis").knob({
        'readOnly':true
    });
});
function change(){
    var num = document.getElementById('in').value;
    $('#dis').val(num).trigger('change');
};

Zip containing extension and source files.

Online working version (couldn't get it working on JsFiddle or JsBin)

Upvotes: 0

Views: 52

Answers (1)

Xan
Xan

Reputation: 77482

Please carefully read the documentation on Chrome's Content Security Policy.

Your problem is in using onclick attribute. It counts as inline code. You need to get rid of it.

HTML:

<button id="button">Change it!</button>

Script:

$(function() {
    $("#button").click(change);
    $("#dis").knob({
        'readOnly':true
    });
});

Upvotes: 1

Related Questions