External Javascript problem
903 views
Skip to first unread message
Oscar Fröberg
Sep 3, 2010, 4:47:18 AM9/3/10
to Chromium-extensions
Hi guys. I've been at this for many hours now and can't wrap my head
around what's wrong. I'm trying to use Shadowbox (http://www.shadowbox-
js.com/) to open an url in a Lightbox style "popup" box. I have a few
problems.
First I tried following the documentation and put shadowbox.js etc..
in the manifest file but I never understood how to make requests/
responses to communicate with my background page. So I used the
following method instead:
background.html
============
<html>
<head>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
</head>
</html>
<script>
function createShadowbox() {
Shadowbox.init();
Shadowbox.open({
content: "http://www.google.com",
player: "iframe",
width: 400,
height: 400
});
window.open('http://www.bing.com'); // OPTIONAL, FOR TESTING
}
chrome.contextMenus.create({title: "Open Google in iframe", contexts:
["all"], onclick: createShadowbox});
</script>
This method works fine (for loading the external js) but no shadowbox
is created.
When I create a normal html-file with the above code, replacing the
chrome.contextMenus line with:
<a href="#" onClick="createShadowbox();return false">Click it!</a>
it works as it should and I get a nice little shadowbox.
I added window.open('http://www.bing.com') to make sure that the
function was called when I right-click and "Open Google in iframe" and
it did indeed open a new window with Bing... but for some reason the
shadowbox doesn't work.
As I said, I've been at this for many many hours now and I'm tired and
hungry and could really use some input. :p Thoughts?
Oscar
around what's wrong. I'm trying to use Shadowbox (http://www.shadowbox-
js.com/) to open an url in a Lightbox style "popup" box. I have a few
problems.
First I tried following the documentation and put shadowbox.js etc..
in the manifest file but I never understood how to make requests/
responses to communicate with my background page. So I used the
following method instead:
background.html
============
<html>
<head>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
</head>
</html>
<script>
function createShadowbox() {
Shadowbox.init();
Shadowbox.open({
content: "http://www.google.com",
player: "iframe",
width: 400,
height: 400
});
window.open('http://www.bing.com'); // OPTIONAL, FOR TESTING
}
chrome.contextMenus.create({title: "Open Google in iframe", contexts:
["all"], onclick: createShadowbox});
</script>
This method works fine (for loading the external js) but no shadowbox
is created.
When I create a normal html-file with the above code, replacing the
chrome.contextMenus line with:
<a href="#" onClick="createShadowbox();return false">Click it!</a>
it works as it should and I get a nice little shadowbox.
I added window.open('http://www.bing.com') to make sure that the
function was called when I right-click and "Open Google in iframe" and
it did indeed open a new window with Bing... but for some reason the
shadowbox doesn't work.
As I said, I've been at this for many many hours now and I'm tired and
hungry and could really use some input. :p Thoughts?
Oscar
PhistucK
Sep 3, 2010, 5:40:00 AM9/3/10
to Oscar Fröberg, Chromium-extensions
You have to use content scripts or executeScript in order to inject script into a web page.
The background page can call executeScript on the getSelected tab or on the tab on which the context menu option was selected.
Calling executeScript twice - once for loading the "shadowbox.js" file and the other for execute that code -
function createShadowbox() {
Shadowbox.init();
Shadowbox.open({
content: "http://www.google.com",
player: "iframe",
width: 400,
height: 400
});
window.open('http://www.bing.com'); // OPTIONAL, FOR TESTING
Shadowbox.init();
Shadowbox.open({
content: "http://www.google.com",
player: "iframe",
width: 400,
height: 400
});
window.open('http://www.bing.com'); // OPTIONAL, FOR TESTING
}
And you should be good to go.
If you prefer not to use the contextMenu feature, you can inject a content script that will add this button and do the rest.
☆PhistucK
--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
Oscar Fröberg
Sep 3, 2010, 7:19:36 AM9/3/10
to Chromium-extensions
Thanks PhistucK, almost there I hope!
I got the shadowbox to show up now but the box stays black after
briefly stating "loading". The title of the box (testing...) is there
so it's working at least somehow, however I can't get anything to load
in it. Here's the background page as you instructed:
<script>
function createShadowbox(info, tab) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.insertCSS(tab.id, {file: "shadowbox/shadowbox.css"});
});
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {file: "shadowbox/shadowbox.js"});
});
chrome.tabs.executeScript(tab.id, {code: 'Shadowbox.init();
Shadowbox.open({ title: "testing...", content: "http://
www.google.com", player: "iframe", width: 400, height: 400 });'});
chrome.tabs.getSelected(null, function(tab) {
});
manifest in case anything's wrong with it:
{
"name": "Shadowbox",
"version": "1.0",
"description": "Shadowbox",
"background_page": "background.html",
"options_page": "options.html",
"permissions": [
"contextMenus",
"tabs",
"http://*/*"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png"
},
"minimum_chrome_version": "6"
}
As both webpages (in iframe) and images show up fine through a normal
html file it might have something to do with permissions? Or maybe
relative paths could have something to do with it? Just guessing here,
any help is again immensely appreciated!
Almost there! :)
Oscar
> scripts<http://code.google.com/chrome/extensions/content_scripts.html>or
> executeScript<http://code.google.com/chrome/extensions/tabs.html#method-executeScript>in
> the
> getSelected<http://code.google.com/chrome/extensions/tabs.html#method-getSelected>tab
> > To post to this group, send email to chromium-extensi...@chromium.org.
> > .
I got the shadowbox to show up now but the box stays black after
briefly stating "loading". The title of the box (testing...) is there
so it's working at least somehow, however I can't get anything to load
in it. Here's the background page as you instructed:
<script>
function createShadowbox(info, tab) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.insertCSS(tab.id, {file: "shadowbox/shadowbox.css"});
});
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {file: "shadowbox/shadowbox.js"});
});
chrome.tabs.executeScript(tab.id, {code: 'Shadowbox.init();
Shadowbox.open({ title: "testing...", content: "http://
www.google.com", player: "iframe", width: 400, height: 400 });'});
chrome.tabs.getSelected(null, function(tab) {
});
}
chrome.contextMenus.create({title: "Open Google in iframe", contexts:
["all"], onclick: createShadowbox});
</script>
Again, this code works fine running from a normal html file. Here's my
chrome.contextMenus.create({title: "Open Google in iframe", contexts:
["all"], onclick: createShadowbox});
</script>
manifest in case anything's wrong with it:
{
"name": "Shadowbox",
"version": "1.0",
"description": "Shadowbox",
"background_page": "background.html",
"options_page": "options.html",
"permissions": [
"contextMenus",
"tabs",
"http://*/*"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png"
},
"minimum_chrome_version": "6"
}
As both webpages (in iframe) and images show up fine through a normal
html file it might have something to do with permissions? Or maybe
relative paths could have something to do with it? Just guessing here,
any help is again immensely appreciated!
Almost there! :)
Oscar
> scripts<http://code.google.com/chrome/extensions/content_scripts.html>or
> executeScript<http://code.google.com/chrome/extensions/tabs.html#method-executeScript>in
> order to inject script into a web page.
> The background page can call
> executeScript<http://code.google.com/chrome/extensions/tabs.html#method-executeScript>on
> The background page can call
> the
> getSelected<http://code.google.com/chrome/extensions/tabs.html#method-getSelected>tab
> or on the tab on which the context menu option was selected.
> Calling executeScript twice - once for loading the "shadowbox.js" file and
> the other for execute that code -
> function createShadowbox() {
> Shadowbox.init();
> Shadowbox.open({
> content: "http://www.google.com",
> player: "iframe",
> width: 400,
> height: 400
> });
> window.open('http://www.bing.com');// OPTIONAL, FOR TESTING
>
> }
>
> And you should be good to go.
> If you prefer not to use the contextMenu feature, you can inject a content
> script that will add this button and do the rest.
>
> ☆*PhistucK*
> Calling executeScript twice - once for loading the "shadowbox.js" file and
> the other for execute that code -
> function createShadowbox() {
> Shadowbox.init();
> Shadowbox.open({
> content: "http://www.google.com",
> player: "iframe",
> width: 400,
> height: 400
> });
> window.open('http://www.bing.com');// OPTIONAL, FOR TESTING
>
> }
>
> And you should be good to go.
> If you prefer not to use the contextMenu feature, you can inject a content
> script that will add this button and do the rest.
>
> > To unsubscribe from this group, send email to
> > chromium-extensions+unsubscr...@chromium.org<chromium-extensions%2Bunsubscr...@chromium.org>
> > .
PhistucK
Sep 3, 2010, 8:05:37 AM9/3/10
to Oscar Fröberg, Chromium-extensions
Mmm...
Try to look at the "Console" (of the Developer Tools) of the webpage into which you are injecting these scripts and code (Ctrl+Shift+J).
Try to call console.log("Blabla") to see that there is no error and that your get everything you need smoothly.
Make sure Google (or any webpage you are loading in the iFrame) does not block you in the "Resources" tab of the Developer Tools.
Also, if you can attach you whole code (just attach the folder of the extension (minus private stuff) in a ZIP file), it would be helpful and I will be able to debug it quickly.
☆PhistucK
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
Oscar Fröberg
Sep 3, 2010, 8:27:32 AM9/3/10
to PhistucK, Chromium-extensions
I'm attaching the extension in its current condition. Haven't done much to it (if anything) since my last post. I noticed however watching Resources that it seems to be trying to load about:blank instead of http://www.google.com for some reason.
Oscar
PhistucK
Sep 3, 2010, 9:47:27 AM9/3/10
to Oscar Fröberg, Chromium-extensions
I believe the problem is that the Showdowbox code is trying to reach the iFrame (to change its location, I guess?) and due to a Chrome bug, it cannot touch inner framed windows.
The bug is that a content script cannot interact with framed window -
Oscar Fröberg
Sep 3, 2010, 9:50:54 AM9/3/10
to PhistucK, Chromium-extensions
Well that's unfortunate. I guess I can solve it by using another "box-library". Thanks for the assistance in any case!
Oscar
Reply all
Reply to author
Forward
0 new messages