Chrome extension scrape text from one page and display inline onload - google-chrome

So I'm having a bit of difficulty getting started on this as I'm quite horrid with javascript. My goal is to scrape some text off of a page (that has nothing but the text I want on it) and load it inside of a floating div or something when I load another page.
In essence:
timer.html contains a timer that displays the current time and self-reloads every 10 seconds.
page.html is loaded, I want to display timer.html at the bottom of page.html
Note: I don't own any of the source involved outside of my test envir, otherwise there's a million easier ways to do this.
Can help me with resources or code examples?

Related

Adding a interactive gui to my VB.net application

OK. So first, I will try my best to explain so good. My friend has gotten cursed out on this forum for not explaining, so I will explain. :)
Ok so I have my program built and all. But then it hit me! Wouldn't it be better to add a news feature? One teeny tiny problem? I cant? How would I implement a interactive code into an HTML page.
Like can i connect a button to a URL that will make the program do something. Almost like you can open cydia tweaks with there identifier and url EXAMPLE: http://handleopenurl.com/scheme/cydia And then i can add urls so i can update the program, without updating the files.
Or even just a featured news thing would be nice. But how would i implement this perfectly. I tryed a webrowser, but the page is too big for it. I am good at html, not much at css, i mostly use Adobe Muse http://www.adobe.com/Muse
Last question. Kinda defies the first thing i said about having my program finished.
Is there a way i can add a plus button and make it add more buttons and more labels and all?
This would help with allowing users to customize more then what the program can handle. By The Way, its a winter board Theme Maker. So I have a bunch of icons with there bundle identifiers and I create the folders with VB.net and all that stuff. But i want users to be able to click a plus button to add MORE text boxes and file browsers.
Any ideas? Maybe DIM 1 as NewFileBrowser? But i need to move all the buttons and i need it to be able to be clicked an infinity amount of times. I can do the coding for all of these buttons, but i jest need to know how to create them <1 Move them and the button so that the button goes further down each time, and more boxes will go further down. Much help apreciated. THANKS:)
EDIT:
Are you trying to say that you're wondering how to have a web browser control in a vb.net >app, which displays a web page, and when a button is clicked on the page, your app detects >it and does something? – Thraka
That sums up the top part. I am using windows forms, and it is coded in VB.net
If you get the object you want, like the button, you can hook the event and have it call code in your form.
Find the object using the Browser.Document.GetElementById method.
With that object, add an event handler to the Click event.
See http://msdn.microsoft.com/en-us/library/system.windows.forms.htmlelementeventhandler(v=vs.110).aspx for information about the event handler used

Add a background music in website and music should not start from beginning if i goto other page

I want to add a background music to my website, but i want that music to play continuously across all pages.
For e.g: i have music which is approx 10min, i am on Home page for 2 minutes music starts from 1 second, when i goto other page the music should start from 2 minutes 1 second.
i've searched across Google & StackOverflow but unfortunately didn't found any answer as per my requirement. :(
i just wanted to know that is it possible to do??? If yes then what kind of mechanism is used for that???
As far as I know, this is not quite easy to accomplish.
There are two practices you may follow, with the first being the most common (IMHO).
Sites that have a music background that doesn't start all over when you navigate, mostly use Ajax or similar methods to navigate, instead of allowing the page to normally refresh. This is mostly common with flash websites, but it is possible to do with Ajax refreshing just the inner content of your site.
The second way would involve somehow passing on a variable that remembers where the user was, but you cannot avoid the loading gaps, and the whole result would be very uncommon and not really pleasant.
There's a few ways you can do this off the top of my head. The easiest would probably be some JavaScript that would load the content of the next page into the current page:
<div id="content">[Your changing page content goes in here]</div>
A link:
Some Page
Some JS:
function loadNext(page){
//using jquery
// assigning to a var like this lets you do things like abort the call
var jqxhr = $.ajax({type:"get",url:page,dataType:"text"});
jqxhr.success(function(result){ $("#content").html(result); });
}
Another, probably simpler way is to load your page content into an iframe and then just have them navigate within that, that'd be a lot safer too as it won't break if people have JS disabled.
<iframe src="homepage.html"></iframe> //You'll need to size this to whatever the content needs obviously, like 'style="width:100%;height:100%"'
Both of these solutions require that your content be able to be separately loaded from the wrapper of the page, so that things like headers and footers don't duplicate infinitely as you navigate around.

html transfer information from one page to the next

So I have been looking into this for a few weeks and have come up with nothing!
I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.
I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.
Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.
If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!
I've come up dead on all my research on this.
EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx
I've created a JSFiddle to demo this functionality using jQuery.
We iterate through the list of brand links in the ul:
$('#brandListing a')
Capturing a click event on each:
.click(function(ev){
jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:
ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);
You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.
EDIT
The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Source
And then after your document is ready, set the iframe src using getURLParameter('path').

Blank time between resource loading under network inspector

I've been working on a new website and practicing my JS/jQuery/AJaxy skills. Last night I wanted to take a look at how long the page was taking to render and see if there were any areas I could clean up to increase speed. While the page loads in about 200 - 300 ms every time, I'm seeing a large amount of blank space between resource loads under the network inspector.
http://i.imgur.com/7ng6m.jpg
Has anyone else seen this or know what I can do to minimize that time (talking about the blank space between like the html and the first css file)?
Quite possibly it is caused by the extensions you have installed. AdBlock, LastPass and Google quick scroll took altogether about 200 ms on my machine.
Unfortunately, these extensions are invoked on every site and block loading the additional resources.
Try it with out of the box browser setup, the loading time will increase tremendously.
You've got a bunch of images loaded just after the page has been loaded (the load and DOMContentLoaded events have fired - the blue and red vertical lines across the Timeline). I can see that the images are loaded by the JQuery library (the Initiator column), perhaps to build a gallery or something.
So, the case is that JQuery loads the images after the page load, presumably in the onload handler (this can look like $(document).ready(handler) in your code, but other options are possible, too).
The delay between the initial page load and requesting the first resources is almost certainly caused by Chrome extensions. To find the culprit: Record a timeline in the Timeline tab in Chrome Developer Tools; Identify the scripts that are running during the Parse HTML phase; Work out which extensions they're from.
To record a timeline:
Open the timeline tab and click record.
Reload the page and then stop the recording. (A couple of seconds should be enough.)
To find the culprit:
Find the first main Parse HTML block on the timeline. On the row below you will probably see one or more Evaluate Script blocks. These are the culprits.
Click on one of the Evaluate Script blocks and find the script name in the bottom pane. Mouse-over the script name. The tooltip will have the URL of the script, which should be of the form chrome-extension://{long_identifier}/{path}
Memorise the first few letters of the identifier and search for it in the chrome://extensions/ page. This tells you which extension is causing the problem. Try disabling it - you should see a difference.
Repeat for the other Evaluate Script blocks.
In my case, I have 20 extensions installed but only two were causing a delay: LastPass and Fauxbar. I've chosen to leave them enabled because for me the productivity benefit of these extensions outweighs the downside of the added latency.

Show html images only when the item is being displayed

I saw this on Hulu.com once, but can't get it to behave that way.
The problem is that I have a "marquee" that slides when you click the next button. There are 2 images per section, a total of about 40 sections.
The issue is that the browser loads all 40 * 2 images and it is consuming bandwidth like crazy.
Is there a way to, saw load the images when the "slide" is shown?
Load them in ajax. Look up jquery for that, it's the simplest way.
It also look like you're doing a carousel. Maybe you could use one of the many existing solutions that already handle assynchronous loading of data.