0

I am wanting to make a simple chrome extension. It is very simple Javascript. Here is the Javascript:

function popup(){
   alert("Hello");

}

And here is the HTML:

<button onclick = "popup()">Click me!</button>

It is very embarrassing that this does not work. Here is the error I get:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-jl7zkecItBHATwzPa5aa7MfGZ7nKUEQQCaXwXyPlRI4='), or a nonce ('nonce-...') is required to enable inline execution.

Please help very frustrated.

Landon
  • 21
  • 5
  • The error is telling you that the site has a content security policy setup to disallow inline script statements. And it is also telling you how to fix it. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP – Taplar Jul 31 '20 at 18:11
  • Can you share your manifest? – mmason33 Jul 31 '20 at 18:11
  • { "name": "Ad be gone!", "version": "1.0", "description": "Blocks google ads", "permissions": ["webRequest", "webRequestBlocking", ""], "browser_action": { "default_icon": { "16": "favicon.ico" }, "default_popup": "popup.html", "default_title": "Ad be gone" }, "background": { "scripts": ["background.js"] }, "manifest_version": 2 } – Landon Jul 31 '20 at 18:13
  • Move all your Javascript code to an external file and do not use any inline code (which includes your `onclick = popup()` code) . See the [documentation](https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution) – Iván Nokonoko Jul 31 '20 at 18:25
  • How would I execute code with an onclick then? – Landon Jul 31 '20 at 18:39

1 Answers1

0

The error is being caused because the extension has a content security policy that prevents inline javascript. In order to solve this error, do the following:

HTML

<button id="btn">Click me!</button>

and add this to the bottom of your body tag inside of the same HTML file:

 <script src="test.js"></script>

JS (create another file called test.js)

document.addEventListener("DOMContentLoaded", function(event) {
    let chosenButton = document.getElementById('btn');
    chosenButton.addEventListener('click', function() {
    alert("Hello");
 })
});
Angelina Tsuboi
  • 134
  • 2
  • 9
  • Now it gives me this error: Uncaught TypeError: Cannot read property 'addEventListener' of null – Landon Jul 31 '20 at 21:02
  • @Landon I found out the problem! I edited my answer. You can try that instead :) – Angelina Tsuboi Jul 31 '20 at 21:12
  • Thank you it works! So can I just add any code here as well? – Landon Jul 31 '20 at 21:35
  • @Landon You can add any code that refers to the elements inside of the HTML file containing – Angelina Tsuboi Jul 31 '20 at 21:48
  • I am actually using this to make an ad blocking extension. Without functions I don't know how to make an on-off button for the ad blocker. Here is the code: chrome.webRequest.onBeforeRequest.addListener( function(details) { return {cancel: true}; }, { urls: ["*://*.doubleclick.net/*", "*://*.ads.google.com/*",] }, ["blocking"] ); I would mean alot if you could help – Landon Jul 31 '20 at 21:53
  • @Landon Sorry about that. You can also make functions and call them during a specific event. – Angelina Tsuboi Jul 31 '20 at 23:52