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

Question

Let me summarize the situation; 让我总结一下情况；

I am coding a Chrome extension that makes searches on some websites, fetches the results and then opens a new tab with a table, then puts the combined results into that table. 我正在编写一个Chrome扩展程序，该扩展程序可以在某些网站上进行搜索，获取结果，然后打开一个带有表的新标签，然后将合并的结果放入该表中。 So far so good but I have a problem. 到目前为止很好，但是我有一个问题。

Searching and fetching is okay. 搜索和获取都可以。 I use Handlebars Template Engine to fill the table. 我使用把手模板引擎填充表格。 I have a sandbox.html; 我有一个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>

I take that sandbox.html into an iframe of my eventpage.html. 我将该sandbox.html放入eventpage.html的iframe中。 Inside my event.js I send the fetched results to this iframe like this; 在我的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.
    }

Then I open a new tab, with my local page in my extension: tab.html. 然后，我打开一个新标签页，在扩展名为tab.html的地方添加本地页面。 I use getUrl so it's url is like chrome-extension://nonsenseletters/tab.html. 我使用getUrl，所以它的网址就像chrome-extension：//nonsenseletters/tab.html。 Now I want to inject a content script to tab.html so I can send the HTML from iframe to the tab.html's content script. 现在，我想向tab.html中注入内容脚本，以便可以将iframe中的HTML发送到tab.html的内容脚本中。 Content script will append this HTML to tab.html's body. 内容脚本会将此HTML附加到tab.html的正文中。

I can't inject a content script to things that has chrome-extension:// sort of URL. 我无法将内容脚本插入具有chrome-extension：//这样的URL的内容。 It says I must add this host to the manifest file's permissons but nothing changes even I hardcodedly add the URL itself. 它说我必须将此主机添加到清单文件的权限，但是即使我硬编码添加URL本身也没有任何改变。

Answer 1

You have complete control over the files in your extension package so just manually reference the content script in the html: 您可以完全控制扩展包中的文件，因此只需手动引用html中的内容脚本即可：

simulating "run_at": "document_start" manifest.json key: 模拟"run_at": "document_start" manifest.json键：
```
 <html> <head> <script src="xyz.js"></script> </head> 
```

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

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

loosely simulating "run_at": "document_idle" manifest.json key: 大致模拟"run_at": "document_idle" manifest.json键：
```
 <html> <head> <script async src="xyz.js"></script> </head> 
```

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-10-16 16:40:08

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-10-16 16:40:08

解决方案1
3 已采纳 2015-10-16 16:40:08