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
Related
I'm writing a Chrome Extension and I would like to get all HTML, CSS and images/media content from the currently loaded web page.
If I use document.documentElement.innerHTML it gives me all of the HTML code as expected but has links to the CSS and image files.
Is it possible to get the entire loaded web page contents or would this only be possible using a scraper?
I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.
There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.
The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html
I am developing a chrome extension for fetching ads from a web page. What I am trying to do is that:
My extension should look for HTML5 banner ads from the opened web page.
It should detach the ad code and save it to my computer as an html file.
The html file created should not depend on an external JS or CSS file. It means when it gets detached, the CSS or JS code attached to it should be detached and saved as a part of the html page (not a hyper link).
I was wondering if there are any existing libraries or open source plugins that do that. If not, can anyone point me in the right direction where to begin?
This won't directly pick out banner ads for you, you'll need to do that yourself, but all the functionality you're hoping for is available using content scripts.
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"
How to get SWF url form a webpage using javascript. Actually I want to retrieve all SWF from a webpage, So I wrote an Greasemonkey Script that scans OBJECT, EMBED etc tags to get the swf url. My script works fine on most of the pages, but fails on this one http://www.elkspel.nl/spelletjes/Film+And+TV+spelletjes/Eva+Mendes+Opmaken.html this page is not having any Object, Embed tag in its source and my script fails here.
Is there any way to get SWF Url from any webpage??
In this case, the object tag is embedded into the page loaded into the iFrame. To get the SWF url manually, just grab the url of the page in the iFrame and open it in a browser. Automating that might be difficult though. You would have to do the same thing via code - grab the url from the iFrame and load the page.
You could also look through the Firebug /Net/Flash/ tab and grab the URLs for any SWFs there.