1

I am creating a chrome-extension that when the user clicks a button on a page it launches a new HTML page. Inside the HTML page I have some inline script, but when I try to execute it the following error is being displayed:

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

This is my HTML page:

 <!DOCTYPE html>
 <html>   
 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
  <head> 
    <script> function closeWindow(){ alert( a has been updated ) ;  window.close();}
    </script> 
    <style> 
      #leadinformation { text-align: left; font: 12px; position :absolute; padding:20px 20px 20px 20px;} 
      button { position: relative; top: 30%;  font-family: Arial;font-weight: bold; font-size: 13px; color: #ffffff; padding: 5px 5px 5px 5px;background-image: webkit-linear-gradient(top, #287bbc 0%,#23639a 100%);background-color: #287bbc; border-width: 1px; border-style: solid; border-radius: 3px 3px 3px 3px; boder-color: #1b5480; width: 160px; height: 35px;} 
      #titleParagraph {font-weight:bold; font-size:20px;} 
    </style>  
  </head> 
   <body> 


    <form> 
     <div id="leadinformation"> 
      <p id="titleParagraph">You are about to create a new Lead:</p> 
        First Name.....   <input type="text" id="firstname" value= window.openerfirstname >   <br> 
        Last Name.....   <input type="text" id="lastname" value= lastname >   <br> 
        Title:...............   <input type="text" id="position" value= positions[0] >   <br> 
        Company:......   <input type="text" id="company" value= companies[0] >   <br> 
        Email:............   <input type="text" id="email" value= email >   <br> 
        Phone:...........   <input type="text"  id="phonenumber" value= phonenumber >   <br>  <br> 
      <div> 

        <button id="Accept" onClick=closeWindow() >Accept</button> 
        <button id="Close" onClick=closeWindow() >Close</button> 
       </form> 
     </div> 
    </body> 
   </html>

And this is in my content.js file:

var url = chrome.extension.getURL("window-child.html");
myWindow =window.open(url,"_blank", "width=400,height=300,0,status=0");
 myWindow.addEventListener('load', function(){
myWindow.document.getElementById('Accept').onclick=addToLeads;
myWindow.document.getElementById('Close').onclick=Close;
});

And in my manifest:

 "permissions": [
    "tabs", "<all_urls>","storage" , "alarms", "*://*/window-child.html?"

I have the following issues:

1) The error that I showcased above that won't let me execute inline scripts inside the HTML page

2) I want to call the functions Accept() Close(), which are located in the content.js but triggered in the HTML page when the buttons are pressed

3) I want to use the input values that the user enters in the HTML page inside the content script( can this be done with local storage?)

Any help would be highly appreciated! Thanks!

Marc Zaharescu
  • 569
  • 8
  • 30
  • if you have click handlers in js file then why do you use inline handlers? – Jai Nov 20 '15 at 10:06
  • @Jai, Marc Zaharescu, do you know Chrome extension architecture? Those are different contexts. – wOxxOm Nov 20 '15 at 10:08
  • Well I am not completely sure about all the functionality that I want to HTML page will be executed 1st then the click handlers from the js file will be triggered – Marc Zaharescu Nov 20 '15 at 10:09
  • @wOxxOm then how should I proceed? – Marc Zaharescu Nov 20 '15 at 10:10
  • 1
    They won't be triggered, you'll need cross-origin messaging via `postMessage`, google it. And as for the error, why can't you simply do what it asks? – wOxxOm Nov 20 '15 at 10:10
  • Well I tried to add in the meta from the HTML page but still doesnt work – Marc Zaharescu Nov 20 '15 at 10:23
  • What exactly doesn't work? Is there an error displayed? Also as I said you will need to use cross-origin messaging. Or maybe https://developer.chrome.com/extensions/messaging#external-webpage – wOxxOm Nov 20 '15 at 13:46
  • I think I agree with Jai. What's wrong with `myWindow.document.getElementById('Accept').addEventListener("click",addToLeads);`? – Teepeemm Nov 20 '15 at 14:51
  • I managed to fix the first error. The issue was wit the inline script. I added a separate js script file and it works fine for now. But I can't figure out a clean way of sending the input values back to content script. I think ajax post methods don't look too clean. I just basically want to call a function in content script with the updated parameters – Marc Zaharescu Nov 20 '15 at 15:42
  • I would recommend a new question. – Teepeemm Nov 20 '15 at 20:48

0 Answers0