I am writing a chrome extension and injecting an image into the page. When I do this in my content script:
var loading_img = document.createElement('img');
var imgURL = chrome.extension.getURL("images/icon.png");
loading_img.src = imgURL;
document.body.appendChild(loading_img);
and I see my image as expected.
However, when I try to load a .gif image. Then the image doesn't load:
var loading_img = document.createElement('img');
var imgURL = chrome.extension.getURL("images/loading.gif");
loading_img.src = imgURL;
document.body.appendChild(loading_img);
I get a one of these:
However, if I inspect element and grab the src of the image element, chrome-extension://ofdomghnlpcpemcbmidihnbmojhnkhhf/images/loading.gif, and paste it into my browser window, then I can see the image just fine. Am I doing something wrong?
First, chrome.extension.getURL has been deprecated since Chrome 58, use chrome.runtime.getURL instead.
And second, you need to add your gif to web_accessible_resources inside your manifest.json like so:
"web_accessible_resources": ["images/loading.gif"],
Related
I like to use JSFiddle when designing a new interface because I find it convenient for various tools within. I'm working on the front end of a site where I want to use a video, and unlike an image, I cant just throw it up on imgur and link to it for free instant hosting while I fiddle with the interface design.
So I want to know if I can somehow use a local file on my PC as the source for an HTML video element hosted on a live site. Obviously this is trivial to do with a web project being worked on on my Desktop, but I'm not sure it can be done on a live test.
For example this would work on a page I open from my desktop, living on my PC:
<video id="Video-Player">
<source src="../movie.mp4" type="video/mp4"/>
</video>
But I don't know whether I can do the equivalent with a page living on the web.
Here's how to allow a user to select an image from their local machine. This should get you started in the right direction.
Add a file input button in the HTML
<input type="file" id="file-btn"/>
and the corresponding handler
document.getElementById('file-btn').addEventListener('change', function(e){
readFiles(e.target.files);
})
Then the code to read the files
function readFiles(files){
files = [].slice.call(files); //turning files into a normal array
for (var file of files){
var reader = new FileReader();
reader.onload = createOnLoadHandler(file);
//there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers
reader.readAsDataURL(file);
}
}
Now, I've only done this with images, but this is how I read the image data.
function createOnLoadHandler(file){
console.log('reading ' + file.name + ' of type ' + file.type)
function onLoad(e){
var data = e.target.result
display(data);
}
return onLoad
}
function display(data){
var img = document.createElement('img');
img.src = data;
var context = canvas.getContext('2d')
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
Here is a demo of the above code.
As a side note, if you try to read images from another domain you'll run into cross origin policy issues. I would think the same problem exists for videos as well.
I have a chrome extension which injects a content_script which injects an iframe into the document, e.g.:
var wrap = document.createElement('div');
wrap.id = "myiframe-wrap";
var iframe = document.createElement('iframe');
iframe.id = "myiframe";
iframe.src = chrome.extension.getURL("popup.html");
At some point of time I need to access one of the elements of myiframe from this content script. What is the best way to do it?
I currently try to call:
document.getElementById('myiframe').contentWindow.document.getElementById('some-id');
but, I'm getting cross origin issues.
I am using Nodejs and Firefox to display a web page. That page has a HTML5 audio element. The problem I have is related to the calcul of the audio duration.
In my node js script I have:
var app = require('http').createServer(handler)
, path = require("path")
, io = require('socket.io').listen(app)
, fs = require('fs')
, exec = require('child_process').exec
, spawn = require ('child_process').spawn
, util = require('util')
, extensions = {
".html": "text/html",
".css": "text/css",
".js": "application/javascript",
".png": "image/png",
".gif": "image/gif",
".ttf": "application/x-font-ttf",
".jpg": "image/jpeg",
".mp3": "audio/mp3",
".wav": "audio/wav",
".ogg": "audio/ogg"
}
, Files = {};
In my html web page I have:
<audio id="idaudio" src="" type="audio/wav" >Your browser does not support the audio element.</audio>
And some javascript code from my web page:
var thissound=document.getElementById("idaudio");
thissound.src="http://localhost/Audio/Song.wav";
//thissound.src="/Audio/Song.wav";
thissound.addEventListener('loadeddata', function() {
var durationaudio = (thissound.duration)*1000;
});
When I check the durationaudio I get the right number and then I can play the song using thissound.play(); This code is working in Firefox and Chromium.
If I change
thissound.src="http://localhost/Audio/Song.wav" -> thissound.src="/Audio/Song.wav"
Adding the ".wav": "audio/wav" extension in the node script, I can play the Song using Firefox and Chromium; In Chromium I get also the right number of the durationaudio but using Firefox I get a durationaudio=Infinity. This is the problem. I dont know why Firefox is not able to get the right duration. Maybe I have to add some extension ... in the node script in order to allow Firefox to get the duration of the audio. Any ideas?
This script works:
var page = require('webpage').create();
var html = '<h1>Test</h1><img>'; //works with page.setContent and page.content
//var html = '<h1>Test</h1><img src=".">'; //only works with page.content
page.setContent(html, 'http://github.com');
//page.content = html;
page.render('test.png');
phantom.exit();
but adding a src attribute to the img makes it fail silently (page.render returns false and no image is generated).
Setting page.content directly works in both cases but then relative URLs don't. The same thing happens with other tags that load a resource such as link. It doesn't matter whether the linked resource exists or not. Tested in 1.8.1 and 1.9.2.
Is this a bug or have I misunderstood the API?
You can not render webpage if it is not fully loaded.
When you are setting link or src to <img>, It will try to load image asynchronously.
So, it requires to wait for loading finished.
Try following code.
page.onLoadFinished = function(status) {
page.render('test.png');
phantom.exit();
};
page.setContent(html, 'http://github.com');
I am working on a site where i have arranged my pages in directories except for the index page. My problem occurs when i use jquery to append images to a div within a section of the pages. It shows on the index page but not on other pages (which are directories). I understand why but not sure how i can fix it.
Is there a way to fix this without having to remove my other files from directories?
var $img1 = $('<img src="images/test1.jpg" />');
var $img2 = $('<img src="images/test2.jpg" />');
$('#container').append($img1, $img2);
Please note that the above code is also in a separate directory
Assuming that your images folder is located within the root directory of your website, you could just make the src attribute root-relative:
var $img1 = $('<img src="/images/test1.jpg" />');
var $img2 = $('<img src="/images/test2.jpg" />');
$('#container').append($img1, $img2);
(Note the / added to the beginning of the src attribute).
Reference:
Having links relative to root? (Apologies for any percieved self-promotion, but it was the first Google result here on Stackoverflow for my search for "root-relative url site:stackoverflow.com").
You can write the full link including domain name: var $img1 = $('<img src="http://www.yoursitename.com/images/test1.jpg" />');