Question

让我总结一下情况;

我正在对Chrome扩展程序进行编码，该扩展程序在某些网站上进行搜索，获取结果，然后打开带有表格的新选项卡，然后将合并后的结果放入该表格中。到目前为止一直很好，但我有一个问题。

搜索和抓取是可以的。我使用Handlebars Template Engine来填充表格。我有一个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>

我将sandbox.html带入了我的eventpage.html的iframe。在我的event.js中，我将获取的结果发送到这个iframe;

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

然后我打开一个新标签页，在我的扩展程序中显示我的本地页面：tab.html。我使用getUrl所以它的url就像chrome-extension：//nonsenseletters/tab.html。现在我想向tab.html注入一个内容脚本，以便我可以将iframe中的HTML发送到tab.html的内容脚本。内容脚本会将此HTML附加到tab.html的正文中。

我无法将内容脚本注入具有chrome-extension：//种类的URL的内容。它说我必须将这个主机添加到清单文件的权限中，但即使我硬编码地添加了URL本身也没有任何变化。

Answer 1

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

模拟"run_at": "document_start" manifest.json键：

<html>
    <head>
        <script src="xyz.js"></script>
    </head>

模拟"run_at": "document_end" manifest.json键：

   <body>
        ..................
        ..................
        ..................
        <script src="xyz.js"></script>
    </body>
</html>

松散地模拟"run_at": "document_idle" manifest.json键：

<html>
    <head>
        <script async src="xyz.js"></script>
    </head>

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

1 个答案: