Modifying Google Search Results Page - javascript

I have written a greasemonkey script which will do GM_xmlhttpRequest
to the next 2 pages of the google results page.. i.e. if my current
page is 1 then my script will do GM_xmlhttpRequest to page no 2 and
3..
Now my script will extract out all the urls from these 3 pages and
will reorder them
For that I have done:
unsafeWindow.addEventListener('load',Reorder,true);
function Reorder()
{
alert("onload fired")
..........
..........
// some code overhere to collect all the urls into an array
// and to reorder the urls in the array
Now I inject these urls into my reference pages i.e. I keep a
reference to the nodes where I am supposed to append these urls as
childNodes.. and along with that I modify the links to page no. 2 and
3(at the bottom of results page) so that now they'll point to my these newly dynamically generated
pages. For that I modify the onclick attribute of these links that'll
open a new window in the current window itself and will write the
modified responseXML object to the newly created window.
Now everything is working awesome i.e. url
extraction, reordering, creating new window, writing the responseXML
object ..
But the problem is that when my these modified links are clicked and
my newly generated window replaces the parent window it doesn't give the alert of "onload fired"
...infact it doesn't stop loading i.e. it displays the desired
content but is never fully loaded since status bar doesn't shows
"done" in fact it shows "waiting for clients1.google.com"...
So does anyone knows what exactly is going wrong over here.. is it due
to some script running on google search page that is somehow
synchronised with the contents of the page...
Basically for those who do not know how greasemonkey will work.....my code is just removing all the anchor tags that contain url and inserting similar anchor tags with different urls...the question in nutshell is that i am just making a new window and doing document.write(this newly created html page)...and other than the urls I am not changing anything....
so basically are the scripts somehow synchronized with the urls present on the page or does it really matter to the scripts what data is contained within as long as the body contains the same DOM tree.
Please people whatever you know or have idea about it.. please tell me...
i need to finish this thing quickly..

When you use document.write to write content into a new page, you need to use document.close() to tell the browser that you're done - until then, the browser thinks there is more content to come and continues to display the loading icon.

Related

How can I get a div that exists in the website's source code but not exists in the document?

I want to make a Chrome extension to classify the people who I am following in the website www.zhihu.com, because this website don't have this function.
when I view the source code of the website, I find my personal data is put in a div that whose id is named data.
So I want to obtain this div. But, when I log this div in the document, it becomes null.
Why does this happen? And how can I get a div that exists in the website's source code but not exists in the document?
It could be several reason: first of all, the view source is not a live representation of the document, it's the source the server has sent to the client. It means, it might be no longer valid. Try to load this in the address bar (of a modern browser, possibly):
data:text,<div>hello</div><script>document.querySelector("div").remove()</script>
And check the view source. The source will contains the div, but if you use the inspector from devtools you will see that the div no longer exists (of course, we removed that by JS).
Another scenario, could be that you're logging from a different frame context: if the web pages contains frames, you might be in a frame context where your div is not present.

Is it possible to make changes to a page source content variable through Ajax

Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page

Reload iFrame, wait till it is loaded, open URL in same iFrame

so when it comes to Javascript, I have no idea what I am doing.
I have a main page, with two iFrames. The main "content" iFrame holds the main content, in this case, the results from a MySQL database SELECT. The bottom iFrame is used to add rows to the same table.
When the 'add row' form is submitted from the bottom iFrame, I want the 'content' iFrame to load the list of results, and scroll to the newly added result.
I use
Currently, the only way to make this work that I have found is echo-ing the following code once upon successful row entry:
parent.document.getElementById('content').contentWindow.location.reload();
parent.document.getElementById('content').src = '../pages/results.php#".$id."';
The $id variable is set with $mysqli->insert_id;
The above code works, but it's obviously bad coding, on slower connections, for example, I can imagine the browser will fail to change the src as the reload action is still performing.
So, what can I add to my code, or what can I change my code to, to make the javascript either:
Reload the 'content' iFrame to show the new row and then navigate to the anchor to scroll the user to the newly created row. or
Do all of that in one simple action (I've found just using the bottom line of the two lines on it's own doesn't work, so the reload seems necessary to me at the moment.)

How to read current page's HTML to access an element from a Chrome extension?

I'm working on my first chrome extension. My extension works on specific pages.
I need to access the current page of the user, and get values from the 'table' element in the page.
Do I need contentscript page or is background.html enough? How do I access the table element then?
Read this SO question in order to understand the difference between content script and background script. Now, back to your question
Since you want to get access to the DOM element of the current page, you need to do the following:-
In your manifest.json, make sure you have the url pattern which matches the current page url.
Make your your content script runs after page load on the current page
Once you ensure 1 and 2, you can use simple query selectors to get access to the table element and get the values you need.
Now it depends what you do want to do with the table values you have obtained. If you need them in the background script for storage purpose or some other purpose, you can use Mesage Passing to send the values to background script.

How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.
I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...
Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?
Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
The bookmarklet itself reads as follows:
javascript:void((function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());
document.body.appendChild(e)
})())
This just injects a new script into the document that includes this file:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.
At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.
You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
So the bookmarklet would look like:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
The ability to add an element to the DOM
The ability to update innerHTML of that element to be the markup you want to display for the user
Handling for the AJAX form processing
The window effect can be achieved with CSS positioning.
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.

Categories

Resources