-2

I am a complete noob so apologies in advanced for anything I say that is very basic.

Just to be as succinct as possible:

-I work in customer support but want to create a simple tool that can help us with our work.

-I want to create an extension that will crawl the html of our internal tool (that we access from Chrome) to return variable data contained in it to a simple pop-up or display

-There are a number of parameters (around 5) and each of those parameters have around 3 possible options of results. All of this information appears on the HTML version of the site so no need (I think) to send any requests to the server side.

-I am OK with the basic structure of a Chrome extension and don’t need that much help with anything other than some direction on what type of functions and logic I would need to do this.

-I am a noob but can follow instructions and tutorials for anything I don’t understand. Right now, I just don’t know whether I would need to use Fetch or something else to do this job.

-I have followed some tutorials on creating crawler extensions but none of these meet my specific needs as I really only need to data from around 5 lines of the HTML and then return this data to a display.

Thanks for your help guys!

Jack_noob
  • 1
  • First of all, do you want this scrape to watch the webpage’s values even when the page isn’t open? Secondly, do you want it to be automated? If so, maybe you could put a function in your background script that fetches the webpage on an interval and parses the page to extract those values. For parsing, you would use some library like DOMparser to locate the html elements you care about and extract their values. Also, where do you want this display to be? do you want it to show in the extension’s options panel when you click the icon? If so, you need to send it data from background script – djangodev Jul 07 '22 at 22:08
  • Thanks so much for answering Django! I wouldn't need to scrape the values unless I am on the specific page. The way our tool works if that it would be the basic domain and then the customer specific token for example www.domain.com/0djrodhajdk. We would need to be able to use it on any of the customer profiles but the domain remains the same on all of them. The flow you suggested seems perfect and I can research those so it's really helpful! In terms of the display, it would ideally be a popup window that appears on the top right of the browser and displays some interpreted data – Jack_noob Jul 09 '22 at 10:01

1 Answers1

1

So from what you've said, it sounds like you need to get the DOM content, and extract the values you need via parsing. You can search for methods on that - here's one method.

As they suggest, you should "brush up on message passing and the tabs API". The tabs api will let you get the current html from any page (it doesn't matter if your extension is intended to scrape multiple URLs or a single URL - as long as the HTML element you're scraping is existent, you'll get the values you want. If you want your extension to only work on certain URLs, such as this dynamic customer URL, you can specify that in a content-script argument in the manifest.json as demonstrated here)

Then you can pass those values from the background.js to your options UI.

You can trigger the scrape manually with a button in your options UI which calls the scrape function you write, or you can have the function run automatically- say every time the page is updated like this

djangodev
  • 363
  • 5
  • 15
  • that information is super useful and I will definitely follow that setup so thanks so much! The basic structure of the extension directory I have managed to somewhat figure out and all I needed was what you provided. The example is very useful as it's basically the same as what I am trying to do. Thanks !!! – Jack_noob Jul 10 '22 at 22:51