Detecting and changing URL of src in Chrome App Webview - javascript

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.

Related

How do I inspect an Electron app's DOM from a script?

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.

how to stop modification and changes in client side source file in developer tool?

I am using angular in i can easily add some javascript code and modify the program. Is there any way to stop modification in source file?
You can use the Uglify and Minify methods to make changes difficult, but never stop them.
Its Developer Feature provided in browser to do client side modification for testing purposes.
you dont worry it wont modify your source code anyhow.. its just for some time till the page getting reloaded..
because your code will located in server which secure enough. so its not possible to edit from client side tool like Developer console
But if you can prevent user to get into Developer tools .
user following ctrl+shift+i or F12 or Right Click->inspect Element way to get into it.
you can still disable those prevent user to enter into Dev tools.
for more info how to disable dev tools

How can I Extract JavaScript Source on Chrome Extension or Console-Command?

HTML :
<html> <script scr="http://someurl.com/jscript.js"></script></html>
I'm trying to extract source code of jscript.js in chrome extension.
But there is no attribute of DOM Object holding source of js.
Is there a way to extract the source code of JavaScript which is loaded on page?
(By using DOM object or some internal object, except re-downloading the script)
Because.. Some web-server returns different source code depends on the request-packet (Usually.. BAD servers do that). So If I tried to download it with different request, I can't get the same one that was loaded on the browser.
According to Is external JavaScript source available to scripting context inside HTML page?, it's not normally possible without redownloading since it's not exposed to the DOM.
An extension, however, can hook into information available to the browser.
The simplest would be to create a DevTools extension. It would only work when the DevTools are open on the page, but then you can easily access the source with chrome.devtools.inspectedWindow.getResources().
Somewhat harder, but one can use chrome.debugger API to achieve the same while DevTools are closed. It's a low-level API, but it allows doing everything DevTools can do. I don't have a ready example, but Debugger Protocol docs will help.
Neither is possible from a content script.
You can also go directly to the extension on your file system:
Where to find extensions installed folder for Google Chrome on Mac?
for example on my mac book computer:
pwd
output: ~/Library/Application\ Support/Google/Chrome/Default/Extensions/hkbhjllliedcceblibllaodamehmbfgm/1.7.1_0

firefox addon: Talking back to the script

I am new to extension programming but find making extensions in Chrome much more easier, but now that I am trying to port my test extensions to FF I have a few questions of how to do the same things I do in Chrome... now in FF.
For example:
In Chrome I have a page in my extensions directory called: domains.html
I link to that page from my popup and it has access to all my scripts etc but the "outside" world cannot directly access that.
Is there any such thing in FF so that I can show a page that is in my add on folder and has access to my add-on's JS and other files?
Thanks!
Take a look at some of the docs for opening URLs in new Tabs and manipulating the content of the tab:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Opening_a_URL_in_a_new_tab
Once you get comfortable with that, try opening an HTML page that lives in your add-on. First, you need to be aware of the 'content' package name you registered in your chrome.manifest file. Second, make sure your 'domains.html' file is in the content folder of your add-on. To open the web page in a new tab using a button or menu in Firefox use code like this:
gBrowser.addTab("chrome://mypackagename/content/domains.html");
You can should be able to load other JS and CSS files from your add-on into the web page using similar chrome:// URIs.

How do you log to the error console from untrusted Javascript?

In Chromium, 'console.log()' lets you print to the error console, but only from javascript embedded in the html, or in a .js file on the local machine.
What are your workarounds for debugging Javascript that is contained in .js files on a remote machine and included in a page?
Add breakpoints and / or watch expressions.
See http://code.google.com/chrome/devtools/docs/scripts-breakpoints.html
I recently had to do this with a Facebook SDK javascript, hosted by Facebook. I downloaded the script and hosted it locally for debugging. I could then add in all the console.log messages I wanted.
When everything was done I removed the local file and returned to Facebook's hosted script.
Phil's suggestion of breakpoints is also very useful when you want the value of a variable at a specific location in the code.
Another useful technique for code executed upon a user action, such as a button click, is to use the Scripts tab of the Chrome inspector, or FireBug in FF, to edit the javascript prior to execution. I've had limited use for this, but it's quite useful from time to time.
The problem is cross-domain security policy. Only javascript from the domain of the html file can use console.log

Categories