[Question] Chakra in web browser extension?

[Puliczek]

I would like to add some UI Framework and I have chosen Chakra.

I do have 2 questions:

1. Is it fine to add UI Frameworks to web browser extensions?
2. Chakra is working fine, however, I do not have styles(css?). Any advice?

Thanks for the boilerplate is very useful 👍

[Puliczek]

@ElForastero Any advice?

[ElForastero]

@ElForastero Any advice?

Hi,

If I undestand you right (about css), you need to inject css into web page.

I don't have a nice solution for this except this one: https://github.com/ElForastero/react-browser-extension-boilerplate/blob/b99930ed400e6aa7a2fa00225e32a5307327cc14/src/content.js

It was used in the early version of this boilerplate.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import './content.module.css';
import browser from 'webextension-polyfill';

const BackgroundApp = () => {
  const [css, updateCSS] = useState('');

  useEffect(() => {
    const url = browser.extension.getURL('assets/css/content.css');
    fetch(url)
      .then(response => response.text())
      .then(updateCSS);
  }, []);

  return (
    <div styleName="container">
      <style>{css}</style>
    </div>
  );
};

const root = document.createElement('div');
document.body.appendChild(root);
const shadow = root.attachShadow({ mode: 'open' });

ReactDOM.render(<BackgroundApp />, shadow);

First you download the css using fetch, and then just render the tag.

[Puliczek]

Thanks, however, that isn't a solution to my problem.

I had to remove Shadow const shadow = root.attachShadow({ mode: 'open' });

Instead of that, I am using just a normal div. Now the styles of chakra UI elements work perfectly.

By using a shadow, styles of chakraUI are disappeared.