Show alert from Chrome Extension "options_ui" page - javascript

Chrome Extensions have had a Version 2 of their options page since Chrome 40. I tried creating an options V2 page with a button that just has a simple alert:
js
function resetAll() {
alert("Not yet implemented.");
}
document.getElementById("reset-button").onclick = resetAll;
html
<button id="reset-button">Reset All</button>
When I click the button in the options page, nothing happens. I even pulled up the Javascript Debugger to see if my code was actually being run. And it was, but no alert showed up.
If I use Chrome Extension's older options page format, the alert shows up without problem.
Is there no way to create a browser-native alert with OptionsV2?

chrome.extension.getBackgroundPage().alert('Are you sure you want to delete X?');
chrome.extension.getBackgroundPage().confirm('Are you sure you want to delete X?')

Related

I can't click buttons in Firefox when I edit the <body> of a page

When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.

Can't open chrome inspector with javascript prompt is running

I'm trying to open the Chrome inspector to see the console log and I can't.
It works very well with Firefox but not with Chrome.
The chrome development tools is enabled and works well when there is no prompt or alert pop up running.
I have a little program in which I have a prompt that asks the user to give a number.
Explanations for the user are in the console(console.log("xxxx")), so when the page is loaded and the prompt is on the screen, the user would have to open the inspector window to see what choice he/she should make.
Here is my code:
console.log("1\n2");
var saisie = prompt("What is your choice");
alert(saisie);
I would like the user to see the console log before they answer the prompt.
You can use window.console to access and interact via javascript with the debug console. Then you can pipe its contents to a div on the page.
alert is blocking, which is why people tell you not to use it (or leave snarky comments to that effect). 'Blocking' means that nothing else can happen: it literally hijacks the entire tab. Meaning that you can't, say, open chrome devtools without dismissing the alert first. I have no idea how this is actually working in FF.
Pro-tip: don't ever use alert. Ever. Use a modal dialog, iframe, whatever. Don't use alert.

Why i cant see submit button; checkbox and div on IE

I have this landing page, for some reason I can't see the check box, submit button and a div that are in the code. Everything works in chrome and Firefox. I understand that IE dosen't always get media queries so I made this landing page that calls a diferent css file when it detects IE, but it made no difference.
I have a few questions:
1. What is causing this?
2. How can I fix it? Is there a file, like modernizer, that I can load to modify code for IE.
3. I am also using this js addon on the second link with a separate css file, in order to see place holders in IE. This also doesn't work, if someone could tell me why, that would be great
I see the checkbox just fine in IE. why don't you show an image of what you are seeing. Also, clear your browser cache.
To help debug, you should press F12, then click on console. make sure there are no errors. Then click Network. Make sure all css/javascript is loaded with no errors. finally, in the dom explorer, click the arrow, and click on the page and see if the elements are there.
as i see it this is the solution to my question
at the top of the css file i had this row:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
once i removed it i got the mossing elemnts.
tnx for helping
Dav

Javascript: I hear my alert but it's not showing in IE

I've got a very basic HTML page, which only has to show a javascript alert.
I hear the sound that it's supposed to make when it pops up, but it's not popping up! I don't see it anywhere (in google chrome it does pop up). I also can continue working on my page without clicking "ok" on the (invisible) alert box, so that means that it really isn't there!
Any clues on how to solve this? I already rebooted my pc and disconnect my multiple monitors.
<script>
alert('SHOW!!');
</script>
More info:
My IE version is IE11
The popup did work properly before, without making changes to IE
On other websites, the popup isn't showing aswell
I did reset my IE properties (to factory default), no result
unable to test on older versions
Javascript is enabled

JavaScript alerts in an onclick in a Chrome extension popup immediately disappear

I'm working on a Chrome extension, and want to use prompt() to get input from the user when they click on certain elements. Unfortunately, for some reason, I can't get prompt() or alert() to work when called as an onclick (or in a jQuery $('#something').click(function), which is how I originally ran into this).
To wit, if I use the HTML below as the popup.html for my extension, the first alert shows up, but the second one flashes on the screen and then immediately disappears without any user intervention. And then the extension popup also immediately closes.
<script>
alert("This alert works");
</script>
<input type="button" onclick="alert('This one disappears')" value="Button"/>
Any thoughts on why this might be happening and how to fix it would be greatly appreciated.
Alerts/prompts are not working inside popups (see this bug report for details). You need to find alternate solution (use html form instead).

Categories

Resources