StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your code is not working because it violates the default <a href="https://developer.chrome.com/extensions/contentSecurityPolicy.html">Content Security Policy</a>. I've created a screencast of one minute to show what's wrong:</p> <p><a href="https://i.stack.imgur.com/s8Wxd.gif" title="1 minute screencast to show what's wrong"><img src="https://i.stack.imgur.com/s8Wxd.gif" alt="screencast" title="1 minute screencast to show what's wrong"></a></p> <p>First, I've shown how to debug the problem. Right-click on your popup button, and click on <a href="https://developer.chrome.com/extensions/tut_debugging.html#inspect-popup">"Inspect popup"</a>. After doing that, you will see the following error message:</p> <blockquote> <p>Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".</p> </blockquote> <p>This explains that your code is not working, because it violates the default CSP: <a href="https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution">Inline JavaScript will not be executed</a>. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.</p> <p>The result is shown below:</p> <h3><code>hello.html</code> (popup page)</h3> <pre class="lang-html prettyprint-override"><code><!DOCTYPE html> <html> <head> </head> <body> <p id="demo">=a</p> <button type="button" <b>id="do-count"</b>>Count</button> <b><script src="popup.js"></script></b> </body> </html> </code></pre> <h3><code>popup.js</code></h3> <pre class="lang-js prettyprint-override"><code>var a=0; function <b>count</b>() { a++; document.getElementById('demo').<b>textContent</b> = a; } <b>document.getElementById('do-count').onclick = count;</b></code></pre> <p>Note that I've replaced <code>innerHTML</code> with <code>textContent</code>. Learn to use <code>textContent</code> instead of <code>innerHTML</code> when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload