I am developing a chrome App that would serve as an Arduino code editor based on Cylon project. A js script (let's call it output.js
) is generated incorporating the led toggling logic or whatever else we want to achieve with the arduino and compiling it with other node dependencies using browserify. In their chrome extension example they statically reference this script in index.html
.
Since, I am working on an editor that will allow users to write arbitrary code to work on arduino, I am generating the contents for output.js
dynamically. I have gotten to a point where I can successfully generate contents of output.js
and I have written a function that injects that data into a script
tag. However, Google Chrome throws an error:
Refused to execute inline script because it violates the following Content Security Policy directive:
"default-src 'self' blob: filesystem: chrome-extension-resource:".
Either the 'unsafe-inline' keyword, a hash ('sha256-Mugizlz7AFKJ2hm6UA9ySY/31cKCVhLaEX9/QYpJIsk='),
or a nonce ('nonce-...') is required to enable inline execution.
Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
So, I realize I need to execute inline javascript which could be a potential security vulnerability. I know that content scripts are designed specifically to inject custom JS or CSS into web pages but they work in context of a website or web address.
I want to modify the dom and inject custom JS in a standalone chrome App and not a chrome extension that works in context of some websites or tabs. From whatever little research I did on the subject, I guess content scripts are not a valid concept for chrome apps. How do I then inject javascript into the DOM for a chrome App. What are the possible alternatives to content scripts I have in this situation?