3

I'm building an extension and started with the Chrome developers guide. I want to scrape a webpage and get a popup if a price gets to value X.

I order to get that to work I need to importo "cheerio". I've seen a lot of questions similar to this one, downloaded the require.js to a lib folder, included in the manifest... yet I can't understand the workarround:

This is my html:

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
  </body>
  <script src="options.js"></script>
</html>

This is my manifest:

{
    "name": "PriceTracker",
    "version": "1.0",
    "description": "Track your wishlist!",
    "permissions": ["activeTab", "declarativeContent", "storage"],
    "background": {
        "scripts": ["background.js","lib/require.js"],
        "persistent": false
      },
      "options_page": "options.html",
      "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        }
      },
      "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      },

    "manifest_version": 2
  }

This is the background.js :

'use strict';

// tested this and no success
function loadScript(scriptName, callback) {
    var scriptEl = document.createElement('script');
    scriptEl.src = chrome.extension.getURL('lib/' + scriptName + '.js');
    scriptEl.addEventListener('load', callback, false);
    document.head.appendChild(scriptEl);
  }




  
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });

  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });

});

and this is the options.js:

'use strict';

let page = document.getElementById('buttonDiv');

const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];

function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function () {
      chrome.storage.sync.set({ color: item }, function () {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);


function getData(url) {
  loadScript("require");
  let cheerio = require('cheerio'); //<-- this is where I get the non existent "require"
  let jsonframe = require('jsonframe-cheerio');

  let $ = cheerio.load(url);
  jsonframe($); // initializes the plugin

  var frame = { ...... };

  var gamesList = $('.offerDetails.category.row').scrape(frame);
  console.log(gamesList); // Output the data in the terminal
}

getData("URLTOPARSE");

I get the famous "Uncaught ReferenceError: require is not defined"... Any idea on what I'm doing wrong?

DisappointedByUnaccountableMod
  • 6,656
  • 4
  • 18
  • 22
Eunito
  • 416
  • 5
  • 22
  • You need to use a bundler. Learn about JavaScript module systems. – SLaks Dec 06 '18 at 00:28
  • 1
    You don't want cheerio for this, you want jQuery. – pguardiario Dec 06 '18 at 00:48
  • 1) Loading of ` – wOxxOm Dec 06 '18 at 04:51
  • Tried this - "But you don't need loadScript at all - you can simply include require.js in your popup html." and no sucess... Now I get "Uncaught Error: Module name "cheerio" has not been loaded yet for context: _. Use require([])" Googling... – Eunito Dec 06 '18 at 09:35
  • 1
    In order for `require` to work, the actual scripts should be loaded beforehand so that they register in the require's internal map. Instead of using require you can probably just load those scripts directly in your popup html. – wOxxOm Dec 06 '18 at 17:51

0 Answers0