0

I'm working on a Chrome extension that implements an algorithm that probably better ranks Google search results.

Now I understand that a search page is made of 10 <div> elements, so what I need to do is to reorder those 10 <div>s. What JS always confuses me is timing.

  • If I re-order those <div>s after the page is fully loaded, will the results be automatically updated, or do I have to re-render the page?
  • What about re-ordering those <div>s before the page is fully loaded? Is it possible?~~

Appreciate your help!

UPDATE:

Now I think my key question is, how to change page content before page is fully loaded. Something like "Ad Blocker". How can "Ad Blocker" change content of the page before loading the whole page?

DOM structure of a google search result page

dgcr924
  • 3
  • 4
  • As soon as you modify the DOM the page will reflect the changes. No need to re-render whatever that means. So whether you do it before or after it's loaded is irrelevant. If you only want to change order I'd do it using `display:flex` and then `order:X` where X is a number. See [this](https://css-tricks.com/almanac/properties/o/order/) – Miro Aug 22 '17 at 03:52
  • @miro okay good to know! Do you think there is a way I can hold off loading, reorder divs, then continue loading? Changing a loaded page feels weird. Thanks. – dgcr924 Aug 22 '17 at 04:18
  • It's unclear to me what you are really asking. As has been said, whenever you change the DOM, and stop executing (or the browser otherwise determines that an update should be performed), then what's displayed will change. Your primary determining factor is that the content which you want to change must exist prior to you changing it, unless your "change" is to prevent it from being added to the DOM. Thus, your question doesn't really make sense. – Makyen Aug 23 '17 at 05:55
  • @Makyen Hi. Content could exist but not show, right? I mean can I pause showing or hide the original content, change it then show it to users? – dgcr924 Aug 23 '17 at 06:00
  • Yes, content can exist, but be [`hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or not [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display)ed. "Pause showing" isn't clear. You could hide the orig. content, change it and then show it. But, in most cases, you would just change it, without the hide-change-show. Basically, the change part usually happens faster than is displayed to the user. All (or the vast majority) of times when you see *moving* on webpages it's an intentional effect. If it just starts *being* something else, that's a normal change. – Makyen Aug 23 '17 at 06:11

1 Answers1

1

Following up on my comment, here's a quick demo that reverses the order using nothing but CSS:

body{
  flex-flow: column wrap;
  display:flex;
}


.flex-item.one {order: 5;}
.flex-item.two {order: 4;}
.flex-item.three {order: 3;}
.flex-item.four {order: 2;}
.flex-item.five {order: 1;}
<div class="flex-item one"> Item 1</div>
<div class="flex-item two"> Item  2</div>
<div class="flex-item three"> Item 3</div>
<div class="flex-item four"> Item 4</div>
<div class="flex-item five"> Item 5</div>
Miro
  • 8,402
  • 3
  • 34
  • 72
  • Do you suggest using jquery to change css of the page? – dgcr924 Aug 22 '17 at 04:19
  • I'm not too familiar with extensions but it seems like you can inject `css` and `script` tags before the page is constructed. [See this](https://stackoverflow.com/a/19192010/559079). I would not to use js at all but then how do you know how to order the content? – Miro Aug 22 '17 at 04:23
  • I am thinking something like "Ad Blocker", who can change page content before rendering the whole page. – dgcr924 Aug 22 '17 at 13:13