How would I inject an html page with tailwindcss/alpine into the current page with content.js

[mcunningham]

Hello!
First off, this is an amazing starter kit. I really appreciate all of the work you put into this. I am looking to inject html into the DOM of the current page (instead of a popup) and include the tailwindcss styles and alpine.js functionality into that injection. I read here that in a general sense you can inject html by using fetch and chrome.extension.getURL and document.body.appendChild to add to the current DOM, you also have to add a few things to manifest.json including "web_accessible_resources": ["some.html"] for whatever page you want injected and "permissions": ["activeTab"]. However in my case there is not currently a html file for the src/content bundled like there is for src/options and src/popup so for testing purposes I tried calling the below in src/content/index.js but referenced /dist/popup.hmtl instead like so...

/* global chrome */
import "alpinejs";

(function () {
  fetch(chrome.extension.getURL("/dist/popup.html"))
    .then((response) => response.text())
    .then((data) => {
      let div = document.createElement("div");
      div.style.position = "fixed";
      div.style.top = "50%";
      div.style.right = 0;
      div.innerHTML += data;
      document.body.appendChild(div);
    })
    .catch((err) => {
      console.log(err);
      // handle error
    });
})();

With these additions to manifest.json (shortened for brevity)

  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "js": ["dist/content.dist.js"],
      "css": ["dist/content.css"],
      "matches": ["https://*/*"]
    }
  ],
  "background": {
    "scripts": ["dist/background.dist.js"]
  },
  "web_accessible_resources": ["dist/popup.html"]
}

The result was that I was able to inject the popup.hmtl into any webpage! and it is working with alpine, however the Tailwindcss styles did not carry over.

My Main Questions

1. How can I create another html file specifically for injecting in src/content and use it with the current webpack config? (So I don't have to fetch popup or options html) I am a newer dev and bit lost when it comes to configuring webpack. I imagine it would just be in src/content/index.html where I could fetch that file instead?
2. Any ideas on how to carry over the Tailwind css styles in this instance? Pending I figure out how to get the tailwind styles included, I will also have to figure out how to isolate the styles of the injected div so there is no bleeding in either direction with the current page. I have heard of people using iframe or shadowDOM so would likely have to explore some of those solutions after I figure out how to get tailwind included.

[amosbastian]

Did you figure it out?