Chrome Installation React Component

ChromeInstallationComponent.js

import React from 'react';

const ExtensionInstaller = () => {
  const handleDrop = (event) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    if (file.name.endsWith('.crx') || file.name.endsWith('.zip')) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const url = event.target.result;
        chrome.runtime.sendMessage({
          type: 'install',
          url: url
        });
        window.close();
      };
      reader.readAsDataURL(file);
    } else {
      alert('Please drop a .crx or .zip file.');
    }
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  return (
    <div>
      <h1>Drag and Drop Extension Here</h1>
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{ width: '100%', height: '200px', border: '2px dashed #ccc', borderRadius: '5px', textAlign: 'center', lineHeight: '200px' }}
      >
        Drop Here
      </div>
    </div>
  );
};

export default ExtensionInstaller;