exporting javascript

[andrevenancio]

Hi, I keep bumping into your repo when looking into nextJS and chrome-extensions 👋🏻

I am wondering HOW would you go about adding javascript file or another page to it? Lets say you need a devtools.html you would create a devtools.tsx page right? but how would you go about writing the necessary javascript to that page only?

Lets say you want a typescript file that has

chrome.devtools.panels.create("My Panel", null, "panel.html", function (panel) {
  console.log("Panel created!")
})

To be loaded by the devtools.html file?

[dev-alihasan]

if you want to add the code you provided to the devtools.html file, you can create a new devtools.tsx file in the pages directory and add the following code

import { useEffect } from 'react'

const DevTools = () => {
  useEffect(() => {
    chrome.devtools.panels.create("My Panel", null, "panel.html", function (panel) {
      console.log("Panel created!")
    })
  }, [])

  return (
    <div>
      <h1>This is my devtools page</h1>
    </div>
  )
}

export default DevTools

this code'ill create a new devtools panel named "My Panel" when the DevTools page is loaded.

[andrevenancio]

But how does that "panel.html" page gets created and how will this dev tools.html will access any DOM elements there to manipulate? Feels like 2 HTML files for one section is unnecessary. Maybe I'm missing something

[ghost]

In this case I would create another Next.js directory to output the devtools.html file. There's a strong separation of concerns for extensions. So for devtools panels, popup, and injecting into page's html via content scripts would all have their own directories / files and talk to eachother via programmatic injection, message passing, or storage: https://stackoverflow.com/questions/38561136/chrome-extension-to-change-dom-with-a-button-in-extension-popup/38579393#38579393