Chrome扩展:注入Javascript显示代码，而不是输出

Chrome Extension: Injecting Javascript showing code rather than output

本文关键字：输出 代码 显示 扩展 注入 Javascript Chrome      更新时间：2023-09-26

我有一个问题与我的Javascript代码。我的意图是在页面的顶部有文本，但不是显示文本，而是得到实际的代码，而不是'Hello World':

错误图片:https://i.stack.imgur.com/Ot65M.png

这是我的manifest.json: 
"content_scripts": [
{
  "matches": ["https://www.google.com/*"],
  "js": ["contentscript.js"],
  "run_at": "document_end"
}
],
"web_accessible_resources": ["script.js"]
下面是我的contentscripts.js: 
var iframe = document.createElement("iframe");
iframe.style.width = "100%";
iframe.style.height = "50px";
iframe.style.border = "0px";
iframe.src = chrome.extension.getURL("script.js");
document.body.insertBefore(iframe, document.body.firstChild);

script.js很简单:

document.write("Hello World!");

更新:这适用于我:

清单。(我有SSL问题，所以改变了谷歌的"匹配"从https到http。)

{
    "manifest_version": 2,
    "name": "testing document write",
    "description": "testing document write from separate file",
    "version": "1.0",
    "content_scripts": [
    {
      "matches": ["http://google.com/*"],
      "js": ["contentscript.js"],
      "run_at": "document_end"
    }
    ],
    "web_accessible_resources": ["scriptjs.html"]
}
在contentscripts.js: 

var iframe = document.createElement("iframe");
iframe.style.width = "100%";
iframe.style.height = "50px";
iframe.style.border = "0px";
iframe.src = 'http://fully-qualified-URL/scriptjs.html'; // <-- LOAD HTML
document.body.insertBefore(iframe, document.body.firstChild);

在scriptjs.html中:

<script>
    document.write('Hello World');
</script>

您的脚本仍然需要在<script>元素中进行包装。

var script = document.createElement('script');
script.src = chrome.extension.getURL("script.js");
// Have to insert the iframe before `contentWindow` is available.
document.body.insertBefore(iframe, document.body.firstChild);
iframe.contentWindow.document.body.appendChild(script);
相关文章：