chrome extension content.js crashes dynamic websites

Question

Im trying to insert an overlay through a custom chrome extension, however, when simply adding HTML to the body of the document the dynamic websites will crash and buttons will not work + connections will not work.

Is there any other ways to approach this without crashing the applications?

content.js

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

score 1 · Accepted Answer · answered Oct 13 '20 at 22:17

I would recommend to construct the element then appending it to the document body.

Here's an example where I have an HTML file that I am fetching with the content script and adding it to the page.

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 extension content.js crashes dynamic websites

1 Answers1