reto mayor - Jose Armando Ccama Cruz

.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 pageCount = 1;
+let selectedValue;
+
+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 });
+}
+
+const formattingJSONData = (transformedData) => {
+  let filteredData = [];
+
+  filteredData = transformedData.reduce((acc, item) => {
+    const existingCity = acc.find(city => city.city === item.city);
+    if (existingCity) {
+        const rangeIndex = existingCity.rango.findIndex(range => range.salario === item.salaryRange);
+
+        if (rangeIndex >= 0) {
+          existingCity.rango[rangeIndex].cantidad++;
+        } else {
+          existingCity.rango.push({
+            salario: item.salaryRange,
+            cantidad: 1
+          });
+        }
+    } else {
+      acc.push({
+        city: item.city,
+        rango: [
+          {
+            salario: item.salaryRange,
+            cantidad: 1
+          }
+        ]
+      });
+    }
+
+    return acc;
+  }, []);
+
+  return filteredData;
+}
+
+chrome.runtime.onMessage.addListener((message) => {
+  selectedValue = message.selectedValue;
+  pageCount=selectedValue;
+  console.log(`Valor seleccionado: ${selectedValue}`);
+});
+
+chrome.runtime.onConnect.addListener(function (port) {
+  port.onMessage.addListener(async function (params, sender) {
+    const { cmd } = params;
+    if (cmd === "start") {
+      start = true;
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      let port = chrome.tabs.connect(tab.id, { name: "bg-content_script" });
+      port.postMessage({ cmd: "scrap" });
+    }
+
+    if (cmd === "online") {
+      const {
+        sender: {
+          tab: { id },
+        },
+      } = sender;
+      if (start) {
+        let port = chrome.tabs.connect(id, { name: "bg-content_script" });
+        port.postMessage({ cmd: "scrap" });
+      }
+    }
+
+    if (cmd === "getInfo") {
+      const { jobsFormatings, nextPage } = params;
+      jobs = [...jobs, ...jobsFormatings];
+
+      if (nextPage && pageCount > 0) {
+        const {sender:{tab:{url,id}}}=sender;
+        changeTabtoNextPage(url, id);
+        pageCount--;
+      } else {
+        start = false;
+        const jobsJSON = formattingJSONData(jobs);
+        chrome.storage.local.set({ jobs: jobsJSON });
+        chrome.runtime.sendMessage({ cmd: "submitJobs", jobs: jobsJSON });
+        jobs = [];
+        start = false;
+        pageCount = selectedValue;
+      }
+    }
+  });
+});

contentscript.js

@@ -0,0 +1,67 @@
+// OBTENCION DE DATA
+function getJobInformation() {
+  let jobsElementInformation = [...document.querySelectorAll("div[id*=jobcard]")];
+
+  const jobJSONData = jobsElementInformation.map(el => {
+    const city=el.querySelector("[class*=zonesLinks]").innerText;
+    const [, { children: [{ children: [, { innerText: title }, { innerText: salary }] }] }] = el.children;
+    return { title, salary, city };
+  });
+
+  return jobJSONData;
+}
+
+// formateo de salario
+const formatSalary =(salary)=>{
+  if (/\d/.test(salary)) {
+    return salary.replace(/[^\d-]/g, '');
+  } else {
+    return 'Sueldo no mostrado';
+  }
+}
+
+
+// Transformar la data
+const convertData = (jobsInformation) => {
+  const convertData = jobsInformation.map(dato => {
+
+    const { salary, city, ...rest } = dato;
+
+    const formattedSalary = formatSalary(salary);
+
+    return {
+      ...rest,
+      salaryRange: formattedSalary,
+      city: city,
+    };
+  });
+  return convertData;
+}
+
+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();
+      const jobsFormatings = convertData(jobsInformation);
+      const buttonNext = document.querySelector("[class*=next]");
+      const nextPage = !buttonNext.className.includes("disabled");
+      portBackground.postMessage({ cmd: 'getInfo', jobsFormatings, nextPage });
+    }
+  });
+});
+
+chrome.runtime.onMessage.addListener(function (message) {
+  const { cmd, jobs } = message;
+
+  if (cmd === "submitJobs" && jobs) {
+    chrome.storage.local.set({ jobs: jobs });
+    chrome.runtime.sendMessage({ cmd: "submitJobs", jobs });
+  }
+});
+

manifest.json

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

popup/index.html

@@ -0,0 +1,35 @@
+<!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="stylesheet" href="../style/index.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="header-container">
+        <h1>OccMundial</h1>
+    </div>
+    <div class="option-container">
+        <div>
+            <p>Cantidad de paginas a buscar:</p>
+            <select id="select-page">
+                <option value="1">1 pagina</option>
+                <option value="2">2 paginas</option>
+                <option value="3">3 paginas</option>
+                <option value="4">4 paginas</option>
+                <option value="5">5 paginas</option>
+            </select>
+        </div>
+        <div class="btn-option">
+            <button id="btnScript" class="btn">Scrapping</button>
+            <button id="btnScriptClear" class="btn">Limpiar</button>
+        </div>
+    </div>
+    <div id="jobs-container">
+        <div id="jobs-list"></div>
+    </div>
+    <script src="./index.js"></script>
+</body>
+</html>