I have a HTML file that I want to inject next to each result of a Google search result page from a Chrome extension.
I was wondering if I could use an iframe to load the HTML file?
This is instead of my current implementation that uses insertAdjacentHTML() in my Content Script and a horrible long string of HTML and inline CSS. Would much prefer to have a separate HTML file with its own CSS that I can just insert instead.
I tried:
chosenElements[i].insertAdjacentHTML('afterbegin', `<iframe src="/inject.html"></iframe>`);
but just get an iframe with a 404 page because it is looking in the 'https://www.google.com/index.html' directory rather than where the file sits.
The inject.html file is in the same place as the index.html file in my build folder for the extension. How do I access it? Can I access it?
Have you tried with
src="inject.html"
instead of
src="/inject.html"
Related
I want to write a npm package to localize an html url.
1. using the html url download the html page
2. parse the html file, extract all the js, css and img files used in the html and local these resources.
3. If these js, css and img files using some external resources, localize these resources. For example, extract background image in the css.
The first and second requirements are easy to meet. But I have no idea about the last one.
I can parse the all the css files and localize the resources used in it. But how can I parse the js files?
For example:
If the js adds a 'script src = XXX' tag into the html dom, how can I extract the src?
I think I would try to use a headless browser to catch every network calls instead of trying to parse the code.
I didn't used it personally but PhantomJS seems to fit the bill.
It can be used to load a webpage then execute any script / css that would normally happen on the request and execute stuff once the page is loaded.
The network monitoring features are probably what you'll want to use.
For displaying a google drive html document in an iframe, we first share the file "Public on the web" and take the documnet ID of it. Then this is appended to hosting link(https://googledrive.com/host/) (running this link on browser will display the output of the html file, instead of simply displaying the contents of that file) and given as src to iframe tag.
But my requirement is not to share the file publicly, since it has sensitive information. We can set the permission of the google site in such a way that only specific people can access it. For that, the html file should still be shared publicly, which shouldn't happen in my case.
Also, in this case, appending document ID of the file whose permission is restricted to hosting link (https://googledrive.com/host/) will give 404 error. Kindly help me on this. Advance thanks.
One solution is to run code that gets the contents of the HTML file, then use an Apps Script Gadget with HTML Service to display the HTML file.
Add a Google Apps Gadget to your Site.
Go into the scripts section of your site.
Create a new Apps Script script
write code to get the HTML file contents
return that HTML
Add the script to the gadget
The HTML file in your drive will NOT need to be shared with anyone. The Apps Script however, must run as YOU, in order to access the file.
This code injects the HTML into the Apps Gadget when the Site opens. I've tested it, and it works. It gets a HTML file from my Drive, converts the HTML to a String, then serves the HTML into the Site:
function doGet() {
var fileHTML = DriveApp.getFileById('The file ID');
var theHTML = fileHTML.getBlob().getDataAsString();
return HtmlService.createHtmlOutput(theHTML)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
};
To get the file ID of an HTML file in your Drive, right click on the file name, and choose "GET LINK". Then copy the link. Inside that link is the file ID.
I've currently got a folder with 2 files in it. The first file is output.log which is the text that I want to somehow load into the javascript code. The second file is view.html which contains the javascript. The html file will only be opened on the local users machine and not on a website.
I've tried to embed output.log as an iframe and read the contents, but that has not worked.
The browser prevents a script from manipulating data in an iframe if the origin of the data contained in the iframe is different from the containing web page. This is to prevent cross-site scripting attacks.
You could use the jQuery get() function and then output the returned content to a named <div> element
$(document).ready(function() {
$.get('path/to/output.log',
function(data){
$('.somediv').html(data);
}
);
});
similiar How can I get the content of the file specified as the 'src' of a <script> tag? and Getting content of a script file using Javascript , I want to use script tag to load xml files for the use of a javascript code - only I need it to run locally.
so how can I access the content of the files loaded using script tag?
You can not achieve this one locally.
Loading the script will execute it and won't give you access to the src
so then the only option you would have is to load the file as an ajax call. But ajax calls don't work locally (due to security) .
I'm testing a flash script that calls a JavaScript function (both, the swf and the HTML file are local). The flash movie is not allowed to access the HTML file that contains the js-function.
I've learned that I have to put both files into a security sandbox, so I added the path to both files (HTML+swf) to a file test.cfg in C:\WINDOWS\system32\Macromed\Flash\FlashPlayerTrust.
But still the same problem. What to do?
thanks!
The requirement for calling from Flash to JS is that you have the allowScriptAccess parmeter set in your embedding code of your HTML document. Iirc, you can specify always or sameDomain and it will work. The second option obviously require the swf to be coming from the same domain.