I have an Electron app running on my computer (Slack). I would like to run some JavaScript that reads HTML DOM of this app. Is this possible? If so, is there a "getting started" somewhere?
In my mind, since Electron uses Node.js to host HTML / JavaScript, I can possibly read the DOM. At the same time, I could see this not being allowed because it could be a security risk. I'm ok with the security risk since it's running on my machine. So, I assume there would be a UAC prompt. Still, I'm just trying to figure out how to read the DOM from an external script if possible.
Thank you
From my understanding you want to inspect or manipulate some HTML of a electron app which is installed?
This is how I figured out how to access (on Mac OS) using Slack as an example:
Go to your Applications Folder -> Slack -> Right click "Show Package Contents"
Go To "Contents->Resources -> app.asar.unpacked"
You can check out how for example parts of the slack app work.
I tried this also with GChat app and they have an app folder. Technically speaking, you could add a script or something into the index.html / index.jade (slack) and hijack into the main.js or index.js scripts.
For example I was able to search for BrowserWindow Object inside the Chat App of Google Chat and add .webContents.openDevTools(); easily.
Yet any solution involves manual work.
For example in the main.js of of GChat I beautified the code, I searched for the Electron method buildFromTemplate and found the specific function where the View Menu is created. I simply added the following to that
{
role: "toggledevtools",
label: "Toogle Dev Tools"
}
And at the end I was able to easily toogle devtools (seen in the screenshot)
If you are thinking of accessing DOM through console (dev tools) like in a browser, then it's something you cannot do. Because dev tools are available only in development environment, once you build it, you cannot access it.
So running a script may require the electron app to include the script in the source code :
<script src="your-script.js"></script>
So if they included your script in their app, then you could change the content of the script to achieve what you are looking for.
You can add your script into the page (before it loads) and have it there to interact with any page you open in electron.
The easiest way to do that is using preload paramater of new window.
Bear in mind, that you can even make connection with your nodejs script so there is really nice way of communicating with opened pages and your own script in node/electron.
More here: https://electronjs.org/docs/api/browser-window
preload String (optional) - Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope. See example here.
Related
I'm pretty new in VS Code, and I'm looking for an automated solution to debug Haxe JavaScript project.
A way to open or live-reload browser after compilation, like in FlashDevelop, Intelij.
Now, I use an external localhost server (MAMP), and after each build I reload the browser manually. It works, but is not very efficient.
Lets me know how you do that. ;)
For info, I'm on mac
Check out the MIX Live Server extension. You can give it a path to your index.html, for instance if it's build/index.html:
{
"mix.rootPath": "build"
}
and then it will detect file changes and reload the page automatically. Note that this does not open the page in a browser, but a separate VSCode tab.
I would like to list all the images I have in a specified folder inside of my chrome extension. However, I think I am fighting web technologies on this one. Is there any env in the chrome extension that executes javascript in a "server" context, as in, could read the files in it's neighboring folders?
Here's what my web accessible resources param looks like:
"web_accessible_resources": ["*.jpg","*.JPG", "*.png", "*.PNG"]
I have background script and content script both enabled.
I've tried running an ajax query against the dir to see if it will index but also no luck.
There seems to be no direct way.
As a workaround you can set up a native app. Get the resources and directories from the manifest file and if there are any wildcards, as in your example, search the directories for them using traditional system calls.
Here's a link to how you can set up the native app and communicate with it using your extension: https://developer.chrome.com/extensions/nativeMessaging
Using Chrome://inspect and going to a Chrome App and then source snippets with chrome dev tools, you can use the following code to check the src attribute from a webview and redirect if it has been changed. This may occur when forexample an App is running on a public wifi that auto redirects and a set time period. I want to be able to check for that redirected URL and change it back.
setInterval(function(){
var x = document.getElementsByTagName("webview")[0].getAttribute("src"); //get current domain
//pseudo code - check if x matches a domain...
document.getElementsByTagName("webview")[0].setAttribute("src","Your URL here"); //set webview to domain
},5000);
Where is the best place to put this Javascript code? And does anyone have an example.
What I have tried so far:
inline? if so, then what is the best way to do this as an error message regarding updating the manifest file allowing "unsafe-inline". However, I have read there are security concerns regarding this.
a js file within the app - I tried this but i was unable to find the file in the chrome dev tools to debug and it didn't work. Console.log also would not work. How do you debug JS files from within a Chrome App?
a js file sourced from a server with a nonce? I tried to follow the instructions at http://www.w3.org/TR/2015/CR-CSP2-20150721/#script-src-nonce-usage but couldnt get it to work. Does anyone have an example?
Also, are there any appropriate event listeners that can be used instead? I thought the webview loadRedirect event could be used. If so, where do i put this code?
https://developer.chrome.com/apps/tags/webview#event-loadredirect
Code that interacts with the <webview> element should be running in the same document as that element. So, assuming that page is app.html, you would need to include a script there.
Inline code will not work in a Chrome App, period. You should add a separate local .js file and reference it with a <script> element.
As for inspecting / debugging apps, you need to attach to the app window, not the background/event page. There are 2 helpful tools:
The page chrome://inspect/#apps will list all App windows and you can attach Dev Tools from there.
You can set a Chrome flag to enable context menu with Inspect on Chrome App windows, chrome://flags/#debug-packed-apps, if you expect to do it often.
I want to create a web app platform that runs locally on the users computer.
I am considering using google chrome's app process to make this work.
I am having trouble understanding, wether google will let me do this. so the user would have to download the main chrome app , which contains the base html and javascript code, and within the app be able to download and store locally with in the app new html and js code.
So in other words I want to create an app that allows users to download and install apps from my own app store, and have them run within the chrome app.
Does google chrome app development allow this?
if not what are my alternatives for creating an app that needs to run on a browser storing all files locally?
You can download HTML and CSS as much as you want and then use JavaScript to modify the DOM accordingly. It's not set up as any kind of system that lets you substitute pages, and there's no navigation within the app (using A elements), but you are free to modify the DOM.
There's no way to add any JavaScript to what's initially in the app, as eval and the other code-executing functions are disabled. You can certainly add SCRIPT elements to the DOM, but the files they reference have to have been part of the app at the time it was installed.
Having said all that, you can implement the app as an interpreter for some language and then download programs written in that language. It's just that none of the code can be direct Chrome App code, nor can any code you download (regardless of language) make direct Chrome API calls.
Have you looked at the HTML5 Filesystem API? You can fetch a file and reference it later. You also need the add the "unlimitedStorage" permission to manifest.json.
http://www.html5rocks.com/en/tutorials/file/filesystem/
There is probably a better title for I'd like to accomplish, but the details should be helpful.
I've recently learned that specifying a script's src path as //some.domain.com rather than http://some.domain.com or https://some.domain.com will cause the browser to request the script using whichever protocol was used to load the page. This works great when the page is loaded from a site, but often I debug on my local system, so the protocol is file, and of course errors occur whenever resources or scripts aren't found.
Other than changing src paths, is there a better way to debug locally? I imagine there is code solution that detects when the page is running locally versus loaded from a domain, but I haven't found examples yet.
Install a product such as wampserver, then you'll have a localhost webserver you can test everything on. This is how I do it, works like a charm.
There are similar products available for ASP or other non-PHP server-side technologies (you didn't specify), if you are just doing HTML + JS then any old server would do.