Detecting NoScript (not the tag, the extension)

Question 1

The method I have used is as follows.

<head>
<style>
  .noscript-error {
    background-image: url(noscript.php)
  }
</style>
<style>
  @import url(chrome://noscript/skin/browser.css);
</style>
</head>
<body>
  <div class="noscript-error">If noscript is NOT installed (and enabled) then Firefox will make a request for noscript.php.
  </div>
</body>

It's pretty self-explanatory. This can confirm if NoScript is not in use. You'll just need to do whatever you choose in noscript.php to set something in the session that says NoScript is disabled.

NOTE: In other browsers noscript.php will always be called, this isn't an issue becaue even if another browser is used and calls noscript.php, it won't be using NoScript as it is for Firefox only. You can do your own magic to avoid this call if you want, but worst edge-case where a user-agent is being spoofed you'll still have an accurate indicator of whether or not NoScript is being used. More info here

Also if you just want to know server-side whether or not JavaScript is enabled you can use

<noscript>
    <img src="noJS.php" alt="JavaScript is disabled" />
</noscript>

In noJS.php you can write a PHP script to render a single transparent pixel (PNG or GIF) and within that script set a session variable, or store the information.

Question 2

Use a <noscript> block in your HTML:

<noscript>
This site requires Javascript. Please enable Javascript in your browser for this site.
</noscript>

Question 3

You could build one page before your normal page with the following code:

<html>
    <head>
        <meta http-equiv="refresh" content="3; URL=http://www.yourpage.com?javascript=false">
        <script type="text/javascript">
            location.href = "http://www.yourpage.com?javascript=true";
        </script>
    </head>
    <body>
        <span>Please wait while the page is loading ...</span>
        <noscript>If nothing happens follow this <a href="http://www.yourpage.com?javascript=false">link</a>.</noscript>
    </body>
</html>

If the user has Javascript enabled he will immediately be forwarded to http://www.yourpage.com?javascript=true and you know he has javascript enabled.

If Javascript is disabled the user will be forwarded to http://www.yourpage.com?javascript=false after 3 seconds by the meta http-equiv="refresh" tag which works without Javascript.

As fallback there is a link for users who have Javascript and other forwarding methods disabled in their browser.

Now you have two seperated pages where you can allow the user to login and work with or without Javacsript.

Notes:

This is not specific for NoScript (it will work the same when Javascript is disabled by other means).
All users will have a delay when accessing your page.
Your URLs contain the javascript parameter which looks kind of ugly. You could use two different pages instead of one page with parameters to hide this.

Question 4

That's why NoScript have been made, to block any javascript code on sites. Alert works by js too, so you need some workaround to notify users. You can simply style a modal warning window without JS and remove it, if JS is enabled.

HTML

<div id="js-disabled-warning">
    <div class="message">
        <p>You're using this site with javascript disabled (set by manually or with a browser extension like NoScript)!</p>
        <p>Javascript is essential for using this site. Please enable it!</p>
        <p>Here you can get some help: <a href="http://www.enable-javascript.com" target="_blank">http://www.enable-javascript.com</a></p>
    </div>
</div>

<div class="site-content">
    <p>Here comes your site content!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti inventore velit sint aspernatur nemo quasi in officia doloribus dolores deserunt nostrum quas. Excepturi recusandae eum libero sint necessitatibus corporis id.</p>
</div>

CSS

#js-disabled-warning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0,0,0,.5);
}

#js-disabled-warning .message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: table;
    width: 30%;
    background: #bada55;
    padding: 20px;
    border-radius: 5px;
}

And JS to remove the message

(function() {
    var alert_modal = document.getElementById('js-disabled-warning');
    alert_modal.parentNode.removeChild(alert_modal);
})();

With the addon enabled, this script won't run and your message is shown.

Here's a fiddle for it: http://jsfiddle.net/X7q9F/

Question 5

Since the <noscript> content is only shown when JavaScript is disabled, you can't use an alert (since it's, well, JavaScript). If you need to call attention to the fact that the site requires JavaScript in order to operate properly, you're going to need some CSS.

