altering displayed web page - javascript

I am attempting to write a firefox addon that will analyze the displayed page and change the text display to be hyper links (according to some algorithm).
I am trying to fogure out how can i parse the html document tree to retrieve the text in order to make it a link.
So i need not only the text but its position in the document.
Like if i had some kind of parser that will give me only text nodes or something, and then i can replace its content.
Is there such a thing at all?

You can insert javascript into every page so you have everything that javascript can do. A good place to start learning about Firefox addon development is the MDN https://developer.mozilla.org/en/Building_an_Extension

Related

Get Image URL/Address from webpage selection using Applescript/Javascript

I need a quick way to get the image URL, just like I would get if I right click on an image and select "Copy Image URL". I'm thinking Applescript, though others have mentioned Javascript.
This needs to be compatible with an Automator workflow and needs to work with Google Chrome, Chromium, and Safari, at a minimum.
More specifics:
I already have an Automator workflow that this will be added to.
The workflow begins with text and images that I have selected on a webpage using the mouse.
The processing of the text is working fine.
I just need a Applescript or Javascript or Shell Script (which I assume are the only outside code that can be added to an Automator workflow) that will grab any and all image URL's within the part of the page selected in step 2.
Images are NOT downloaded. Only the image URL is needed.
The basic logic is this:
Does selected input contain images?
If yes,
get URL of image(s)
pass to the next step
else continue
Any help or ideas appreciated!
OS X Services would be your best bet. Those work with text selections and are supported in most apps (e.g. see the Safari>Services submenu). You can also assign them keyboard shortcuts, which is very handy for repetitive tasks.
Basically, you want to get the selection as web content (i.e. HTML data, not plain text) then extract the URLs from that. You can create services in Automator, which includes various actions for working with web content, so I recommend starting there.

Display inspect element in a div

Something out there who had displayed the rendered html of a page in a div..
Lately I had develop a simple CMS for page meta taggings (dynamically add meta tags according to db record). All goes okay until SEO teams want a proof that it was 'really' rendering the metas.. I can prove to them using the developer tools but they do not want to manually press the F12 and check if the meta was rendered. They do want to display directly on screen e.gdiv.
And I have no idea where to start. Excluding my situatuon, Is it possible to grab the data in developer tools and display it on a div or iframe? Or the view source maybe?
I am searching for possible solution to this but unluckily, cant find one using javascript, jquery, php.
You could propose to make bookmarklets that your SEO team can run that would make JS alerts of meta tag innerHTML.
Otherwise as one comment says, they should just press Ctrl+U, Ctrl+F, type "meta", press enter, and get over it.

link to website automatically inserting text into textarea

On my website I want to link to a web-app, automatically inserting some text into a textarea.
Is it possible to link to the website doing something like this?
www.website.com/#document.getElementById('textarea').value ='inserted text';
This bookmarklet is working code, I just want to use a link to the website and somehow get it to run the bookmarklet automatically.
javascript:{document.getElementById('textarea').value = 'inserted text'; void(0)}
Any suggestions/ideas?
On my website I want to link to a web-app, automatically inserting some text into a textarea.
You cannot, unless that web-app provides a means for you to do so (for instance, passing information on a query string or otherwise as part of the URL). You can't create a link that runs JavaScript on the page after loading it, not without the page's cooperation.
On the off-chance that the target web-app is also under your control: You could, of course, add a feature to the web-app to do it. If so, be sure you just accept a value and don't allow executing arbitrary JavaScript code passed to you on the URL, that would be a Very Bad Idea unless the target page never shows anything user-specific (and probably even if it doesn't).

WebBrowser source outdated

I am trying to write an automation tool for a browser game that takes some data from the web page, in this case the data appears to be added using JS after the page has loaded, I assume this is where my issue is.
I'm trying to grab the text that the JS adds and save it to a variable, but when I try and find it using the WebBrowser component's DOM controls, it cannot find the text I need. The text IS there, you can see it on the browser window and the source should easily be found as I can see it when using Chrome's dev console/inspect element tool, when I target it using the DOM controls, VS makes it clear that it can't find it. I am 100% certain I was targeting it right and that I'm not pointing it in the wrong direction.
Is there a way for the WebBrowser to refresh/re-read the source without refreshing the page?
Otherwise, how would you go about working around this?
Cheers,
Tom.
One work around that springs to mind when puling text from something is to use MS Office document imaging. If the text always appears in a specific location on a page it should just be a question of taking a print screen of where the text appears and then running it thought to OCR. The advantage of this is it's pretty future proof, the game makes could change the method by which they display the text but as long as it's displayed you should be able to print screen it. :)

Manipulating website content with Javascript

I have 2 questions:
How would I make a small overlay open if a mouse hovers over any image on a webpage?
How would I find selected pieces of text on a webpage and make them into a link?
(similar to what Kontera or Vibrant does)
EDIT - Let me explain.
If a mouse hovers over any image on the website with a particular tag, I want a magnified version of the image opened next to it
If I have a word - "skills" inside my database and the webpage on which my Javascript is added has the word "skills" on it, I want it to be highlighted and linked to another page
1:
I know that in CSS you can use some hover keyword to effect the page (but I know little about CSS).
In javascript/HTML there is onMouseOver and onMouseOut, so.
<img onMouseOver="javascript:" onMouseOut="javascript:">
2:
You could use regex to find the text snd replace it.
document.body.innerHTML = document.body.innerHTML.replace(new Regex("skills|other|words", g), "<a>$&</a>"); //Note that this searches inside of the html tags so it is better if you know of specific locations to search for the text instead of anywhere in the html.
JQuery is a good javascript framework. You can do (1) fairly easily with a host of plugins. Jquery Plugins
As for (2), you would probably have to do that server side. Not sure what server technology you use, but when the view is rendered, you would have to have some sort of filter go through all the words on the page and create the links.

Categories

Resources