Changing Images using extension Javascript - javascript

I have an extension installed on my Firefox browser which has a Javascript.
Also I have created a HTML file which has a Image tag with default image.
Everytime when I open that page, if my extension is enabled I want to change the Image which I have specified in my extension.
If the extension is disabled, then my default image should stay on that HTML page?
I need to perform something like
document.getElementById("check_image").src="Capture3.jpg"
in my extension JS.. so whenever I open a HTML page with Image ID "Check_Image", my extension JS should change the image to "Capture3.jpg".
Could you please tell me whether this can be done?
Thanks in advance!

Yes can be done. But you need to provide appropriate the relative path.
Folder
- mypage.html
- Capture.jpg
then you can change the image using your code in .js
document.getElementById("check_image").src="Capture3.jpg"

Related

How to download a canvas rendered pdf file opening in pdf.js?

I have zero knowledge with regard to coding. I desperately need to download a pdf file which is being shown in the fashion attached to this post. The download button is not working and I've tried everything which I can to download the file. Any help is welcome. Things which I've tried are
Finding file source in network tab under inspect element
Finding any URl leading to the pdf again in the inspect elements tab.
Saving the page as Html, upon which it downloads but never opens again with the pdf required.
Also in my limited research which I could make sense of was, the page used canvas element to render the pdf. Text of pdf is seen to be entered manually in a separate layer.
The address of the pdf being rendered is actually visible in the url on your image.
the ../../ means go up 2 directories.
So that means the absolute url for your pdf is this.
https://www.time4education.com/MoodlePages/catmttt/cat20materialvideos/VAHO1002103.pdf

Images are showing when I'm viewing the page with live server but when I'm opening the html file in the browser are not showing

I made a website in vscode with the live server extension. The images that I added are working in live server but when I'm opening the file separately they are not.
This is how I linked the images
src="/images/winter.png"
Use relative path src="~/images/winter.png" or src="./images/winter.png"
If you want to open the file separately use from the server:-
src="http:www.domainname.com/images/winter.png"
Please let me know if you have any questions. Thank you

Panel in Chrome Extension

I am working about Chrome Extension . I read a lot in Chrome developer but no result . My idea is load a html file to panel at right-bottom browser (or any position I liked) to show videos .I cannot use popup because it will be disappeared if i click anywhere.
Except popup,buttons on menu bar , how can i create a panel in chrome browser ?
You can inject the html in the tab where you want to show the html. See this answer how to inject html :
Inject HTML into a page from a content script
Use your own css as content script to position your element.
I assume you will be showing video in loaded html from external servers. But chrome extension do not allow you to reference external resources in your html. So you will need to download the video with response type blob and just set src of video element to this blob using window.URL.createObjectURL

Not able to open files from HyperLink control in IE9 & above

I am trying to open a file using hyperlink control, when I click on the link no action is getting triggered, but when I paste the file:/// path in IE browser directly the file is downloaded/opened, what could be the issue below is my href content and also one can check in JSFiddle at http://jsfiddle.net/q76VB/
My Link
Have you put the file on the server that is hosting your website?
Put the file in the same folder as your html files and change the link to this:
My Link

HTML - how to display local data in img tag?

I have an editable div and a user can paste a picture copied from Office Word. After doing so an image-tag can be seen in the source code, but the path does not work anymore. If I just enter the source link into to the browser, I can see the image. How to modify the link to make it work?
HTML
<img src="file:///C:/Users/myname/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" v:shapes="Grafik_x0020_1">
You can't open local file in site without user interaction. Browser won't allow that, because it would be great security flaw.

Categories

Resources