I'm writing a chrome extension that injects a content script into every page the user goes to. What i want to do is to get the output of a python function for some use in the content script (can't write it in javascript, since it requires raw sockets to connect to my remote SSL server).
I've read that one might use CGI and Ajax or the like, to get output from the python code into the javascript code, but i ran into 3 problems:
I cannot allow hosting the python code on a local server, since it is security sensitive data that only the local computer should be able to know.
Chrome demands that HTTP and HTTPS can not mix- if the user goes to an HTTPS website, i can't host the python code on a HTTP server.
I don't think Chrome even supports CGI on extensions-when i try to access a local file, all it does is print out the text (the python code itself) instead of what i defined to be its output (I tried to do so using Flask). As I said in 1, I shouldn't even try this anyway, but this is just a side note.
So my question is, how do i get the output of my python functions inside a Content Script, built with javascript?
Native Messaging may be your answer here.
You can designate a Native Host application that an extension or app will be able to invoke (probably through a background page in case of an extension), and that can be a Python script.
In fact, the sample app for it uses a Python script.
The only way to get the output of a Python script inside a content script built with Javascript is to call the file with XMLHttpRequest. As you noted, you will have to use an HTTPS connection if the page is served over HTTPS. A workaround for this is to make a call to your background script, which can then fetch the data in whichever protocol it likes, and return it to your content script.
Related
I am working on a personal project in which I want to read the whole HTML of a JavaScript dependent webpage. For Example if I to load this URL in a JavaScript Enabled web browser, this is what I get:
However, if I disable JavaScript in the browser, and load the same URL now, I get this:
This is pretty normal I know.
Now I am trying to load the HTML of the same link in JavaScript code using axios HTTP client, and obviously I am getting the HTML of JavaScript disabled webpage as the HTTP response.
I want to get the HTML(+JS) source as the response of the same link (in which JavaScript is enabled). I don't know how to mimic a JavaScript enabled Web Browser when working with HTTP clients like axios or fetch API.
If you're trying to do this in the browser, you basically can't unless the site you're loading lets you do so (via CORS or similar). You'd have to load it into a window or iframe, wait for its JavaScript to run, and then access the resulting DOM. But accessing the DOM of a cross-origin page is disabled by default.
The only browser-based way I can think of is to write and install a browser extension, since when a user installs an extension, they can grant greater power to the extension than a web page normally has.
If you're trying to do this in a non-browser environment, you can use a headless browser like headless Chromium or similar. The browser-based restrictions don't apply.
So, I'm pretty new to Django, python, and javascript.
I have a partially functional Django webserver that, while developing it, I host locally on my machine.
I've made a button with HTML which I've figured out can be tied to a javascript script. The next step for me was to make this button "execute" a python script that's sitting on my machine, particularly on the /desktop directory. I can of course move the script though, but the important part is that I want that python script (let's call it django_test_script.py) to open its own window on my machine. It's just a file that says "hi" in stdout, then closes after 5 seconds, but due to the plan for this whole project, I want that to happen. I want to have my website open on my machine, click that button, then have the script's console pop up on my desktop and run/finish.
The eventual goal is to control an LED strip that's plugged into my raspberry pi. I want colored buttons on the website that, when clicked, run appropriate python scripts that turn the lights to that color. It wouldn't take me long to write up the python scripts themselves that would change colors, but I need to bridge the gap between "button causes a py script to run" and the python script actually running.
I see a ton of questions similar to this, but they all seem to involve running the python scripts WITHIN the webserver, like internal files that do everything and then return something to the server via an HttpResponse.
I don't need an HttpResponse. Literally all I want to do for right now is figure out how to make a script that's stored on the machine run.
I've done some reading on AJAX and I'm guessing that's involved, however everything I've tried has failed with AJAX in terms of actually getting the server to RUN a script. I've been scouring the internet for over an hour now and have found basically nothing useful (as far as I can tell) so I figured I may as well ask for help. Can someone please point me in the right direction in terms of what I'll need to do?
I'm afraid that's not possible. The browser doesn't allow to execute local scripts since everything is (for security reasons) in a sandbox.
If you want to execute something you could do one of the following:
Use a http server which executes the script and call it via AJAX
You build it into an exectron / nodejs app which opens more possibilities to access the system. See this example
But from your requirement I assume the website will be opened on another device to remote control the Pi led? If you you'll need to use some sort of http server as otherwise you can't run the script on the pi itself.
I'd like to use html+css+js to create an interface for setting up a simulation. The interface is used to create a visualisation of the simulation, and an output parameters file, by using several input files.
This web-page does NOT need to run on a server and is only run locally on the same machine.
I understand why a sever page is not allowed to access a client file, and that a server page may access another server file. Is it possible for a LOCAL web-page to access a local file?
It is possible to view the contents of any file using file:///path/to/file.txt so I presume that it is somehow possible to pull the result into a running page in the form of a string. However I'm having very little success.
If it is possible please could you detail a simple example of how the contents of a txt file could be read into a string?
Thank you very much
node.js is a javascript implementation that can easily do such things because it is a process running on the machine. A web page is running in a browser which does not have access to the file system, so that would not be possible, however you could bundle your web application into an electron application which would be able to access the osand file system, so while it would use html and javascript it would still require an installation.
If you are using Chrome, you can launch it with the --allow-file-access-from-files flag. Then you can do:
fetch('file:///path/to/file.txt')
.then(function(response) {
// do something with it
})
I have developed some touchscreen content that will be run on a local machine at an event. It will be run full screen using Chrome, and I need to load various html content dynamically into a container. Is this possible, as the usual JQuery load() and ajax methods only seem to work when running off of a server. All the content sits in its own folder as a html file, so I just need to point to the correct html file as and when needed.
Is there a way to do this when all content is being run locally?
It sounds like you're not running an http server. You can't get ajax from the file:// protocol. You need to run a local http server.
If your backend language is javascript, you should run nodejs
If your backend is php you should probably run apache2
I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script
The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?
Why not using something more straight foreword like mustache.js ?
I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.