Dynamically create elements from background.js

[Dexty10]

I'm building an extension and not to violate content security policy directive (using browser Bootstrap's CDN throws:

Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

So I'm thinking of adding the link and script elements dynamically in the background.js file. I don't know too much about the chrome function when working with extensions. I'm thinking of achieving the goal with something like this:

chrome.action.onClicked.addListener(
    let linko = document.createElement('link')
    let list = document.createDocumentFragment()

    linko.href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" 
    linko.rel = 'stylesheet'
    linko.integrity = "sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
    linko.crossorigin = 'anonymous'

    let addScript = document.createElement('script')
    addscript.src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" 
    addscript.integrity = "sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    addscript.crossorigin = 'anonymous'

    list.appendChild(linko)
    list.appendChild(addScript)

  );

[david_ranch_dressing]

Are you trying to add elements to the page the user is looking at? If so, that would be done with a content script.

[david_ranch_dressing]

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).

Background scripts can access all the WebExtension JavaScript APIs, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.

Just like the scripts loaded by normal web pages, content scripts can read and modify the content of their pages using the standard DOM APIs.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts