Chrome extension options not calling javascript file - javascript

I have an options page in my Chrome extension which calls a javascript file. I tried using javascript to save my options but it wasn't working, so I tested it with some very simple code:
options.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="options.js"></script>
</body>
</html>
options.js
$(document).ready(function() {
alert('loaded');
console.log('loaded');
});
Neither the alert nor the console.log seems to be firing when I click options in the Chrome extensions page. This makes me think that the options.html file isn't loading the js file, but it could be that I'm wrong to expect alert and console.log to work like this with extension options.
Any ideas what's going wrong here?

To see the results of any console.log you need to right-click on the options modal window and select "Inspect Element". Any console messages will appear here.
However alert commands appear to be suppressed, or at least I was unable to see any.

Related

Tab kill function in JavaScript

I'm the one who started JavaScript yesterday.
I made code like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert('Hello world \nNice to meet you \n');
</script>
</body>
</html>
However, after the code was finished, it was inconvenient to only leave blank pages.
Is there a function in JavaScript that kills the running browser tab?
I use Windows as the operating system and Chrome as the browser.
========
'Window.close();' in the last line of code I added it, but nothing happened.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert('Hello world \nNice to meet you \n');
window.close();
</script>
</body>
</html>
window.close() will close the current tab.
Refer this stackoverflow question to get an idea why window.close() doesn't work for you.
And I also suggest you to clear the cache and sessions and try again.

External javascript file in html not working

first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.
remove script tags from helloWorld.js
just
alert("hello");

the executing order in chrome

For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?
All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.

Why is javascript not executing on a web page when accessed via iOS Twitter browser?

I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...

Devtools doesn't show console or requests for extension popup? [duplicate]

This question already has answers here:
How to open the correct devtools console to see output from an extension script?
(3 answers)
Closed 2 years ago.
I use console.log heavily to debug when writing JS. I am trying to use it in writing chrome extensions but it is not working. Is there some trickery involved here???
popup.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body style="width: 200px">
</body>
popup.js
console.log('test1');
$(document).ready(function() {
console.log('test2');
});
Neither of these appear in the JS debugger.
I had this problem as well initially! Make sure you have correct developer tools window opened... I mean, you might have opened the developer tools window for the main page rather than the extension's page (ie. popup.html).
To open the developer tools window for inspecting the popup, right click on the popup and then click 'inspect element'... That opens the right developer tools window.
I had made this stupid mistake initially and was stuck.. :)

Categories