Reto Mayor - Rudy Mendoza

.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

background.js

@@ -0,0 +1,101 @@
+let jobs = []
+let start = false
+let baseURL = "https://www.occ.com.mx/empleos/?tm=0&page=1"
+let valueInputPage = "0"
+
+function nextPageToURL(url) {
+  const regex = /page=(\d+)/
+  const match = url.match(regex)
+  const currentPage = (match && match[1]) || "1"
+  const nextPage = parseInt(currentPage) + 1
+  return url.replace(regex, `page=${nextPage}`)
+}
+
+async function changeTabToNextPage(url, id) {
+  const nextURL = nextPageToURL(url)
+  await chrome.tabs.update(id, { url: nextURL })
+
+}
+
+function jobsGroupBySalary(jobsArray) {
+  const objectGroupBySalary = jobsArray.reduce((acc, curr) => {
+    const key = curr.salary
+    if (!acc[key]) acc[key] = []
+    acc[key].push(curr)
+    return acc
+  }, {})
+  for (const clave in objectGroupBySalary) {
+    if (Array.isArray(objectGroupBySalary[clave])) {
+      objectGroupBySalary[clave] = objectGroupBySalary[clave].length;
+    }
+  }
+  const arrayGroupBySalary = Object.entries(objectGroupBySalary).map(([salary, cant]) => ({ salary, cant }))
+  return { country: "MEXICO", rangos: arrayGroupBySalary }
+}
+
+chrome.runtime.onConnect.addListener(port => {
+  port.onMessage.addListener(async (params, sender) => {
+    const { cmd } = params
+    if (cmd === "start") {
+      const { valueInput } = params
+      valueInputPage = valueInput
+      start = true
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      })
+      await chrome.tabs.update(tab.id, { url: baseURL })
+      let port = chrome.tabs.connect(tab.id, { name: "background-content_script" })
+      port.postMessage({ cmd: "scrap", valueInputPage })
+
+    }
+    if (cmd === "stop") {
+      start = false
+      chrome.storage.local.set({ jobs })
+      const portToPopup = chrome.runtime.connect({
+        name: "bg-popup"
+      })
+
+      portToPopup.postMessage({ cmd: "showJobs" })
+
+    }
+    if (cmd === "reset") {
+
+      start = false
+      jobs = []
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      })
+      await chrome.tabs.update(tab.id, { url: baseURL })
+
+    }
+
+    if (cmd === "online") {
+      if (start) {
+        const { sender: { tab: { id } } } = sender
+        let port = chrome.tabs.connect(id, { name: "background-content_script" })
+        port.postMessage({ cmd: "scrap", valueInputPage })
+      }
+    }
+
+
+    if (cmd === "getInfo") {
+      const { jobsInformation, nextPage } = params
+      jobs = [...jobs, ...jobsInformation]
+      if (nextPage) {
+        const { sender: { tab: { url, id } } } = sender
+        changeTabToNextPage(url, id)
+      }
+      else {
+        start = false
+        chrome.storage.local.set({ results: jobsGroupBySalary(jobs) })
+        const portToPopup = chrome.runtime.connect({
+          name: "bg-popup"
+        })
+
+        portToPopup.postMessage({ cmd: "showJobs" })
+      }
+    }
+  })
+})

contentscript.js

@@ -0,0 +1,37 @@
+console.log("se esta ejecutando el javascript")
+
+function getJobInformation() {
+
+  let jobElementInformation = document.querySelectorAll('div[id*=jobcard]')
+  jobElementInformation = [...jobElementInformation]
+
+  const jobJsonInformation = jobElementInformation.map(el => {
+    const [{ href: url }, { children: [{ children: [{ innerText: fecha }, { innerText: title }, { innerText: salary }] }] }] = el.children
+    return { url, fecha, title, salary }
+  })
+  return jobJsonInformation
+
+}
+
+const portBackground = chrome.runtime.connect({
+  name: "content_script-background"
+})
+
+portBackground.postMessage({ cmd: "online" })
+
+chrome.runtime.onConnect.addListener(function (port) {
+  port.onMessage.addListener(params => {
+    const { cmd } = params
+
+    if (cmd === "scrap") {
+      const { valueInputPage } = params
+      const jobsInformation = getJobInformation()
+      const buttonNext = document.querySelector("[class*=next]")
+      const url = window.location.href
+      const regex = /page=(\d+)/
+      const page = url.match(regex)[1]
+      const nextPage = !buttonNext.className.includes("disabled") && !(parseInt(valueInputPage) === parseInt(page))
+      portBackground.postMessage({ cmd: "getInfo", jobsInformation, nextPage })
+    }
+  })
+})

