chrome 扩展 content.js 使动态网站崩溃

Question

我试图通过自定义 chrome 扩展插入覆盖，但是，当简单地将 HTML 添加到文档正文时，动态网站将崩溃并且按钮将不起作用 + 连接将不工作。

有没有其他方法可以在不导致应用程序崩溃的情况下解决这个问题？

content.js

document.body.innerHTML += `<div>innerHTML</div>`

Answer 1

我建议构建元素，然后将其附加到文档正文。

这是一个示例，其中我有一个 HTML 文件，我正在使用内容脚本获取该文件并将其添加到页面。

manifest.json:

"web_accessible_resources": [
    "content/views/overlay.html"
]

content.js:

const htmlBackdropLink = chrome.extension.getURL('content/views/overlay.html');
// Get overlay HTML
const overlayRes = await fetch(htmlBackdropLink);
const overlayHtml = await backdropRes.text();

// Create div and set HTML
const wrapperDiv = document.createElement('div');
wrapperDiv.innerHTML = overlayHtml;

document.body.appendChild(wrapperDiv)

chrome 扩展 content.js 使动态网站崩溃

chrome extension content.js crashes dynamic websites

javascript

google-chrome

dynamic

google-chrome-extension

reactjs