Allow me to give you an overview of the current situation;
I am in the process of developing a Chrome extension that conducts searches on specific websites, retrieves the results, and then opens a new tab containing a table where all the results are displayed combined. Everything seems to be going smoothly so far, but now I've encountered a problem.
The searching and fetching part is working fine. To populate the table, I utilize the Handlebars Template Engine. I have a file called sandbox.html;
<head>
<link rel="stylesheet" type="text/css" href="tablecss.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jqc-1.11.3,dt-1.10.9/datatables.min.css">
</head>
<body>
<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<script src = "https://cdn.datatables.net/r/dt/jqc-1.11.3,dt-1.10.9/datatables.min.js"></script>
<script src="jquery-1.11.3.js"></script>
<h1>Result Table</h1>
<script id="some-template" type="text/x-handlebars-template"> <table id="mytable">
<thead>
<th>Code</th>
<th>Name</th>
<th>Producer Code</th>
<th>Unit</th>
<th>Brand</th>
<th>Price</th>
</thead>
<tbody>
{{#parts}}
<tr>
<td>{{code}}</td>
<td>{{name}}</td>
<td>{{producer_code}}</td>
<td>{{amount}}</td>
<td>{{brand}}</td>
<td>{{price}}</td>
</tr>
{{/parts}}
</tbody>
</table>
</script>
<script>
var templates = [];
var source = $("#some-template").html();
templates['hello'] = Handlebars.compile(source);
window.addEventListener('message', function(event) {
var command = event.data.command;
var name = event.data.name || 'hello';
switch(command) {
case 'render':
event.source.postMessage({
name: name,
html: templates[name](event.data.context)
}, event.origin);
break;
// You could imagine additional functionality. For instance:
//
// case 'new':
// templates[event.data.name] = Handlebars.compile(event.data.source);
// event.source.postMessage({name: name, success: true}, event.origin);
// break;
}
});
</script>
To display the data from sandbox.html, I embed it within an iframe on my eventpage.html. From my event.js file, I send the fetched results to this iframe as follows;
function send_results (big_data){
var iframe = document.getElementById('theFrame');
var message = {
command: 'render',
context: {parts: big_data}
};
iframe.contentWindow.postMessage(message, '*');
//big_data_array = [];
// Tab opened.
}
Next, I open a new tab using my local page within the extension: tab.html. Since the URL appears as chrome-extension://nonsenseletters/tab.html, I aim to inject a content script into tab.html to transfer the HTML from the iframe to the content script of tab.html for appending to its body.
However, injecting a content script into URLs that start with chrome-extension:// seems to be problematic. Even after trying to manually add the URL to the manifest file's permissions, nothing changes.