manifest.json

@@ -0,0 +1,31 @@
+{
+  "name": "scraping-occ",
+  "description": "Obtener avisos",
+  "manifest_version": 3,
+  "version": "1.0",
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "tabs",
+    "storage"
+  ],
+  "background": {
+    "service_worker": "./background.js"
+  },
+  "action": {
+    "default_popup": "./popup/index.html"
+  },
+  "icons": {
+    "32": "./images/icon.png"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://www.occ.com.mx/*"
+      ],
+      "js": [
+        "./contentscript.js"
+      ]
+    }
+  ]
+}

popup/index.html

@@ -0,0 +1,42 @@
+<!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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Exo:wght@200;300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <p class="title">EXTENSION DE SCRAPING</p>
+    <div class="group__container">
+        <div class="input__container">
+            <label for="numberpages">Ingrese el numero de paginas</label>
+            <input id="numberpages" type="text" inputmode="numeric">
+            <div>
+                <input type="checkbox" name="" id="allpages">
+                <label for="allpages">Todas las paginas</label>
+            </div>
+        </div>
+        <div class="buttons__container">
+            <button id="btnscript">START</button>
+            <button id="btnstop">STOP</button>
+            <button id="btnreset">RESET</button>
+        </div>
+    </div>
+    <pre id="mensaje">No hay Resultados</pre>
+    <div class="result__container" id="result"></div>
+    <script src="./index.js"></script>
+</body>
+
+</html>

popup/index.js

@@ -0,0 +1,73 @@
+const btnScripting = document.getElementById("btnscript");
+const btnStop = document.getElementById("btnstop");
+const btnReset = document.getElementById("btnreset");
+const pMessageElement = document.getElementById("mensaje")
+const checkbox = document.getElementById("allpages");
+const input = document.getElementById("numberpages");
+const resultContainer = document.getElementById("result");
+
+checkbox.addEventListener("change", () => {
+
+  checkbox.checked == true ? input.disabled = true : input.disabled = false
+})
+
+
+btnScripting.addEventListener("click", async () => {
+  const port = chrome.runtime.connect({ name: "popup-background" })
+  const valueInput = input.value
+  console.log(valueInput);
+  if (checkbox.checked) {
+
+    port.postMessage({ cmd: "start", valueInput: "0" })
+    pMessageElement.innerText = "Procesando..."
+  }
+  else if (valueInput != "") {
+    const valueNumber = parseInt(valueInput)
+    if (isNaN(valueNumber) || valueNumber < 1)
+      alert("Debes ingresar numeros validos ")
+    else {
+      port.postMessage({ cmd: "start", valueInput })
+      pMessageElement.innerText = "Procesando..."
+    }
+  }
+  else {
+    alert("Debes de escribir el numero de paginas o marcar 'Todas las paginas'")
+  }
+});
+btnStop.addEventListener("click", async () => {
+  const port = chrome.runtime.connect({ name: "popup-background" })
+  port.postMessage({ cmd: "stop" })
+});
+btnReset.addEventListener("click", async () => {
+  const port = chrome.runtime.connect({ name: "popup-background" })
+  port.postMessage({ cmd: "reset" })
+  input.value = ""
+  input.disabled = false
+  checkbox.checked = false
+  pMessageElement.innerText = "No hay Resultados"
+  resultContainer.innerHTML = ''
+});
+
+chrome.runtime.onConnect.addListener(port => {
+  port.onMessage.addListener(({ cmd }) => {
+    if (cmd === "showJobs") {
+      chrome.storage.local.get("results", result => {
+        pMessageElement.innerText = result.results.country
+        const salaryRange = result.results.rangos.map(item => {
+          const div = document.createElement('div')
+          const p1 = document.createElement('p');
+          const p2 = document.createElement('p');
+          p1.textContent = item.salary;
+          p1.classList.add("salary")
+          p2.textContent = item.cant;
+          div.appendChild(p1)
+          div.appendChild(p2)
+          return div
+
+        })
+
+        salaryRange.forEach(p => resultContainer.appendChild(p));
+      })
+    }
+  })
+})