Search for specific content on a webpage in Firefox using JavaScript

Question

Search for specific content on a webpage in Firefox using JavaScript

Currently, I am working on developing an extension that will provide grep functionality in Firefox. This feature would be extremely useful for filtering results and examining specific logging levels (INFO, WARN, ERROR) from log files accessed through the browser at my workplace.

I have successfully set up the extension boilerplate but now I need guidance on the necessary JavaScript code. Specifically, I am looking for a function:

function grepPage(regex){
...
}

This function should apply the provided regex to each line of text in a loaded file within Firefox and then display only the lines that match the regex.

Although I could spend a significant amount of time trying to figure this out on my own, I believe there might be simpler solutions available. Any assistance or hints in the right direction would be greatly appreciated.

Thank you in advance,

Ben

javascript firefox firefox-addon

Answer 1

Answer №1

There are two approaches you can take with this.

Firstly, instead of starting from scratch, consider utilizing existing resources like: http://api.jquery.com/jQuery.grep/

Alternatively, you could create a simple function without relying on jQuery or other frameworks.

function findMatches(regex) {

  var lines = document.getElementsByTagName('body')[0].innerHTML.split("\n");
  var matches = [];

  if (!regex.match(/^\//)) { 
    regex = '/' + regex + '/'; 
  }

  for (var i = 0; i < lines.length; i++) {
    if (regex.test(lines[i])) { 
      matches.push(lines[i]); 
    }
  }

  // The 'matches' array now holds all the matching lines for further processing.

}

Please note that this code has not been tested, but it is expected to function correctly. :)

Answer 2

There are two approaches you can take with this.

Firstly, instead of starting from scratch, consider utilizing existing resources like: http://api.jquery.com/jQuery.grep/

Alternatively, you could create a simple function without relying on jQuery or other frameworks.

function findMatches(regex) {

  var lines = document.getElementsByTagName('body')[0].innerHTML.split("\n");
  var matches = [];

  if (!regex.match(/^\//)) { 
    regex = '/' + regex + '/'; 
  }

  for (var i = 0; i < lines.length; i++) {
    if (regex.test(lines[i])) { 
      matches.push(lines[i]); 
    }
  }

  // The 'matches' array now holds all the matching lines for further processing.

}

Please note that this code has not been tested, but it is expected to function correctly. :)

Search for specific content on a webpage in Firefox using JavaScript

Answer №1

Similar questions

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

Aggregate information from an array containing multiple nested arrays

Experiencing the issue of receiving unexpected commas following a div

Leveraging res.render {objects} within client-side rendering

Is there a way to stop a for-in loop within a nested forEach function in JavaScript?

Uniform Height for Several Selectors

Package tracking static document within javascript module

What is the CoffeeScript alternative for () => { return test() }?

Switching images with a click using jQuery

Retrieving string array elements within a Vue.js v-for iteration

Instructions on how to configure an extension in geckodriver using Selenium with Python

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Tips for improving modularity in my frontend JavaScript code?

Dynamically binding image URLs in VUEJS

What is the best way to retrieve data from a fetch request within a GET function?

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

Error encountered with Ajax client-side framework while executing HTML code

How can we efficiently execute text searches on a large scale by utilizing static index files that are easily accessible online

How to correct header alignment in HTML for Google Table

Can elements be prevented from resizing in relation to another element without using position:absolute?