[PROBLEM] Replacing a div on a third party site with new content

[Kolera]

Hi! I'm working on this prank for my friends. I'm not an experienced programmer, and although i want to become one one day, I only have limited time to do this prank on my friends. So here's the deal. I use a webpage https://www.webpage.com/lol/data.asp (will be replaced with URL in code since this forum has limits on new users). On this site there is a div called "data_div" and I want to inject some code so when the page loads (when i load the extension ofc), the data in the div is replaced by the data in my HTML document. In this document i only have a table with new data that will replace the original table. How would i do this?

So far by reading forum posts and using google to help me, I've made little progress since i'm new to programming.

This is the code I got.

Manifest.json

{  "name": "prank",
  "version": "0.1",
  "permissions": [
    "URL"
  ],
  "content_scripts": [
    {
      "matches": ["JQUERY URL", "URL"],
      "js": ["jquery-1.9.1.min.js", "myscript.js"],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

myscript.js

chrome.extension.sendRequest({cmd: "read_file"}, function(html){
    $("data_div").html(html);
});

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "read_file") {
        $.ajax({
            url: chrome.extension.getURL("cont.html"),
            dataType: "html",
            success: sendResponse
        });
    }
})

and the HTML table content in cont.html.

This doesn't work, and if someone could make this work, or write me a thing that works I'd be most grateful.

The extension loads but doesnt do anything when i go on the site. I'm not even sure if I can access the div on the site and change it or if this is the right way to do it. I'm all ears guys, please, please help me! I'd be willing to donate some bitcoins or money via paypal if someone gets this workin!

[Philip M]

See forum rule 1.4) No illegal requests - Do not post requests that are illegal or break the usage terms of the service in question, such as where to download warez, disable pop up ads on your free host etc.

No-one here will help you interfere with other people's websites.

In any case, what you are wanting is not possible. If it were possible it would be a huge security risk.

It is your responsibility to die() if necessary….. - PHP Manual

[Kolera]

This is not an ilegal request. Its far from it. Google Chrome Extensions do support this kind of behavior because it's up to the user to install the content or not, so it's not hacking and changing the data in the db (i thought you knew that) it's just changing data locally.

[xelawho]

I don't know how extensions work in Chrome, but I know that in Firefox there is an entire rigmarole you have to go through to change the html of the content page.

Userscripts on the other hand can do this easily (and they're alot easier to debug, too). The only problem you face is in load time - even if you get your function firing at the exact moment the dom content is loaded (which happens before the body load event) you still get what we may as well call the Flash of Unstyled Content.

So in your case what you'd want to do is hide the table in question via css and then show yours once your script has had a chance to run.

Greasemonkey scripts can inject css styling into the head. see here:
http://wiki.greasespot.net/GM_addStyle

and can be set to run at document-start, meaning that you have a chance to hide the element before it is even rendered, then add a listener (domcontentloaded is the logical choice) to decide when to run your script.

Looking at the Chrome docs for userscripts, they seem to run at a point that Chrome calls document-idle, which appears to be decided on a case by case basis, making them possibly useless for what you are trying to do.

In short, does it have to be an extension and does it have to be Chrome?

[Philip M]

Originally Posted by Kolera

because it's up to the user to install the content or not

Well, how can that be a prank? Your victim is presumably not silly enough to install the software extension you mention. And if he did he would soon realise who the "prankster" was.

[Kolera]

thanks xelawho, now I atleast know the steps, i'll try to read more about it and do it.

Originally Posted by Philip M

Well, how can that be a prank? Your victim is presumably not silly enough to install the software extension you mention. And if he did he would soon realise who the "prankster" was.

It would be on my computer. It's a gathering that we're preparing. So we'll be looking at some score boards together that we said we wont look on our own. I had this friend owning me with pranks all year, i'm gonna make his scores look worse, see his face and then i'll just open up the real results. So it's important i dont see the content either! But ofcourse why would you trust me But if you do know something about this, and you're ready to share, I'd really like to hear it!

[Philip M]

Hmm. I tried to visit your page and got

The security certificate presented by this website was issued for a different website's address.

Security certificate problems may indicate an attempt to fool you or intercept any data you send to the server.

I think I will pass this one!

[Kolera]

dude it's a fake adress just for an example i can pm you the real one though.

[Philip M]

Your "prank" seems to me to open to mis-use for improper purposes. Perhaps not by you, but by someone else. I think you ought to get your laughs with a whoopee cushion or a Dirty Fido joke instead.

Why do you not copy the website in question, save it to local hard disk, adjust the content, then pretend to your friend that this page is the real one?

[Kolera]

Cuz if i do that I have to mimic all of the site not to be suspicious. I've thought about that. Linking www.homepage.com 127.0.0.1 in hosts file and linstalling apache server, the problem is I cant fake the site that well. So it would be easier to use a content script and either paste a div over that div or change the contents of the div. I'm still trying the above propositions.

[xelawho]

diverging slightly, fuddy duddy that I am, I had to look up what ofc stands for. Quite an interesting array of possibilities...
http://www.urbandictionary.com/define.php?term=OFC

[Kolera]

Thank you for off topic
Used in instant messaging to represent 'Of course' is the most common usage.

Any ideas on how to progress?

[xelawho]

I'd be going with firefox and greasemonkey if I were you - definitely simplest and possibly the only workable solution

[rnd me]

i saw a neat marriage proposal done as a news story using greasemonkey: an edit of the homepage and one sub-page resulted in a very realistic "news story" that the girl found while looking at her favorite news site. The "story" was about how she should marry her boyfriend. It worked, and now they're engaged.

[Old Pedant]

You know, this would be nearly trivial to do with some server-side code.

If you indeed linked the page to 127.0.0.1 in the hosts file and then put a tiny bit of server-side code on your machine, it would be really easy. PHP or ASP code, depending on what is installed on your machine.

But there's a really easy way to do this in Chrome, too.

You just have to enable Cross Site Scripting by invoking Chrome thus:

C:\Users\[username]l\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security

And start it in

C:\Users\[username]\AppData\Local\Google\Chrome\Application

That is, create a desktop shortcut to Chrome and then use the PROPERTIES to alter it to read like that.

Now when you click on the icon, Chrome starts with cross site scripting enabled. WARNING: Won't work if you have ANY normal Chrome window open already.

So before your friend comes over, you click on that icon and bring up a http://localhost page (put some innocuous looking content on it) and have that page continuously monitoring to see if there is another window open. (Check every 10 milliseconds, say.) And when it does open, then use JS code to go change the contents of the other page.

Less trouble than using a Chrome extension and nothing new in JS coding to learn.