Moizsohail

import { nodeResolve } from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
const config = [
  {
    input: ["./src/chrome/content.ts"],
    output: {
      file: "dist/static/js/content.js",
      name: "content",
      format: "iife",
    },

Moizsohail

#!/bin/bash

build() {
    echo 'building react'

    export INLINE_RUNTIME_CHUNK=false
    export GENERATE_SOURCEMAP=false

    react-scripts build
    

Moizsohail

"scripts": {
  "build": "INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false react-scripts build && rm -rf dist/* && mv build/* dist",
  "dev": "npm-watch build"
},
  "watch": {
  "build": {
    "patterns": [
      "src"
    ],
    "extensions": "js,jsx,tsx,ts,css"

Moizsohail

{
  "manifest_version": 3,
  "name": "Mooo Extension",
  "version": "0.0.1",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "host_permissions": ["<all_urls>"]
}

Moizsohail

import React from "react";
import "./App.css";

import "bootstrap/dist/js/bootstrap.min";
import "bootstrap/dist/css/bootstrap.min.css";
import Home from "./components/Home";

function App() {
  return (
    <div className="App">

Moizsohail

import React from "react";
import { Button, Container, FormControl, Navbar } from "react-bootstrap";

const Home = () => (
  <>
    <Navbar bg="primary" className="px-3" expand="lg" variant="dark">
      <Navbar.Brand>Our Mooo Extension</Navbar.Brand>
    </Navbar>
    <Container className="w-100 h-100 p-3">
      <FormControl placeholder="What to Moo?"></FormControl>

Moizsohail

import { ChromeMessage, MessageResponse, MessageTypes } from "../types";
const messagesFromReactAppListener = (
  message: ChromeMessage,
  sender: chrome.runtime.MessageSender,
  sendResponse: MessageResponse
) => {
  switch (message.type) {
    case MessageTypes.execute:
      console.log("Executed");
      break;

Moizsohail

export enum MessageTypes {
  execute,
}

export interface ChromeMessageDefault {
  type: MessageTypes;
}
export interface ChromeMessageExecute {
  type: MessageTypes.execute;
  text: string;

Moizsohail

 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./static/js/content.js"],
      "all_frames": false,
      "run_at": "document_end"
    }
  ],
  "background": { "service_worker": "./static/js/background.js" },
  "commands": {

Moizsohail

import { MessageTypes } from "./types";

export const sendMessage = (
  messageType: MessageTypes,
  payload?: object | null,
  callback?: any
) => {
  if (!payload) payload = {};
  chrome.windows.getCurrent((w) => {
    chrome.tabs &&