0

I'm developing a chrome extension where I have set it up with webpack in react, It builds the final html and js files then I use them inside my chrome extension, The html file gets injected inside the page whenever the page is loaded, But I have used ant design inside the react app, So when I import the ant design styling the page is getting affected by the styling because I think the css file consists of element selectors. Is there a way by which I can prevent this from happening?

import React, { Component } from "react";
import bookIcon from "../assets/icons/book.svg";
import { BrowserRouter, Switch, Route, withRouter } from "react-router-dom";
import styled from "styled-components";
import "../../node_modules/antd/dist/antd.css";
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "../app.css";
import NotesContainer from "./NotesContainer";
import Settings from "./Settings";

import { Button, Card, Tooltip } from "antd";
import { render } from "react-dom";
class Foreground extends Component {
  state = {};
  componentDidMount() {
    document.addEventListener("userData", function (e) {
      console.log(e.detail);
    });
  }

  navigateToSettings = (e) => {
    console.log("called");
    this.props.history.push("/settings");
  };
  render() {
    return (
      <AppContainer id="reset-this-root">
        <Card
          className="app-card"
          actions={[
            <Tooltip placement="top" title={"Settings"}>
              <SettingOutlined key="setting" />
            </Tooltip>,
            <Tooltip placement="top" title={"New note"}>
              <EditOutlined key="edit" />
            </Tooltip>,
            <Tooltip placement="top" title={"Tools"}>
              <EllipsisOutlined key="ellipsis" />
            </Tooltip>,
          ]}
        ></Card>
      </AppContainer>
    );
  }
}

export const AppContainer = styled.div`
  width: 400px;
  height: 100vh;
  background-color: white;
  z-index: 1000000000000;
  position: fixed;
  top: 0;
  right: 0;
`;

export default withRouter(Foreground);

Here I'm importing the ant design css styling.

  • A demo + tutorial of putting the UI inside a special extension iframe: [here](https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39). – wOxxOm Feb 20 '21 at 09:29
  • I don't want to use react because my project heavily depends on the content from the website so it is a pain to always build the project and test it inside the browser, I tried using a normal html iframe and tried injecting it but when I tried to append a js or css file inside the iframe I was getting an error, As access block or something like cors –  Mar 01 '21 at 20:35
  • You use React in your question, which is why linked such an example. There are tons of examples that load such an iframe without React so find one: apparently your code was doing something incorrectly but I can't help without seeing it. – wOxxOm Mar 02 '21 at 05:08

0 Answers0