I have an extension which adds a bar at the top of a webpage. i have inserted the iframe in the content script using
document.body.insertBefore(iframe, document.body.firstChild);
The iframe has a button
<button id="mybutton">Click to help</button>
When the user clicks the button I want to redirect them to a new url in the same window. Is this possible?
The reason I want to do this is on certain websites I would like to change the url to include an additional parameter. I chose the iframe option as it more visible than an extension in the bar. Therefore if there is an alternative way to do this I would be happy to learn about it.
Your iframe.....
<html>
<head>
</head>
<script type="text/javascript">
function changeParent(e){
parent.location="http://google.com.au";
}
function onLoad(){
document.querySelector("#mybutton").onclick = changeParent;
}
</script>
<body onload="onLoad()">
<a id="mybutton">Change Parents URL</a>
</body>
</html>
Would be a good case for info bars if they ever come out of experimental....
http://code.google.com/chrome/extensions/experimental.infobars.html
Related
I am aiming to build a google chrome extension that displays a different link to a different website every time it is used.
That is, I have a list of websites and I want to iterate through the list such that each time I click the extension the next link is shown.
Currently my popup.html file looks like this
<!DOCTYPE html>
<html>
<head>
<title>My First Chrome Extension</title>
<style>
#popup{
width:300px;
height:200px;
text-align:center;
line-height:200px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="popup">
next link
</div>
</body>
</html>
(the popup.js file is empty). When I click my extension icon, it will display a link to "some_url.com" which opens in a new tab (great). What I am looking for is to be able to then display "another link" when I click the extension icon again ("another link" being the next from some predefined list).
I would be very grateful for help/resources to be able to add this behaviour to the extension. I am new to chrome extensions (and javascript) and don't know where to go next.
You can create a anchor tag with some id on popup.html page
<a id="show-links" target="_blank"></a>
Then in your popup.js file, add a hfref attribute to this element using javascript
var a = document.getElementById('show-links');
//create an array with all links
links_array = ["some_link.com", "some_link1.com", "some_link2.com"];
//assign links to a from array at random
a.href = links_array[Math.floor(Math.random() * links_array.length)];
So I have an extremely simple popup for a chrome extension that has a single button in the html.
<!DOCTYPE html>
<html>
<head>
<title>Extension popup</title>
</head>
<body>
<button id="dashboard">Button<button>
</body>
</html>
So it is only supposed to show one button but a second empty button is also shown. Inspecting the popup shows that there is indeed another button.
I am mostly wondering whether anyone knows what is going on here?
How can I scroll to a certain anchor tag inside the IFrame page?
Using the ingenious Iframe-Resizier Library by David J. Bradshaw
https://github.com/davidjbradshaw/iframe-resizer
I’m including an IFrame with a lot of content (=long page) inside the outer page. So if I link to the page, then much of the content isn't visible on the first screen and under certain circumstances I would like to jump to a specific anchor tag further down in the iframe.
<html>
<a href=“outer-page.html#somewhere_name” />
</html>
seems not to work
I am using "inPageLinks: true" like this:
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true
</script>
My question now is: How can I make the outer page scroll down to a certain anchor tag without the need to implement something new inside the iframe page? The anchor tag in this case is located inside the IFrame page.
When I include the IFrame page like
<html>
<iframe id=“strytl” src=“iframe-page.html#somewhere_name”></iframe
</html>
Then the (re)sizing of the IFrame seems not to work perfectly and contents at the top of the iframe are getting cut off.
But with moveToAnchor it works perfectly from inside the IFrame and the page is magically scrolling down to the anchor tag. So in the iframe page I can call:
<script type="text/javascript>
parentIFrame.moveToAnchor('somewhere_name’);
</script>
But how can I trigger this from the parent page?
<script type="text/javascript>
$('iframe#strytl').iFrameResize({moveToAnchor: 'somwhere_name'});
</script>
results in this error:
<script type=“text/javascript”>
[iFrameSizer][Host page: strytl] Ignored iFrame, already setup.and
</script>
And
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true,
moveToAnchor: 'somewhere_name'});
</script>
seems to have no effect at all.
(In this case the outer page and the iframe have different server names.)
<script type=“text/javascript”>
var myFrm = document.getElementById('strytl');
var myCw = myFrm.contentWindow;
myCw.parentIFrame.moveToAnchor(‘somewhere_name’);
</script>
result:
<script type=“text/javascript”>
Error: Permission denied to access property “parentIFrame"
</script>
Can I jump to an anchor in the iframe from the outer page at all?
Something like this.
<script type="text/javascript">
iFrameResize({
heightCalculationMethod : 'lowestElement',
inPageLinks : true,
initCallback : function (iFrame){
iFrame.iFrameResizer.moveToAnchor('someAnchor');
}
});
</script>
Can I use a page action to directly open a new page? I have a link in my popup.html, but it would be better to have the page open when they click the icon so that they would only need one click instead of two.
<!doctype html>
<html>
<head>
<title>Popup</title>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
click here
</body>
</html>
Yes, a way to achieve this would be as follows:
chrome.pageAction.onClicked.addListener(function(tab){
chrome.tabs.create({url: "http://www.domain.com/details.html", "active":true});
});
See Chrome Page Action | onClicked
Note that you will need to declare the tabs permission in your manifest file:
"permissions": ["tabs",...],
I don't think there is any elegant way to handle both the situations on page action click:
Open popup
Open a new page
If you always want to open a new tab with some URL whenever page action is clicked, just remove the popup. And use the code just like #Flo has mentioned.
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.create({url: "http://www.example.com", "active":true});
});
PS: To remove the popup, there are two options:
Remove the popup from manifest.json
Pragmatically like chrome.pageAction.setPopup('')
I am Using Google Picker api to access my google drive folder's files. The following html page uses picker to load my google docs. However after I select a doc and press select option the picker dialog box is not closing. nor even when I press the close button on the right top of the iframe. I think the problrm is in the picker call back but I don't know how to recitfy this. I include the html page here.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Picker Example</title>
<!-- The standard Google Loader script. -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Use the Google Loader script to load the google.picker script.
// google.setOnLoadCallback(createPicker);
google.load('picker', '1');
// Create and render a Picker object for searching images.
function createPicker() {
var picker = new google.picker.PickerBuilder().
addView(google.picker.ViewId.DOCS).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// A simple callback implementation.
function pickerCallback(data) {
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
var message = 'You picked: ' + url;
document.getElementById('result').innerHTML = message;
}
</script>
</head>
<body>
<div id="result">
<button onclick="createPicker()">Upload Files </button>
<iframe></iframe>
</div>
</body>
</html>
The Picker requires some cross-domain communication that cannot be done if you open the page locally (e.g. open the html file from your disk).
Host the same page on a web server and it should work as expected.
The problem is that i didnt use a google api key to authenticate my communicating with google...Once the close is activated it calls pickercallback with a json file provided by google... which is not authenticated when i dont have a key...
The problem is with this line...
<script src="http://www.google.com/jsapi"></script>
It should be like ..
<script src="http://www.google.com/jsapi?key=#########################"></script>
replace #'s with your google api console key....you can generate a key here https://code.google.com/apis/console/