I am trying to follow this tutorial to build a very simple first chrome extension.
Link to tutorial I have been following
I have copy and pasted all the exact same code. However, the javascript doesn't seem to be doing anything. When I click on the extension, the popup html code loads right and this comes up.
What comes up when I click on my extension
However, when I click on the button that is supposed to engage the javascript, nothing happens.
I am sure I copied the code exactly, so what is wrong?
Is something missing in the tutorial?
Related
First time poster. Currently trying to work on a project but I am having an issue with iframes. I'm making an extension for Chrome, and part of its functionality right now is to be fetching any shapes/borders on a page. Unfortunately, that also includes ones within iframes. I'm currently stuck because I cannot get around security policies from Cross-Domain sources.
I was wondering, however, if it is possible to create a function that displays what the Chrome console does when I hit "inspect element" on a page... I tried to make a console function called "save" that would automatically download a file of anything output to the log, but the output for the iframe's HTML is blank except for its tag...
When I am inspecting an element on the page, I can see the contents of that iframe just fine. Is there anyway to just get the actual text from Inspect Element and store that? I know this may be silly, but I genuinely have no idea. I am pretty new to JavaScript. I just need to match up script tags for shapes for part of the extension's functionality.
I'm assuming that this is going to end up being impossible, but I figured I'd ask. I'm also assuming that this inspect element functionality is something that only the browser can work with. But hey, maybe there's a way. Thanks for any help.
I have a website prototype https://arcane-beyond-35849.herokuapp.com/
I have a strange bug. In internet explorer v11.
please go to the site and press new button.
You will see this picture...
Then you can reload the page and see this...
I use the jQuery steps wizard.
So I have no idea why the first time everything breaks.
(If you need a code I can provide it just tell me.)
$(".myform").steps({
*some stuff and options
});
Okay I found another weird behavior when you go to the main page and try to click on the menu button in the right top corner nothing happens.
When you reload a page and click menu button again side menu appears.
I simply on document.ready use something like this :
$('.somebutton').click(function(){});
I guess I should provide code and I will do it as soon as get to another laptop. But if take away all business logic The code is as simple as I described.
In google chrome everything works normal.
Can someone help? Seems like my JavaScript code just doesn't execute.
Update:
okay guys Console give me some errors. My IE11 not in English so no point to post exact errors here.
There is something about the content that is loaded over http when I have https.
But it's just a placeholder picture. So I don't know. And when I reload page my JavaScript code works. So this is strange.
I know this is sort of a please debug my code question, but I really don't know whats going on here.
I just added the content to this page and now none of the external or internal links will work (eg you click on them and nothing happens). The Mega menu drop down works fine and I can click on links on it, but the links in the text dont work, and neither do any on the sidebars
Here is the page that is causing the problems
http://www.cookingisfun.ie/cookery-courses/course-details/101618/Guest-Chef-Diana-Kennedy-at-Kerrygold-Ballymaloe-Litfest
here is a similar page that has no issue.
http://www.cookingisfun.ie/cookery-courses/course-details/101364/Guest-Chef-Lilly-Higgins
I can click the Back to CourseList button which I Can't on the first.
This is not just a problem with my machine, I have tried from another machine and an Iphone with same result.
I can't see any javascript errors but I assume it is something to do with the plugin that marks the links as external though that plugin works elsewhere on my site.
Any suggestions?
I guess you have some errors in your HTML code (wrong nesting of tags or something or you did not close a tag right). If I want to inspect the "Back to course button" with Firefox I get the following
It seems that the #content-blocks div is empty. Also the source code view of your page underlines me some tags red:
Normally this means that there are some HTML errors. Here the output of the HTML validator: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cookingisfun.ie%2Fcookery-courses%2Fcourse-details%2F101618%2FGuest-Chef-Diana-Kennedy-at-Kerrygold-Ballymaloe-Litfest&charset=%28detect+automatically%29&doctype=Inline&group=0
When I right click on the icon for my extension-in-development and click Inspect Popup (or when I click the icon and choose "Inspect Element") and look under the "Sources" tab, my .js file is nowhere to be seen - only a long list of inspect-able files like apitest, devtools, json_schema, etc. I can, however, find the code through the Elements tab by following the link in the .html file, but that doesn't bring to anywhere where I can actual debugging.
I've also loaded the "Hello, world" extension that Google's tutorial provides, and when I Inspect that one, its .js file is right there. I can't imagine what I've done differently from the tutorial example to cause this.
It's Chrome version 22.0.1229.94 run in a Linux VM. If there's any more information I should be providing, please let me know.
Type location.reload(true) in the console.
http://developer.chrome.com/extensions/tut_debugging.html
If I understand your question right,
Under the sources tab, there are two more tabs, one says Sources and the other says Content scripts. You need to click on the content scripts tab, and there you will find what you are looking for.
Okay So I figured it out, simply click on you extension icon, and a little dialog will pop up, then right click on it and click on inspect element. You can figure it out from there I reckon. (My other answer would be good if it was a content script, but this is a popup script.)
The code below works on one page, but not another page (the place it should be - the same place as on the other page) - is blank.
This code displays the facebook like button, and is copied verbatim from the facebook website.
The code is there - I checked "view page source" in Firefox, it just isn't doing anything.
I can put another script, the "find us on facebook" button, either directly above or below this code, and that shows up okay.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
href="http://www.facebook.com/pages/[our name]/[our number]" layout="box_count"
show_faces="false" width="50"></fb:like>
UPDATE
If I use the iframe code instead of the XFBML code from: http://developers.facebook.com/docs/reference/plugins/like/ then it works on both pages (but I can't format that right - Wordpress doesn't like iframes in widgets).
What is going on?
UPDATE
When I disable the Wordpress Facebook Share plugin this problem goes away. There may be a problem with double initialization of the Facebook SDK, as pointed out by Chris Livey below. Is there some html I can add before the "like" code to de-initialize the SDK?
Do you have firebug? If not I would recommend downloading it:
http://getfirebug.com/
It has a console that lets you know exactly what is going wrong in JavaScript land.
You mentioned Firefox. You should start with looking in the Tools | Error Console to see if any javascript errors occurred during the page load.
The next step is to get the firebug addon and use it to see what might be happening.
(removed update - info did not apply)
UPDATE:
Okay, the word press plug in clobbering you. If you are going to keep the word press plug in then remove this:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
From your button code and everything should work just fine.
UPDATE 2:
From all of the comments, this issue boiled down to a word press plugin using it's own javascript definition for the FB object. Fortunately before creating that object it performs a test to see if FB is already defined.
The fix then is to add the correct FB script to the top of the page such that it is executed by the browser BEFORE the word press FB Share button plugin script. Because it is executed first, the word press plugin can't screw it up while continuing to function correctly.
This only works if the browser executes the scripts in the order seen on the page.
The real fix would be for the word press plugin to be modified to use the full FB object from connect.facebook.com instead of the smaller one it provides.