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

Question

我总结一下情况；

我正在编写一个 Chrome 扩展程序，它可以在某些网站上进行搜索，获取结果，然后使用 table 打开一个新选项卡，然后将合并的结果放入 table.到目前为止一切顺利，但我遇到了问题。

搜索和抓取没问题。我使用 Handlebars 模板引擎来填充 table。我有一个 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 注入一个内容脚本，这样我就可以将 HTML 从 iframe 发送到 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>

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

How to Inject Content Script to Local Page

javascript

iframe

google-chrome-extension

content-script