0

I am spending a lot of time on this so I thought I would ask the stack overflow community. I have a chrome extension project with html file:

// Run our kitten generation script as soon as the document's DOM is ready.
document.addEventListener("DOMContentLoaded",
    function() {
    });

$(function() {
    $("#slider-range-min")
        .slider({
            range: "min",
            value: 37,
            min: 1,
            max: 700,
            slide: function(event, ui) {
                $("#amount").val("$" + ui.value);
            }
        });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));
});
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range with fixed minimum</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="popup.js"></script>
    <script src="extras.js" type="text/javascript"></script>
</head>
<body>

<p>
    <label for="amount">Maximum price:</label>
    <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;">
</p>

<div id="slider-range-min"></div>


</body>
</html>

When I run it alone, it works beautifully. However, when I run it attached to the action button for my app in chrome, none of the features show up. I am confused why. I have not included any inline javascript and the example comes straight from the jquery website. Any help on the matter will be of great help!

woofwoof
  • 317
  • 2
  • 12
  • 2
    Possible duplicate of [Simple jQuery within – Makyen Jan 03 '17 at 21:01
  • Related, but does not discuss loading scripts from external sources: [The Chrome extension popup is not working, click events are not handled](//stackoverflow.com/q/17601615) – Makyen Jan 03 '17 at 21:03
  • 1
    You should be viewing the console for your popup. It would have informed you that you were violating the [restrictions of the default Content Security Policy](https://developer.chrome.com/extensions/contentSecurityPolicy#restrictions). Chrome has [various consoles for your extension](http://stackoverflow.com/a/38920982/3773011). You need to be looking for errors/output in all the appropriate consoles. – Makyen Jan 03 '17 at 21:10
  • JS code is executed before the content is loaded. Therefore the `#slider-range-min` is not yet available. Move the `popup.js` script to before closing body tag. – Pawel Uchida-Psztyc Jan 06 '17 at 13:37

0 Answers0