I'm writing a chrome extension that creates a popup when the button is pressed. The popup is a simple HTML file that includes links and images. When I press the links on the popup nothing happens, and the pictures show up as empty white boxes. Does anyone know how I could fix this? The picture files are saved in the extension folder if that makes a difference.
Thank you so much!
Most probably you're dealing with two different issues.
Regarding the non working links, the simplest way to deal with it is to add to the HEAD section of your popup or a specific target to each link.
Other approach, for instance, involves associating onclick javascript events to open new browser tabs with the associated url.
Did you check out the Getting Started Tutorial about how to write extensions at http://code.google.com/chrome/extensions/getstarted.html?
It's got everything you need to walk through the basics of writing an extension that does almost exactly that. There's also a link to debugging extensions, which will hopefully help you to figure out if it's something else that's going on.
Thanks!
PEte
Related
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
I have an html form, which can be used to upload files. These files are deleted when the user navigates away into another section. Unfortunately, I'm not seeing what can be done if the user decides to reload the page or close the browser window.
I was trying to use both jQuery's $('window').on('beforeunload') but all I can achieve is a confirmation message.
Does anybody have a better idea?
Thanks in advance
This will be pretty hard as it will be browser specific, IE doesnt support many of the events. for the reload you could add a parameter to the form action like ?refresh=true then check for that. if they close the window you dont have many options. Sorry I can be more help
I'm quite new to web development, but I'm trying to do some stuff in Python and so I need help.
Sometime ago, I went into a page to debug html forms that allowed me to change the POSTs to GETs in the form request and that really helped me get some info from html forms by just doing everything in the URL instead of having to make my program fill some forms.
Unfortunately I lost that page address and as much as I search in Google I cannot come up with it or anything similar again. Can you direct me to some links that do this?
I tried both Firebug in Firefox and developer tools in chrome, but they don't seem to do this.
Ok, this is probably quite basic for most people, but in Firebug, you just have to go into the "NET" tab, make the request and then analyse it and if you right click it and choose: "Copy location with parameters" you get the formatted URL ready to go, even when using javascript.
If you have: <form name="form1">
You can this JavaScript:
document.form1.type="GET"
Use this in the page before submitting the form.
The web developer tool bar for firefox will do this and much more:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
EDIT
You can also use firebug and inspect the form element and change it from POST to GET
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.
I'm trying to provide a link to chrome://newtab (the new tab page) for my distraction-preventing page for when I need to access it, however clicking the link gives the error Failed to load resource.
I've tried:
Linking to it using <a href="chrome://newtab">
Attempting to redirect the user using window.location.
The chrome: prefix aliases to chrome:// but still fails to load.
Does anyone know if this is possible or has any ideas to try?
I am not sure why it doesn't work, but I think it is for security reasons.
Pages on the internet should not have access to local resources and the new tab page is a local resource.
Format your link thusly (also will work with firefox and other tabbed browsers):
Click me
EDIT: of course, that's not actually the new tab page. It's just a blank tab. Going to leave it anyways.
I think you'll have to write a Chrome extension to get access to the chrome://newtab link, it doesn't seem possible for an ordinary webpage to access it.
Edit: This solution no longer works, but I'll leave it for anyone that might try to hunt down why it stopped working.
I finally found that https://www.google.com/_/chrome/newtab will open chrome://newtab, thanks to this post.
Don't ask me why.