Detecting and changing URL of src in Chrome App Webview

Question

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

Answer 1

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:

1. The page chrome://inspect/#apps will list all App windows and you can attach Dev Tools from there.

2. 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.