title: Chrome Extension development error : Resources must be listed in the web_accessible_resources
body: <p>I am new to writing chrome extension. 
  I am trying to open an ejs template inside my injected content script, but I get <strong>below error</strong> in content_script.js when I do new EJS({})</p>
  
  <p>"Denying load of chrome-extension://eadcfllkpeiejpedposonemnmmpnggie/content.html.ejs. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension."</p>
  
  <p><em>Note:</em> I have added the resource in the web_accessible_resource</p>
  
  <p>Manifest.json</p>
  
  <pre><code>    {
      "name"              : "test",
      "description"       : " app",
      "version"           : "1.0",
      "manifest_version"  : 2,
      "browser_action"    :{
                              "default_icon"   : "images/icon.png"
                          },
      "permissions"       : ["tabs","notifications","contextMenus","background","http://*/*","https://*/*","&lt;all_urls&gt;"],
      "options_page"      : "views/options.html",
      "icons"             : {"16"         : "images/icon-16.png"//Icon context menu},
      "background"        : {
                              "page"          : "views/background.html",
                              "js"            : ["scripts/jquery-1.10.2.min.js"]
      },
      "web_accessible_resources": ["views/content.html.ejs"]
  }
  </code></pre>
  
  <p><strong>Background.js</strong> </p>
  
  <pre><code>    'use strict';
  
  document.addEventListener("DOMContentLoaded", function(tab){
      chrome.contextMenus.create({
          title : "Add as reminder",
          id    : "rappelSelection",
          contexts: ["selection"],
          onclick: function(info,tab){addContent(info,tab)}
      })
  });
  
  
  function addContent(info, tab){
      var details = {};
      details.text = info.selectionText;
      chrome.tabs.executeScript(tab.id, {
          file : "scripts/jquery-1.10.2.min.js"
      });
  
      chrome.tabs.executeScript(tab.id, {
          file : "scripts/ejs_min.js"
      });
  
      chrome.tabs.executeScript(tab.id, {
          file : "scripts/content_script.js"
      });
  
      chrome.tabs.getSelected(null,function(tab){
          chrome.tabs.sendRequest(tab.id, {details: details}, function(response){
              console.log(response);
          });
      });
  }
  </code></pre>
  
  <p><strong>content_script</strong></p>
  
  <pre><code>chrome.extension.onRequest.addListener(function newContent(request, sender, sendResponse){
          var template_path = chrome.extension.getURL('content.html.ejs');
          var data = {content: request.details.text };
          var template = new EJS({url:template_path}).render(data);
          $("body").append(template);
          sendResponse({contentText: "goodbye"}); 
      });
  </code></pre>