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

To inject an HTML page with TailwindCSS/Alpine into the current page using content.js, you can follow these steps:

Create an HTML file with your content and link the TailwindCSS and AlpineCDN.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  <script src="https://unpkg.com/alpinejs@v3"></script>
</head>
<body>
  <div x-data="{open: false}">
    <button @click="open = !open">Toggle Menu</button>
    <ul x-show="open">
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
    </ul>
  </div>
  <h1 class="text-2xl font-bold mt-5">My Content</h1>
  <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae ligula vel arcu aliquet gravida vitae ac quam.</p>
</body>
</html>

In your content.js file, create a function to inject the content into the current page. The function should create a div element, assign the HTML content to it, and then append it to the body of the current page. Here is an example of the function:

function injectHTML() {
  fetch(chrome.runtime.getURL('/path/to/your/html/file.html'))
    .then(response => response.text())
    .then(data => {
      const html = document.createElement('div');
      html.innerHTML = data;
      document.body.appendChild(html);
    });
}

Finally, call the injectHTML() function wherever you want to inject the content in your content.js file. For example, you could add an event listener to a button that calls the function when clicked:
```
document.getElementById('inject-button').addEventListener('click', () => {
  injectHTML();
});
```
When the button is clicked, the function will fetch the HTML file and inject it into the current page. The TailwindCSS and AlpineCDN will be automatically linked and the page will be styled and interactive according to the code in the HTML file.