title: Chrome extension: managing multiple html pages in an extension
body: <p>I want to have several html files in my extension so I can open each of them according to some conditions or events. Say I want a.html to be opened when the user chooses an option on the context menu.</p>
  
  <p>I tried the following:</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
  "name":  "My extension",
  "version": "1.1",
  "background": { "page": ["background.html"] },
  "incognito": "split",
  "permissions": ["tabs", "&lt;all_urls&gt;", "contextMenus"],
  "icons": { "16": "images/16.png" },
  "manifest_version": 2
  }
  </code></pre>
  
  <p>background.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="background.js"&gt;&lt;/script&gt;
      &lt;script src='someWindow.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>background.js:</p>
  
  <pre><code>var winID;
  chrome.contextMenus.onClicked.addListener(function proccess_interested(info, tab){
  
      chrome.tabs.create({active: false}, function(newTab) {
  
      // After the tab has been created, open a window to inject the tab into it.
      chrome.windows.create(
          {
              tabId:      newTab.id,
              type:       "popup",
              url:        chrome.extension.getURL('a.html'),
              focused: true
          },function(window){
                   winID = newWindow.id;
            });
      });
  })
  
  chrome.extension.onMessage.addListener(function(Msg, sender, sendResponse) {
  
  if(Msg.close_comment_win){
      chrome.windows.remove(winID, function(){});
  }
  });
  </code></pre>
  
  <p>someWindow.js:</p>
  
  <pre><code>function hide_win()
  {
      chrome.extension.sendMessage({close_win: close}, function(response) {});
  }
  </code></pre>
  
  <p>a.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script src='someWindow.js'&gt;&lt;/script&gt;
  
  head     //with tags, can't show it here
  body
  &lt;input type='button' value=' Cancel ' onclick="hide_win()"&gt;&lt;/input&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The window is opened when context menu is clicked, but when hitting cancel, it's not closed. console.log says:  <code>Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".</code> I guess the reason is that a.html is not part of the extension, <strong>even though someWindow.js which triggers sendMessage is part of the extension</strong>.</p>
  
  <p>Including a.html in the extension through manifest isn't an option as no more than one background html page can be included.</p>
  
  <p>Of course I get the same when putting <code>chrome.windows.remove(winID, function(){});</code> directly in <code>hide_win()</code> without using sendMessage.</p>
  
  <p>Any ideas how to get this job done?</p>