Currently, I am in the process of developing a Chrome app and have implemented CSS from a previous post. The main issue I am facing is with the textarea element that I am using. I am open to exploring alternative solutions to achieve the desired outcome. Specifically, I am looking to ensure that the size of the textarea remains consistent with the window size.
You can find reference to the original question below.
Despite my efforts, I have been unable to align the textarea with the border of the window. In order to create an efficient text editor app, it is crucial for the textarea to match the window size seamlessly. You can access the current version of the app through the link provided below. Although the app functions properly, adjusting the size of the textarea manually is not ideal.
This issue needs to be addressed urgently.
Additionally, I am looking to incorporate a "save to disk" button that remains fixed in the bottom right corner of the app interface. Unfortunately, I lack the knowledge on how to implement this feature and would greatly appreciate any assistance available.
Below is the content of the manifest.json file:
{
"manifest_version": 2,
"name": "Text Edity",
"short_name": "TextEdity",
"description": "A simple text editor, does nothing but edit text!",
"version": "0.0.1",
"minimum_chrome_version": "38",
"icons": {
"16": "assets/icon_16.png",
"128": "assets/icon_128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
I have experimented with some JavaScript code, however, it did not yield the desired result. Additionally, if a save button were to be added, there is a concern that users might inadvertently modify or delete it.
document.body.contentEditable='true';document.designMode='on';void 0;
The HTML structure is as follows:
`<!DOCTYPE html>
<html>
<head>
<title>Text Edity</title>
<link rel="icon" type="image/png" href="text.png">
</head>
<body>
<textarea cols='95' rows='44' placeholder='Text Edity'></textarea>
</body>
</html>`
Lastly, here is the content of background.js:
/**
* Listens for the app launching, then creates the window.
*
* @see http://developer.chrome.com/apps/app.runtime.html
* @see http://developer.chrome.com/apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {width: 800, height: 800}
}
);
});