Can a browser plugin lazy load images? - javascript

Before spending time learning the plug-in architecture I was hoping someone could let me know if what I want to do is even possible and possibly offer some guidance.
I've never written a browser plug-in before but I have am an experience programmer who is pretty good with JavaScript which I understand is what at least chrome extensions use. I have written a small app for the Samsung TV platform.
One webpage I visit on a regular basis loads a lot of images on a page and I don't want to wait until the developers improve the site. I'm hoping I could build a Chrome or Firefox extension that can identify when I'm viewing a page on that domain and prevent images from loading until some user interaction.
I was hoping when I changed the content settings in Chrome to not show images that there would be some way to individually load images (maybe a "show this image" in context menu, but there wasn't. Nothing came up when trying to search for an existing extension either.
Is it possible to have an extension manipulate the DOM to prevent the page from making requests for the images? I'm thinking replacing the src attribute with a local image as a placeholder, then changing it back depending on user interaction.

Related

Webpage input element, not URL / Open Site Dialog

I am working on an application that asks individuals to paste links to their social media and other relevant sites as part of the setup process. These later get turned into links on a compiled HTML page.
We are seeing a user issue that is arduous to deal with. When setting up the account on mobile, individuals do not understand that they need the website link to these various places, they try and open the target sites app instead (Facebook as an example), or they stare blankly unsure of what to put in the box or how to proceed.
I'm looking for a solution to this conundrum to help people achieve their ultimate end goal of putting the link on the resultant page.
I tried an iframe approach, whereby the thought was to load the target site, allow the user to navigate to the desired page, and hit a done button. Obviously this approach ran into several road blocks due to security restrictions and frame busting implemented by the various sites.
What would be great would be something like the file input, but for websites instead. We have the "URL" input; however, that only checks the URL for validity, I'm more interested in an approach that would open something akin to the file dialog, that would allow a user to navigate to a site and hit "done"
I've not been able to find anything that comes close. I'm seeing if someone knows something I do not, or has an idea I haven't yet tried. Ultimately, I'm trying to make it easy for an average consumer to choose the target for a link. (I'm fully aware how easy it is to open a browser tab and copy the link, I am truly supporting consumers who find that somewhat difficult / confusing)
Thank you for your time and consideration

Using Internet Explorer, from the UI of a website is it possible to view the Javascript that is behind certain functionality

I know a small amount of web development but not enough to make it a career. I am working for an organization that is restricted to using internet explorer and one of the main sites that we use is constantly undergoing changes and always has bugs.
I'd like to see if I can try to see some of the code behind the bugs sometimes. When I use developer tools on the site, I can see that there are about 20 or more JavaScript files downloaded. Each file is a few hundred to a few thousand lines long. Is there any type of tool that I can use in Internet Explorer browser tools that can show me what JavaScript is being executed when actions happen on the webpage?
e.g.: I click a button and a form appears. I then click a button on that form and a snackbar appears, but it always appears in random places. Is there any way I can see the JavaScript that was executed to display the snackbar, rather than search line by line in the JavaScript?
Well the answer is yes, but for more complicated sites it will be a painful experience. Without concrete knowledge of the javascript framework/library used it will often be near impossible.
Having the sourcecode for the website would help greatly. When the website has minified javascript it's pretty much a must.
Sometimes an element like a button will have an onclick attribute which makes a function call. Other time some function is attached to an element from javascript by addressing it by it's id etc.
Searching through the scripts using the F12 tools in Internet Explorer is very limited.
You can of course download some of the javascript files so you can browse them in a text/code editor. They may improve you ability to search etc.
If you can find some entry point you could use breakpoints with the debugger and step through to see what happens and what gets called.

make webpage recognize my own device for debug purpose through javascript

I build my site with Joomla, by default the page is responsive. I want to turn off responsive design, but there is no turning off option on back-end, so I had to use:
$('meta[name=viewport]').attr('content','width=1200px');
to turn off responsive so that I didn't have to bother with mobile layout .... for a while. Now the site is live, and I am about to start to make the page responsive. I want to debug this on the live page but don't want other users to see some messed up page when I am still tweaking it. So I am thinking whether there is a way to make the page recognize my own devices only.
I understand that I can use login system, but that would be too complicated. The simplest way I can think of is to do this
if (location.search.indexOf('nores') < 0) {
j('meta[name=viewport]').attr('content','width=1200px');
}
and then open each page like this mystie.com?nores. But this is still a little troublesome, besides I can't freely navigate pages.
The other way I was able to find out is to add some custom string to userAgent, I think this can be done through chrome's developer tools, but what about mobile browser? Similar is using localStorage, on PC, I can just open the page, go to console and do localStorage.setItem('nores',true), but how can I do this for my phone?

How to ink to another .html page within Chrome extension/app?

I am building a chrome app for a client that will run in kiosk mode to display in their stores. Right now I have an index.html page that links to about 30 other pages. However, when I click on a link in the app I get an error...
Can't open same-window link to "chrome-extension://leghflngpfmomcflabikghiemaajadne/poweredge"; try target="_blank".
So I tried target="_blank" and that tries to open it in a new chrome window.. no good. I've been reading a little bit about using webview and sandboxing pages but they both open the pages in a new window and it just doesn't look good.
Is there a better way to do this? Right now my only idea is to place all of the content on the index.html page and turn on/off sections of the content with jQuery. I'd love to keep all of the pages separate though, just for my own sanity.
Thanks!
Navigation is disabled for the Chrome Apps platform. In theory you are supposed to make single-page apps - so your turn on/off approach is the "intended" one.
No-one stops you from having several windows though - suppose you have an options page, it wouldn't be strange to open it separately (via chrome.app.window.create)
As stdob mentions in comments, a workaround may be possible by using <webview> with a partition blessed to show local resources. It's not clear though if it will allow access to apps APIs.

How can I stop google.com from pulling my cursor away from the URL with Greasemonkey (or Adblock)?

How can I stop google.com from pulling my cursor away from the URL and focusing it on the search box with Greasemonkey?
I use google as my home page and hit the home button to open a new tab, maybe not the best way to do it, but it is habit. I will start typing in a URL and when the page is done loading the Google search field pulls my cursor away when I'm half done typing.
I know a decent amount of javascript but I don't even know where to start when viewing Googles page source. If someone could write a script for this I would love you forever, and I'm sure many others would too!
EDIT:
Possibly the better question is how to do this with Adblock Plus?
EDIT#2:
Is it possible to run javascript before a specific page loads with a firefox plugin? Or, is it possible to block javascript on a page before it loads?
I am not looking for any "work arounds" I am looking for a fix. A fix to remove or disable "document.f.q.focus()".
Edit#3: What about a bookmarklet? Could it be possible with that?
See http://noscript.net/
It's a firefox plugin that disables javascript on sites. You could configure it to just run on google.com, I think (if you do not want it to interfere with other sites).
Noscript is more secure, but it can be a pain because it uses a whitelist approach.
Or you can use YesScript, which operates a blacklist instead.
Re: "I just want to blacklist a specific line of code on 1 site"...
There is no addon to do that. You can block all scripts from a site using NoScript or YesScript. Or you can block a specific JS file using Adblock.
You cannot selectively block bits of JS that are embedded in the main page, except in rare occasions GM can sometimes work around it.
This sounds like trying to use an anvil to smash an ant. Or some other, better, complex-tool-for-simple-job analogy. I would suggest either setting your home page to a blank page, or opening new tabs with a new tab button or Ctrl+T.
I do not believe it is possible, just looking around a bit. The focus actually comes from the onload attribute of the body element:
onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo27.png'"
As you can see, document.f.q.focus() is your issue. However, I can't get a GM script to run before that onload is executed. I'm not too experienced with that particular issue, though: any GM scripts I've written are novelties whose load order doesn't matter a great deal, so long as it's done after the page is loaded.
If you know how to make GM scripts run before an onload (on a very light webpage), then it's as simple as saying unsafeWindow.document.body.onload = null.
You cannot do this with Greasemonkey, because GM cannot manipulate chrome elements enough to set focus to the address bar.
You cannot do this with Adblock for the same reason, and because Adblock just stops external elements from loading.
None of the FF scripting add-ons could do this either, as far as I can tell.
You could write an extension/add-on to reset focus, but the real problem here is that the user is ignoring the tools in place for the job.
As Scott Cranfill said, use Ctrl T to open a new tab.
If a button is absolutely desired, Firefox already provides one. Do this:
In the Firefox menu, select View --> Toolbars --> Customize... .
Find the "New Tab" icon and drag it to your toolbar.
Click that icon, from now on, when you want a new blank tab.
Done!

Categories

Resources