How to create right opening drawer in chrome extension?

Question

I have been working on a chrome extension project, where in the extension popup, clicking on a button opens a drawer from the right side, with more details, which ideally are not present inside the extension popup due to size reasons. To achieve a minimum size of the extension popup, I had added a CSS style in the body:

body {
  width: 450px;
  height: 480px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative;
}

The thing is the drawer is getting overlayed on top of the original extension instead of the overall screen as I want. I have been using ant design for the project. Here is a quick example of the popup code in react, to repeat the behaviour:

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Drawer, Space } from "antd";

const App = () => {
  const [open, setOpen] = useState(false);
  const showLargeDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  return (
    <>
      <Space>
        <Button type="primary" onClick={showLargeDrawer}>
          Open Large Size (736px)
        </Button>
      </Space>
      <Drawer
        title={`Drawer`}
        placement="right"
        size="large"
        onClose={onClose}
        open={open}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
            <Button type="primary" onClick={onClose}>
              OK
            </Button>
          </Space>
        }
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
};
export default App;

Great, if someone could suggest how to make the drawer global in the screen while controlling the size of the extension seperately?

How to create right opening drawer in chrome extension?

0 Answers0