krowdycareers · CindyMendoza · May 11, 2023
diff --git a/background.js b/background.js
@@ -0,0 +1,49 @@
+let jobs = [];
+let start = false;
+
+function addPageToURL(url) {
+  const regex = /page=(\d+)/;
+  const match = url.match(regex);
+  const page = (match && match[1]) || "1";
+  const newPage = parseInt(page) + 1;
+
+  return url.replace(regex, `page=${newPage}`);
+}
+
+async function changeTabtoNextPage(url, tabid) {
+  const newURL = addPageToURL(url);
+  await chrome.tabs.update(tabid, { url: newURL });
+}
+
+chrome.runtime.onConnect.addListener(function (port) {
+  port.onMessage.addListener(async function (params) {
+    const { cmd } = params;
+    if (cmd === "start") {
+      start = true;
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+
+      if (tab) {
+        let port = chrome.tabs.connect(tab.id, { name: "bg-content_script" });
+        port.postMessage({ cmd: "scrap" });
+      }
+    }
+
+    if (cmd === "getInfo") {
+      const { jobsInformation} = params;
+      jobs = [...jobsInformation];
+
+      const jobsJSON = jobs;
+
+      chrome.storage.local.set({ jobs }, () => {
+        console.log("Data saved to local storage", jobs);
+      });
+
+      start = false;
+
+      chrome.runtime.sendMessage({ cmd: "dataJobs", jobs: jobsJSON });
+    }
+  });
+});
diff --git a/contentscript.js b/contentscript.js
@@ -0,0 +1,50 @@
+function getJobInformation() {
+  let jobElementInformation = document.querySelectorAll("div[id*=jobcard]");
+  jobElementInformation = [...jobElementInformation];
+
+  const jobJsonInformation = jobElementInformation.map((el) => {
+    const [
+      {},
+      {
+        children: [
+          {
+            children: [
+              { innerText: dateJob },
+              {},
+              { innerText: jobSalaryRange },
+            ],
+          },
+        ],
+      },
+    ] = el.children;
+    salaryRange = jobSalaryRange.split("\n")[0];
+    date = dateJob.split("\n")[0];
+    country = el.querySelector("p[class*=zonesLinks]").innerText;
+    return { date, salaryRange, country };
+  });
+
+  const filterDate = jobJsonInformation.filter((e) => e.date === "Hoy");
+
+  const filterCountry = filterDate.filter((value, index, array) => {
+
+    return array.findIndex(obj => obj.country === value.country && obj.salaryRange === value.salaryRange) === index;
+  });
+
+  return filterCountry;
+}
+
+const portBackground = chrome.runtime.connect({
+  name: "content_script-background",
+});
+
+portBackground.postMessage({ cmd: "online" });
+
+chrome.runtime.onConnect.addListener(function (port) {
+  port.onMessage.addListener(({ cmd }) => {
+    if (cmd === "scrap") {
+      const jobsInformation = getJobInformation();
+
+      portBackground.postMessage({ cmd: "getInfo", jobsInformation });
+    }
+  });
+});
diff --git a/images/icon.png b/images/icon.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,22 @@
+{
+  "manifest_version": 3,
+  "name": "Krowdy-reto-1",
+  "version": "1.0",
+  "description": "",
+  "action": {
+    "default_popup": "./popup/index.html"
+  },
+  "permissions": ["storage", "activeTab", "scripting", "tabs"],
+  "icons": {
+    "32": "./images/icon.png"
+  },
+  "background": {
+    "service_worker": "./background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://www.occ.com.mx/*"],
+      "js": ["./contentscript.js"]
+    }
+  ]
+}
diff --git a/popup/index.html b/popup/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Krowdy-reto-1</title>
+    <style>
+        body {
+            width: 400px;
+            height: 400px;
+            font-size: 16px;
+        }
+
+        .card {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: auto;
+            height: auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            padding: 10px;
+            margin: 10px;
+        }
+
+        .card h2 {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 10px;
+            margin-top: 0;
+        }
+
+        .card p {
+            font-size: 14px;
+            line-height: 1.5;
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+    <button id="btnScript">Ver estadística del día</button>
+    <div id="jobCard"></div>
+    <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/popup/index.js b/popup/index.js
@@ -0,0 +1,36 @@
+const btnScripting = document.getElementById("btnScript");
+const btnClearStorage = document.getElementById("btnClearStorage");
+
+const jobCard = document.getElementById("jobCard");
+
+
+btnScripting.addEventListener("click", async () => {
+  chrome.storage.local.remove(["jobs"]);
+  jobCard.textContent = "Procesando...";
+  setTimeout(() => {
+    jobCard.textContent = "";
+    var port = chrome.runtime.connect({ name: "popup-background" });
+    port.postMessage({ cmd: "start" });
+  }, 3000);
+
+});
+
+
+chrome.runtime.onMessage.addListener(function (message) {
+  const { cmd, jobs } = message;
+  let html = "";
+  if (cmd === "dataJobs" && jobs) {
+    jobs.forEach((e) => {
+      html += `
+      <div class="card">
+        <h2> ${e.country}</h2>
+        <p> ${e.salaryRange} </p>
+      </div>
+      `;
+    });
+    jobCard.innerHTML = html;
+
+  }
+});
+
+