I am attempting to call an element in a third-party website to refresh the webpage, but the "Refresh" button seems to be contained in a separate applet. I have been researching various methods of accomplishing this (and I am decently familiar with HTML, CSS, Javascript etc.), however I have been unsuccessful in identifying the element in the webpage, and subsequently how to actually call the button.
Here is an image of the "Refresh" button - when I hover the mouse, there is no indication of a link or function to call, and when I use the browser inspector it seems that I can only investigate the border of the page which has the actual HTML:
I have tried to use the Firebug plugin for Firefox to view all the script for the page, but it only seems to show me the 'body' or in this case the frame of the website (not the applet itself). Is there any easier way to find the element, or a program that I can use to simulate the clicking of this "Refresh" button?
Related
I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv
I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)
Context:
I am creating a Chrome extension that hides certain elements of certain sites
In this specific case, I'm trying to hide the main feed of YouTube's home and trending pages
The script has no trouble on all other sites, including Twitter, Facebook etc.
But on YouTube, it's causing the page to crash
Roughly speaking, what the script does is:
Observes any mutation on document (childList: true, subtree: true, characterData: false)
Searches for the existence of certain nodes in the document
Changes some of their styles to hide them (or if already hidden, does nothing)
Adds a small menu into the node with a button to unhide the node
The MutationObserver is never disconnected because it needs to keep watching in the case of single-page apps where the page stays the same but different nodes come and go
So it keeps checking that the hidden nodes are still hidden every time there's any new mutation to the document or its subtree (heavy load on performance, I know - but it works fine on every other site)
YouTube issue:
YouTube always throws up a warning as follows, even when I am not running my script on it (in other words, YouTube's code is already a bit suspect):
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
The specific event is either touchstart or wheel. This error can display in the 100s of times even when I am not running my script.
When I run my script, this error seems to blow up even more, and display more times than usual
Eventually, the entire page crashes or takes far longer to load than it should (but it does sometimes eventually make it all the way, showing that my extension is not completely breaking down)
There's also another warning that tends to show, [Violation] 'readystatechange' handler took <N>ms
This warning shows far fewer times than the other (see screenshot below)
Interestingly, usually loading youtube.com home page when starting off in a new tab is fine, and my extension successfully hides (i.e. changes styles on + injects some extra HTML into) the node it's meant to hide
I then get a crash or extremely slow page load when I try to navigate within YouTube, e.g. specifically going to the Trending page using the left-hand side menu, OR occasionally when I hit refresh on the page
Things I've tried:
Overriding the default addEventListener method on EventTarget.prototype, which I have so far failed to do successfully - not sure I understand how to do this despite trying a few methods from SO
Blocking the script that this error originates from (desktop_polymer_inlined_html_polymer_flags_v2.js) using the Chrome WebRequest API, but that doesn't work because it breaks the whole page
Questions:
Is it likely that this 'non-passive event listener' warning is interplaying with my script to cause the crashing of the page? Or that my script is causing more listeners to be added than the page would usually?
How can I stop this error from happening (e.g. how do I prevent the event listeners from being created by YouTube's JS)?
Does anyone know anything about the way YouTube is built that would make it crash if you try to 1) modify a style on an element directly 2) add another element into a parent element 3) continually check styles on an element? Builtwith.com was not much help.
Is there something else I am missing here? Another way I can change my content script to make it interplay better with YouTube?*
*I know a tempting answer will be 'don't observe the document'/'observe it less' but this is more or less non-negotiable in terms of the way the browser extension needs to work.
Screenshot:
Chrome profiling:
Note: having looked into them individually, none of the functions that are taking up the huge amount of time are part of my extension. So perhaps YouTube is reacting badly to the DOM modifications that my extension performs.
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?
If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.
javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.