Javascript 如何将内容脚本注入本地页面_Javascript_Iframe_Google Chrome Extension_Content Script

Javascript 如何将内容脚本注入本地页面

javascript iframe google-chrome-extension

Javascript 如何将内容脚本注入本地页面,javascript,iframe,google-chrome-extension,content-script,Javascript,Iframe,Google Chrome Extension,Content Script,让我总结一下情况我正在编写一个Chrome扩展，它在一些网站上进行搜索，获取结果，然后打开一个带有表格的新选项卡，然后将合并的结果放入该表格中。到目前为止还不错，但我有个问题搜索和获取是可以的。我使用车把模板引擎来填充表格。我有一个sandbox.html <head> <link rel="stylesheet" type="text/css" href="tablecss.css"> <link rel="stylesheet" type="

让我总结一下情况

我正在编写一个Chrome扩展，它在一些网站上进行搜索，获取结果，然后打开一个带有表格的新选项卡，然后将合并的结果放入该表格中。到目前为止还不错，但我有个问题

搜索和获取是可以的。我使用车把模板引擎来填充表格。我有一个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>Sonuç Tablo</h1>
<script id="some-template" type="text/x-handlebars-template"> <table id="mytable">
    <thead>
    <th>Kod</th>
    <th>İsim</th>
    <th>Üretici Kod</th>
    <th>Birim</th>
    <th>Marka</th>
    <th>Fiyat</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>

然后我打开一个新选项卡，扩展名为tab.html，其中包含我的本地页面。我使用getUrl，所以它的url类似于chrome-extension://nonsenseletters/tab.html. 现在，我想向tab.html注入一个内容脚本，以便将html从iframe发送到tab.html的内容脚本。内容脚本将把这个HTML附加到tab.HTML的主体中

我无法将内容脚本注入到具有chrome extension://排序URL的内容中。它说我必须将此主机添加到清单文件的权限中，但即使我硬编码添加URL本身，也没有任何更改。

您可以完全控制扩展包中的文件，因此只需手动引用html中的内容脚本：

模拟

“run\u at”：“document\u start”

manifest.json键：

模拟

“run\u at”：“document\u end”

manifest.json键：


..................
..................
..................

松散地模拟
```
“run\u at”：“document\u idle”
```
manifest.json键：

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.
    }