I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.
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.
I am researching the possibility that I might be able to use a Chrome extension to automate browsing and navigation (conditionally). My hope is that the extension can load a remote page (in the background) and inject a javascript to evaluate clickable links and click (by calling the click method) the appropriate (evaluated by some javascript logic) link, then repeat process for the resulting page.
My ability to javascript is not the problem - but I am struggling to discern whether (or not) a chrome extension can load pages in the back and inject script into them (making the DOM accessible).
I would be pleased if anyone could confirm (or deny) the ability to do so - and if so, some helpful pointers on where I should research next.
#Rob W - it seems the experimental features fit the bill perfectly. But my first tests seem to show the features are still very experimental ... ie. no objects get returned from callbacks:
background.html
function getAllosTabs(osTabs){
var x = osTabs;
alert(x.length); // error: osTabs is undefined
}
function createOffScreenTabCallback(offscreenTab){
document.write("offscreen tab created");
chrome.experimental.offscreenTabs.getAll(getAllosTabs);
alert(offscreenTab); // error: offscreenTab is undefined
}
var ostab = chrome.experimental.offscreenTabs.create({"url":"http://www.google.com"}, createOffScreenTabCallback)
alert(ostab); // error: ostab is undefined
Some further digging into the chromium source code on github revealed a limitation creating offscreenTab from background:
Note that you can't create offscreen tabs from background pages, since they
don't have an associated WebContents. The lifetime of offscreen tabs is tied
to their creating tab, so requiring visible tabs as the parent helps prevent
offscreen tab leaking.
So far it seems like it is unlikely that I can create an extension that browses (automatically and conditionally) in the background but I'll still keep trying - perhaps creating it from script in the popup might work. It won't run automatically at computer startup but it will run when the browser is open and the user clicks the browseraction.
Any further suggestions are highly welcome.
Some clarifications:
there's no "background" tabs except extension's background page (with iframes) but pages loaded in iframes can know they are being loaded in frames and can break or break at even the best counter-framebreaker scripts
offscreenTab is still experimental and is very much visible, as its intended use is different from what you need it for
content scripts, and chrome.tabs.update() are the only way handle the automated navigation part; aside being extremely harsh to program, problems and limitations are numerous, including CSP (Content-Security-Policy), their isolated context isolating event data, etc.
Alternatives... not many really. The thing is you're using your user's computer and browser to do your things and regardless of how dirty they are not, chrome's dev team still won't like it and will through many things at you and your extension (like the v2 manifest).
You can use NPAPI to start another instance chrome.exe --load-extension=iMacros.
I would like to make a bookmarklet to open google chrome's settings panel and clear my cache with a single click.
For a while now, Ive had a bookmark that opens chrome's settings panel with the 'clear cache' setting already selected. After clicking the bookmark (normally opening it in a new tab) I have to then opent the tab and submit the form. However, when developing this is a task I have to do quite often and these several repeated steps just seem unnecessary.
This link opens the page to clear one's cache (obviously for Chrome users only): chrome://chrome/settings/clearBrowserData#cache
I recently discovered bookmarklets and thought it would be a good way to accomplish the task of clearing my cache with a single click. However, I've discovered that putting even a basic javascript sample in the address bar when on the settings page (linked above) fails to work.
For example, this works in the address bar on any given page, but not from the chrome settings page:
javascript:alert('hello stackoverflow');
Is there a way to execute javascript from the chrome settings page? Are there other options? Im looking for any route to achieve this goal and would love to learn something along the way, even if it means doing some evil. :)
add a bookmark:
javascript:document.write('<form onsubmit="window.open(\'javascript:\'+js_line.value, \'target\');return false;">javascript:<input type=text name=js_line style="width:90%;"/></form><iframe src="" name="target" style="width:100%;height:90%;"/>');
What you want might not be fully possible through a bookmarklet, but it's certainly possible with a Chrome App. There is an app Clear Cache already. I find it pretty useful.
How do I "dynamically" edit JavaScript code in the Chrome debugger? It's not for me, so I don't have access to the source file. I want to edit code and see what effects they have on the page, in this case stopping an animation from queuing up a bunch of times.
I came across this today, when I was playing around with someone else's website.
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
So as a quick work around, and if it works with your situation:
Add a break-point at an earlier point in the script
Reload page
Edit your changes into the code
CTRL + s (save changes)
Unpause the debugger
You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.
There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.
You can use "Overrides" in Chrome to persist javascript changes between page loads, even where you aren't hosting the original source.
Create a folder under Developer Tools > Sources > Overrides
Chrome will ask for permission to the folder, click Allow
Edit the file in Sources>Page then save (ctrl-s). A purple dot will indicate the file is saved locally.
This is what you are looking for:
1.- Navigate to the Source tab and open the javascript file
2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.
In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.
More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/
Chrome Overrides
Open the JS file in the sources panel.
Right Click on script src URL > Reveal in Sources panel
Make sure "Enable Local Overrides" is checked.
Right Click anywhere in the JS file > Save for overrides
All Set!
Just edit the file, and save with CMD/CTRL + S. Now whenever you refresh the page, it'll use the modified file. (As long as the filename remains the same)
You'll know it's working if you see a purple dot in the file icon.
Place a breakpoint
Right click on the breakpoint and select 'Edit breakpoint'
Insert your code. Use SHIFT+ENTER to create a new line.
Pretty easy, go to the 'scripts' tab. And select the source file you want and double-click any line to edit it.
If its javascript that runs on a button click, then making the change under Sources>Sources (in the developer tools in chrome ) and pressing Ctrl +S to save, is enough. I do this all the time.
If you refresh the page, your javascript changes would be gone, but chrome will still remember your break points.
As this is quite popular question that deals with live-editing of JS, I want to point out another useful option. As described by svjacob in his answer:
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
The above solution didn't work for me for quite large JS (webpack bundle - 3.21MB minified version, 130k lines of code in prettified version) - chrome crashed and asked for page reloading which reverted any saved changes. The way to go in this case was Fiddler where you can set AutoRespond option to replace any remote resource with any local file from your computer - see this SO question for details.
In my case I also had to add CORS headers to fiddler to successfully mock response.
Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)
For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)
Thanks
Just like #mark 's answer, we can create a Snippets in Chrome DevTools, to override the default JavaScript. Finally, we can see what effects they have on the page.
here's a gentle introduction to the js debugger in chrome that i wrote. Maybe it will help others looking for info on this: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
you can edit the javascrpit files dynamically in the Chrome debugger, under the Sources tab, however your changes will be lost if you refresh the page, to pause page loading before doing your changes, you will need to set a break point then reload the page and edit your changes and finally unpause the debugger to see your changes take effect.
I was looking for a way to change the script and debug that new script. Way I managed to do that is:
Set the breakpoint in the first line of the script you want to change and debug.
Reload the page so the breakpoint is being hit
Paste your new script and set desired breakpoints in it
Ctrl+s, and the page will refresh causing that breakpoint in first line to be hit.
F8 to continue, and now your newly pasted script replaces original one as long as no redirections and reloads are made.
Chrome DevTools has a Snippets panel where you can create and edit JavaScript code as you would in an editor, and execute it.
Open DevTools, then select the Sources panel, then select the Snippets tab.
https://developers.google.com/web/tools/chrome-devtools/snippets