Chrome 扩展：如何将 HTML 附加到新创建的 chrome 选项卡？答案

【问题标题】：Chrome extension: How to append HTML to a newly created chrome tab?Chrome 扩展：如何将 HTML 附加到新创建的 chrome 选项卡？
【发布时间】：2016-03-19 01:01:53
【问题描述】：

我正在尝试从后台脚本background.js 打开一个新选项卡，并让这个新选项卡显示我在后台脚本中获得的一些文本。我正在使用chrome.tabs.create({ url: "template.html" }); 使用template.html 文件创建新选项卡，这只是一个空白的HTML 模板：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Testing</title>
    </head>
    <body>
    </body>
</html>

在background.js 中，我有一个名为text 的变量，其中包含要添加到新标签页的文本，但我不知道如何附加它。

我认为它可能适用于在新标签页上执行脚本以附加文本，但是当我尝试使用 chrome.tabs.executeScript(tab.id, {file: 'template.js'}); 在 template.html 上运行我的脚本 template.js 时，我收到以下错误：

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "chrome-extension://*/template.html". Extension manifest must request permission to access this host.

因为新标签的 URL chrome-extensions://*/template.html 是扩展程序无法访问的。

我不确定如何将文本或 HTML 附加到标签页。对此的任何帮助表示赞赏。谢谢。

【问题讨论】：

错误地告诉你你的 manifest.json 中没有正确的权限设置你检查了吗？
是的，我在manifest.json 中将*://*/* 和<all_urls> 添加到permissions，但它仍然给我同样的错误。
你也有开头的“标签”吗？如果您还没有developer.chrome.com/extensions/content_scripts，请查看此页面
我愿意，我拥有以下权限：background、tabs、activeTab、http://*/*、https://*/*、*://*/*、<all_urls>。我试图找到问题的权限有点矫枉过正，但它仍然无法正常工作。

标签： javascript html google-chrome google-chrome-extension content-script

【解决方案1】：

您不能在chrome-extension: 页面上使用chrome.tabs.executeScript。唯一有效的方案是httphttpsfileftp。

无论如何，你不需要。您可以简单地将要运行的文件包含在带有脚本标记的 html 中。只需将以下内容添加到 template.html：

<script src="template.js"></script>

请注意，在此类扩展页面中，您可以访问完整的 chrome.* API，因此您可以使用消息传递在此页面和后台页面之间进行通信。

【讨论】：

谢谢，正如您所说，我能够将template.js 直接包含到template.html 中，以使脚本运行。然后，我可以通过 chrome API 消息将 background.js 的文本发送给 template.html，从而将文本从 template.js 注入到 template.html。