Along the way, you will learn:
- How to create, run, and debug a Chrome App in Step 1.
- How to update an existing web app as a Chrome App, deal with Content Security Policy issues, and add local storage support in Step 2.
- How to implement alarms and notifications in Step 3.
- How to display web pages inline in Step 4.
- How to load resources (like images) from external sources in Step 5.
- How to write to a file in the native filesystem in Step 6.
- How to publish your app to the Chrome Web Store in Step 7.
Step 1:Create and Run a Chrome App
Create a manifest
Create a background script
Create an HTML view
Install a Chrome App in developer mode
Launch your finished Hello World app
Debug a Chrome App with Chrome DevTools
Step 2:Import an Existing Web App
Import an existing Todo app
Reload your app now (right-click > Reload App). You should see the basic UI but you won't be able to add todos.
Make scripts Content Security Policy (CSP) compliant#
The solution is simple: move the inline content to a new file.
1. Near the bottom of index.html, remove the inline JavaScript and instead include js/bootstrap.js:
2. Create a file in the js folder named bootstrap.js. Move the previously inline code to be in this file:
You'll still have a non-working Todo app if you reload the app now but you're getting closer.
Convert localStorage to chrome.storage.local
Chrome Apps do not support
localStorage as localStorage is synchronous. Synchronous access to blocking resources (I/O) in a single-threaded runtime could make your app unresponsive.
Chrome Apps have an equivalent API that can store objects asynchronously. This will help avoid the sometimes costly object->string->object serialization process.
To address the error message in our app, you need to convert
localStorage to chrome.storage.local.
No comments:
Post a Comment