One possibility is to stick a <link /> tag in the <noscript> that loads a CSS file containing rules to hide everything except the error message. An extremely simple example (which just uses an embedded <style> tag):

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="container"> 
            <noscript>
                <style>
                    .noscript { display:none; }
                </style>
                <div class="alert alert-danger">
                    <b>Sorry!</b> This site requires JavaScript. Please enable it in your browser.
                </div>
            </noscript>
            <div class="noscript">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id blandit lacus. Nulla tempus ornare arcu vel iaculis. Duis sit amet interdum enim, sed molestie massa. Proin in leo nunc. Nullam justo felis, consectetur sit amet sapien ut, feugiat tincidunt arcu. Ut dignissim, nisl ut placerat interdum, odio nibh euismod ipsum, nec placerat est est tempor erat. Curabitur in ligula sed enim eleifend fermentum. Duis sit amet adipiscing eros. Mauris lacinia ut tortor sed accumsan.
            </p>
            <p>
            Curabitur libero risus, sagittis sed urna ut, molestie fermentum enim. Donec fringilla pharetra neque sed ullamcorper. Phasellus ante lacus, rutrum eu ligula eu, mattis tempor metus. In tincidunt arcu non enim rutrum, at fringilla eros mattis. Nulla facilisi. Mauris eu elit id tellus ornare sollicitudin quis nec lacus. Curabitur aliquam porttitor enim, pretium vestibulum felis tristique id. Donec dictum congue turpis, sit amet dictum purus placerat quis.
            </p>
            <p>
            Curabitur quis nulla consequat, adipiscing quam eget, vulputate nulla. Pellentesque elit ante, sagittis vitae magna id, adipiscing aliquet purus. Phasellus eros tellus, eleifend sit amet tellus vel, porta ultrices elit. Vestibulum tincidunt, ligula in gravida mattis, nulla mi blandit nulla, hendrerit sodales erat mauris sit amet nulla. Morbi congue imperdiet mi, vitae vulputate neque euismod a. Pellentesque consectetur, diam vel feugiat elementum, arcu enim faucibus risus, ut tempor leo magna sit amet augue. Donec justo nisi, lacinia et risus at, dapibus ultrices risus. In consequat felis id lectus dictum ornare. Proin egestas tortor urna, sed vehicula sapien gravida vitae.
            </p>
            </div>
        </div>
    </body>
</html>

Question 6

As far as I know, it's impossible to detect the NoScript extension specifically. I assume you want to display customized messages to users who have NoScript and to users who simply have JavaScript disabled, but this is unfortunately not possible.

A good way to handle this is to display some kind of alert message in <noscript> tags saying something along the lines of "You must enable JavaScript to use this site."

People who have NoScript installed will know what that means and will disable it accordingly.

Question 7

NoScript will block all JavaScript. So simply hide the warning message with JS and if it's still present, NoScript is enabled (or JS generally disabled).

<html>
    <head>
        <title>test</test>
    </head>
    <body>
        <div id="noscript">Warning! You have disabled JS or you're using NoScript which will break this site! Please active JS or deactivate NoScript to continue.</div>
        <div id="content">
            ...
        </div>
        <script type="text/javascript">
            document.getElementById('noscript').style.display = 'none';
        </script>
    </body>
</html>

User without NoScript enters your page -> the JS is executed and the message is hidden.
User with NoScript enters your page -> the JS is not executed and the message won't be hidden.

Question 8

NOTE: I have installed the Firefox NoScript extension to test this solution and it does work properly.

Noscript is primarily a security plugin so detecting or overriding Noscript is not an option.

Since you have no Javascript in that scenario you will need to rely on the static HTML/CSS to inform the user then use javascript to remove the notification.

<html>
<head>
  <title>noscript detect</title>
</head>

<body>
  <div id="noJavascript">
    Your browser does not have javascript enabled. This site
    requires javascript to operate properly. Please enable
    javascript.
  </div>
  <script type="text/javascript">
   var noJavascript = document.getElementById("noJavascript");
   noJavascript.parentNode.removeChild(noJavascript);
  </script>
</body>
</html>