Webpage input element, not URL / Open Site Dialog - javascript

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

Related

Chrome Extension: Detect reason/initiator for page change

A common question I've seen is "How do you detect if a user is leaving a web page?". I've reviewed the answers for almost all of these questions, but they often don't provide visibility into the initiator of that redirect.
I'm trying to tell from a Chrome extension where if a tab changes pages:
Did the user use the address bar to change pages?
Did javascript on the web page cause the page change?
Did the user interact with an HTML component which caused the page change (i.e form or anchor)?
Did the user simply close the tab?
I might be missing some other variations, feel free to include additional ones in your answer. What I'm really after is: "Was the page change intended by the website, or did the user arbitrarily change the page?".
Some of the questions I listed are not directly possible. For example, my first question about if the address bar changed has been addressed before with no solution. A valid solution to this would be through process of elimination. If you could prove that question #2-#4 were not the case, then it would only leave #1 as the option.
#2 is another interesting one because there are many ways to change the page through javascript. You could set window.location.href, you could use window.navigate, you could use window.history.* (back, go), etc. Chrome DevTools is able to trace back most javascript redirects though, maybe that's an angle.
#3 similar to the problems with #2, there are problems with the number of elements that can cause page changes. Also, any solution would need to work with dynamically generated content as well (i.e $([some selector]).on(...).
#4 is solvable via Chrome's tabs API.
If you have cross-browser approaches, that'd be a plus. Thanks.

Can a piece of code be dynamically placed on every webpage a user visit

So we have a program that the user can use by copying text from a webpage they visit, alt+tabbing to the program, then pasting it as input. It would be more convenient for users to be able to do it directly in the site.
We were thinking of a panel that would be small and expandable, following them to each site they visit. Is this possible? Either a snippet of code that is auto pasted, or a JavaScript command called that would dynamically paste the code (is Scratchpad any help here, at least in FireFox).
We've never made a FF add-on, but it seems like if the dynamic panel idea falls through, an add-on would be the next best thing.
Basically, users should ideally be able to copy text, either enter a key combo or click a button, see the interface and paste in the text. Would either of these methods work?
A browser add-on or a userscript could certainly do this.
You can also write a userscript and use a user script compiler (such as this one) to convert it to a "true" Addon.
Alternatively your application could act as a HTTP proxy and inject it dynamically, but I'd guess that this would probably be more complicated than the other two approaches.
This site Polyvore used to do something similar, although in the 2 mins hunting around I could not find it, but I have used it and I think the technique was used by Google and Digg for a while. From what I recal it involved iframes and a bookmark in your browser.
Basically you could download a small piece of code that would sit in your bookmarks bar and this would allow you to navigate to a fashion website click on the bookmark copy a picture and insert it back into Polyvore.

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!

Disable Clipboard & Print Screen on webpage

i search online but can't get satisfactory result
i want to protect images on my website, i know i can disable save as, right click.
the real question is can we Disable Clipboard & Print Screen with JQUERY or java script.
so no image copy from print screen.
thanks
Not from a webpage.
Even if you were able to disable these from within a browser, it will only stop a casual user. If you make a resource available on a public server (as you must in order to let a casual user view it), there really is no way to stop someone from retrieving that resource. After all, you actually want the user to retrieve the resource.
No. I am pretty sure you can't do that. Print screen is a part of the OS, not the browser. I would hope that web sites weren't able to mess with my OS like that.
You can certainly throw roadblocks in front of people trying to download an image, but short of watermarking, there isn't a great way to prevent people from getting your image (that I know of) if you make it available online.
No you can´t. And you can´t disable right click in a bullet proof way either.
The only way to protect your images is by watermark them.
Print Screen is a function of the operating system, and as such, cannot be disable by a webpage.
Actually, you can't disable anything. I know you technically can, but most browsers have an option to not allow disabling of those things. And really, worst case scenario, anyone can view the source of your site and copy the image's url.
In short, don't worry about it so much. Some people will copy your images, but this is nothing new on the internet, so you'll just have to learn to live with it. The only thing that any of your work will do is annoy some people, and make other people have to try a little bit. So, it's really best to not do anything. Place a copyright notice on your site and most people won't try to blatantly steal from you.
The only way to do what you're requesting is to incorporate OS-embedded DRM into your content (think HDCP). This can prevent even screenshots from being done but will severely limit your audience and is an absolutely horrible idea - don't do it!
If you really want to protect your images, the best way to do it is with watermarks and providing very low-quality images on your website and the high-quality stuff in some other way. The watermarks aren't a perfect solution but many consider them good enough.
Well there is no direct way to do that, but I used javascript to hide the content whenever the user hovers outside the website. This forces the user to actually activate your page to be able to see its content. This will activate the javascript that prevents prnt scrn too.

Gracefully closing a frame (toolbar) around an iframe

I've created a tool that is used with a fairly popular music retailer.
The tool provides an enhanced search feature (transparent last.fm results, no ads, no lameness, nothing creepy) and I've found the most useful and unobtrusive way to display the search is as a toolbar using the much maligned iframe. This allows users to load search without stealing the users focus.
Not being a particularly big fan of iframes I thought it would be trivial to add a “close this frame” (ala Google image search) link allowing users to quickly and easily regain control of their browser.
However unlike google, I doen't know what the location of the content in the iframe is (only where it started, via src).
So now I find myself in world of XSS and all the security related concerns.
Using Javascript I've added 'back' and 'forward' buttons with the history object called from links in the parent (when a user does a search the results load into the iframe, so the back button allows them to go back to the primary site after their done using/perusing the search results).
Is there any way to call the current location within the iframe and reload the page (now sans frames) to that location?
I've checked PHP $GLOBAL/$_SERVER variables to see I might get lucky. I understand that there are security concerns, but I don't see how this particular function would be any different then history.back() where the browser makes the call itself without 'notifying' my parent frame.
I know I can retrieve the src location from the iframe itself, but of course that presumes the user doesn't navigate beyond this page, and if they do they don't mind losing their current location and being redirected back to page called initially by the frame (...ah...).
It almost seems like frames are designed to steal windows with no means for gracefully 'breaking out' and preserving integrity of the users session.
No wonder people hate them. :)
On Google image search when you remove the frame it functions as you currently propose, by returning to the original frame source. For XSS reasons, finding the current location shouldn't be possible, and if it was it would be considered a bug and fixed in subsequent browser patches, so it might not be best to rely on such a quirk if one existed. A way to elegantly break out without revealing location would be nice, though. This might be something you can propose to the HTML5 group.
Not that it would really be all too helpful, but the closest you can come is detecting if someone actually left the original frame source page. When you navigate a frame the history object maintains entries, and if your original history length when the page loads is greater than the history length when someone clicks "Break out of this frame...", then you know they were browsing in the frame.
I appreciate both you (hal10001) and Zach taking the time to answer. It appears I'm suck (as I suspected) because of the xss security concerns.
I suppose I could simply wrap all the content within a php based proxy, but that would clearly entering the creepy zone, not to mention the added latency and what-not.
I'll keep spinning the idea incase I do come across something sane and usable, but until then I guess I'll just use the slightly less freindly approach of promoting the original frame and wiping out their current location (and if they don't like I can revisit the iframe/toolbar situation.
Thanks again!

Categories

Resources