title: Chrome Extensions: Passing message by button from popup.html to event page
body: <p>I would like to open a new tab from within my popup.html by clicking a button contained in popup.html.</p>
  
  <p>My approach is to send a message from popup.html to the eventPage.js which will then open the new tab when the message is received.</p>
  
  <p>This however is not working. Please see the code below:</p>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style=''&gt;
      &lt;head&gt;
          &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body style="width:400px;"&gt;
          &lt;div id="content"&gt;
              &lt;div id="openTab"&gt;&lt;button type="button" id="btnOpenTab" name="btnOpenTab" onclick="sendMessage()"&gt;Open New Tab&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>eventPage.js</strong></p>
  
  <pre><code>chrome.extension.onMessage.addListener(
      function(request, sender, sendResponse)
      { 
          if (request.action == "openNewTab")
              chrome.tabs.create({ url: request.url });
      }
  );
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>function sendMessage()
                  {
                      chrome.extension.sendMessage({
                          action: "openNewTab",
                          url: "www.google.com"
                      });
                  }
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "name": "Open new tab",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Opens new tab",
  
    "background": {
      "scripts": ["eventPage.js"],
      "persistent": false
    },
  
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": ["tabs", "&lt;all_urls&gt;"]
  }
  </code></pre>
  
  <p>EDIT: Found an error message in console with this message:</p>
  
  <p>Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.</p>