I am new to Javascript as well as Chrome extension development. I was trying to open a tab when the user clicks on the extension button. This is how my popup.html looks like
<!DOCTYPE html>
<head>
<title> Qoogle Homepage</title>
<script type="text/javascript">
var newURL = chrome.extension.getURL('qoogle.html');
chrome.tabs.create({ url: newURL });
</script>
</head>
</html>
I have declared the tabs permission in my manifest.json and qoogle.html lays in the same directory. But when I click on the extension, nothing happens.
Now, I tried to include <script src="popup.js"></script> line into my popup.html and then wrote
var newURL = chrome.extension.getURL('qoogle.html');
chrome.tabs.create({ url: newURL });
inside the popup.js file. This works fine.
I don't want too many files in my folder. What could be the reason my script does not get executed from the HTML and works fine when added separately as a JS file?
As stated in the Docs:
https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution
Inline JavaScript will not be executed
Check out this answer as well: https://stackoverflow.com/a/27913209/3052648
Related
The scenario for my frontend javascript application is as following:
GET via URL an html/javascript file
execute it
Current I am trying the following frontend approach:
const myElement = document.createElement('myElement');
myElement.setAttribute('src', 'https://.../file.html');
document.body.appendChild(myElement);
And file.html looks like:
<html>
<head>
<script language="Javascript">
function doSomething() { }
</script>
</head>
<body onload="doSomething()"></body>
</html>
But nothing is happening.
Am I wrong to expect that on document.body.appendChild() , the file will be downloaded and executed as if the URL was opened from the browser?
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var path = '/Scripts/';
document.write('<base href="' + path + '"/>');
</script>
</head>
<body>
<h1>WELCOME</h1>
<script src="test.js"></script>
</body>
</html>
test.js
console.log("Message from external script");
output
error.png
Here you can see, first it try to load the script from body tag before it get the actual base href path from script section.
Is there any way to get come out from this error? I mean not to load body script until base href set.
Once the base href set, it executed successfully.
Thanks.
The behavior you're seeing is (somewhat) browser-specific, and is related to your use of document.write to set the base href dynamically.
Chrome and Firefox try to load the page resources before applying the document.write, then updates those urls and tries again after you set the page <base>. Safari appears to not do this; it uses the inserted base href immediately. I have not tested other browsers.
(In all browsers the <base> tag, whether static or dynamic, needs to appear in the document before any links that depend on it.)
Other than the extra network request this seems to be harmless (see below), but you could avoid it by using a static <base> tag instead of dynamically writing one in, or by setting the full path on the <script> tag instead of depending on the <base>.
(re "harmless": I checked the case where a test.js exists both at the root level and inside the "/Scripts" directory. Dynamically inserting the "/Scripts/" base href did not cause both scripts to execute in Chrome: successful network requests for both test.js files were made, but only the code in "/Scripts/" was executed. So the browser makers have handled that edge case already. Good job, browser makers!)
You Can use this code
<script src="./scripts/test.js" type="text/javascript"></script>
I'm trying to build a chrome extension that downloads a bunch of items from links, the main logic is in my download.js file and I want to be able to specify in which downloads subfolder I'd like to bundle them all but the value of the input field seems to be empty. Here's my code so far
popup.html
<!doctype html>
<html>
<head>
<title>Download CVs</title>
<script src="popup.js"></script>
</head>
<body>
<form id="folderForm">
Subdir of downloads:
<input type="text" id="folder">
<input type="submit" id="download" value="Download CVs">
</form>
</body>
</html>
popup.js
function bundleItems() {
chrome.tabs.executeScript({
file: 'download.js'
});
}
document.addEventListener('DOMContentLoaded', function() {
var downloadButton = document.getElementById('download');
downloadButton.addEventListener('click', bundleItems);
});
chrome.extension.onRequest.addListener(function(logs) {
var folder = document.getElementById('folder').value;
logs.map(function(log) {
chrome.downloads.download({
url: log.attachment.link,
filename: folder + '/' + log.attachment.filename
});
});
});
I'm sending information from download.js to popup.js and everything works if I try to download it in downloads, so I feel posting my download.js file will be useless. However, if I try to display the folder variable, it's empty. I've searched for lots of other posts on the same issue and none of the solutions seem to work for me.
You cannot submit to a Chrome extension page. There is no web server to process your POST request in this case. Doing so simply reloads the document (clearing your value from the form).
You need to prevent submitting instead, by specifying type="button" for your button.
I would add preventDefault() on submit button.
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
Given the following document, Require.js functions fine if I run it on a webserver but fails if I open the same document locally (file:///).
I'll see 'called' printed to the console when I open the document locally (thus callback fired w/o issue) but:
There is no request listed in Firebug's/Chrome's network tab.
The variables in common.js aren't defined and none of the console.log statements run.
Require.js is NOT requesting the common.js file when the document is loaded from my desktop.
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: 'https://s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
Given that baseurl states the http/s protocal, I don't understand why this is failing when the document is located on my desktop and works fine when the document is located at http://whatever.com.
Secondary/related:
Ideally I'd like to omit the protocals and allow the browser to handle that itself but this of course also fails completely locally.
(same code as above, sans http/https)
<html>
<head></head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: '//s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
This probably has nothing to do with Require.js and everything to do with how browsers handle requests from file:
Is there a sensible way to make this work regardless of the document's location?
It's baseUrl, with only the U in capitals. You're using baseURL which is ignored.
I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.