google-chrome – Chrome扩展程序将html注入特定div

2023年4月1日 394次阅读

我试图对chrome进行扩展,将html代码注入特定页面上的特定div.

这是我想要注入一些代码的示例页面：
http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

到目前为止,我已经做到了：
manifest.json的：

{
"manifest_version":         2,
"content_scripts":          [ {
    "js":       [ "iframeInjector.js" ],
    "matches":  [   "http://netdna.webdesignerdepot.com/*/*/*"
    ]
} ],
"description":              "Inject html",
"name":                     "Inject html",
"version":                  "1",
"web_accessible_resources": ["test.html"]
}

的test.html：

Test html code

iframeInjector.js：

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
document.body.insertBefore (iframe, document.body.openModal);

在示例页面上有一个名为“openModal”的div,如何将我的html代码注入该div？

另一个问题：是否有办法将页面标题读取到变量并在我感染的html代码中使用该变量？

谢谢..

最佳答案 那么有一个id为id =“openModal”的div要添加iframe吗？

iframeInjector.js

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
var yourDIV = document.getElementById("openModal");
yourDIV.appendChild(iframe);
点赞