Control + F function

Hello all and thanks in advance for your help.

I am trying to implement a kind of Cntl+F button, which will look for the same term in a page.

To make it more tough, I need to search the term inside an iFrame. So I am trying to understand how it actually work…

Hi Pepe, welcome to the community!

Thank you for asking such a good question, I will try to give you an answer based on my experience building on PixieBrix.

First I would try to open the iframe page in a new tab. You can do this by looking in the Dev Tools at the URL of the iframe and then right clicking on the src attribute of the iframe tag and clicking “open in a new tab”

Once the iframe’s page is open in a new tab I would (on that tab) open PixieBrix Page Editor, then I would add an extension of type: Trigger. I would make sure that this Trigger is set to run on “Page Load”.
Then I would go ahead and add a brick, this brick would be called: Highlight.

I would configure the Highlight brick so that the “elements” field is of type “array items” (from the field type dropdown next to the input).

Once that’s set to Array Items, a blue button appears, I would click on the mouse icon and then select, ON the HTML page by moving my mouse over it, the paragraph or element that I want to highlight.

Another good trick is to manually write this CSS selector to match any HTML element that contains a specific word, here for example match any paragraph element p that contain the word term.

p:contains('term')

Then save the extension and reload the page that has the iframe (the original page not the one you opened in isolation)
P.S. Keep in mind this selector is case sensitive so if you want to match both term and TERM you have to add 2 elements to the array

2 Likes

Wow!! Thank your very much Orlando!

I am gonna try it and let you know if I finally make it work

1 Like

Thank you very much Orlando!! I made it work

:+1: Good job! Let me know if there’s anything else I can help you with!