Support for devtools panel

[gpichot]

Hello,

I am trying to use the vite-plugin with React to add a devtools panel.

I have created the following:

src
├── devtools.html
├── devtools.ts
├── panel.html
└── panel.ts

But the JavaScript from the panel.ts file is not executed, I am getting the following error:

Unchecked runtime.lastError: Cannot access contents of url "chrome-extension://opghholhamhbjhfadfgfpbnijlbcfkfe//src/@crx/inline-script/src/panel?t=1667777587778". Extension manifest must request permission to access this host.

Are the devtools panel properly supported?
I have taken a look at #227 but it seems to render the App from the devtools JavaScript, is it the way to go right now?

Thanks in advance for your reply.

Note:

• I have added to my vite.config.ts:

  build: {
    rollupOptions: {
      input: {
        panel: path.resolve(__dirname, "src/panel.html"),
      },
    },
  },

[gpichot]

Okay so for anyone looking for an answer: it does not look like you can import a javascript file from a panel. In place you can add a listener to panel.onShow to retrieve the window instance :

chrome.devtools.panels.create(
  "My Panel",
  "icon.png",
  "/src/panel.html",
  (panel) => {
    panel.onShown.addListener((window) => {
      window.document.body.innerHTML = "Hello World";
    });
  }
);

EDIT: styles (from either imported *.module.scss, *.css files, or from styled-components and CSS-in-JS libraries) will not work by default. Styles are injected in the devtools.html document and not in the panel.html document to make it work both in development and production it will require :

• to add the following changes :

chrome.devtools.panels.create(
  "NextJS",
  "icon.png",
  "/src/panel.html",
  (panel) => {
    panel.onShown.addListener((window) => {
      const root = ReactDOM.createRoot(
        window.document.getElementById("root") as HTMLElement
      );
      root.render(<App />);

      installStyles(window.document);
    });
  }
);

export function installStyles(targetDocument: Document) {
  // Watch for style changes in dev mode
  if (process.env.NODE_ENV === "development") {
    // Watch styles in development
    watchStyles(targetDocument);
    // Inject existing styles
    const styles = document.querySelectorAll('style[type="text/css"]');
    styles.forEach((style) => {
      const newStyle = style.cloneNode(true) as HTMLStyleElement;
      targetDocument.head.appendChild(newStyle);
    });
  } else {
    const links = document.querySelectorAll('link[rel="stylesheet"]');
    links.forEach((link) => {
      const newLink = link.cloneNode(true) as HTMLLinkElement;
      targetDocument.head.appendChild(newLink);
    });
  }
}

// Watch for changes on style elements in the head 
// Need to add support for style element removals
function watchStyles(targetDocument: Document) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type !== "childList") return;

      const addedNodes = Array.from(mutation.addedNodes);

      addedNodes.forEach((node) => {
        if (node.nodeName === "STYLE") {
          const newStyle = node.cloneNode(true) as HTMLStyleElement;
          targetDocument.head.appendChild(newStyle);
        }

        // Text case, we check if parent is a style tag
        if (
          node.nodeName === "#text" &&
          node.parentElement?.nodeName === "STYLE"
        ) {
          const newStyle = node.parentElement as HTMLStyleElement;
          const id = newStyle.getAttribute("data-vite-dev-id");
          const oldStyle = targetDocument.querySelector(
            `[data-vite-dev-id="${id}"]`
          );
          if (!oldStyle) return;
          oldStyle.innerHTML = newStyle.innerHTML;
        }
      });
    });
  });

  observer.observe(window.document.head, {
    subtree: true,
    childList: true,
  });
}

• In production build you will need to complete theweb_accessible_resources in the manifest.json so you can allow cross-origin frames modifications :

{ 
 // ...
  "web_accessible_resources": [
    {
      "resources": [
        "src/next-devtools.html",
        "src/popup.html",
        "src/panel.html"
      ],
      "matches": ["<all_urls>"],
      "extension_ids": []
    }
  ]
  // ...
}

For reference I am adding a reference chrome extension that I am building and that is using devtools : https://github.com/gpichot/chrome-extension-next-devtools

[JustinGrote]

@gpichot your reference example was super helpful! Pretty clever to use the panel callback to render the React root node.