ChromeOS AutoStart v5.0

README.md

@@ -15,15 +15,15 @@
 
 ## Installation
 > [!IMPORTANT]
-> This extension conflicts with [Secure Shell extension](https://chrome.google.com/webstore/detail/iodihamcpbpeioajjeobimgagajmlibd). (as this extension [used its ID](#How-does-it-works))
+> This extension conflicts with [Secure Shell extension (development version)](https://chrome.google.com/webstore/detail/algkcnfjnajfhgimadimbjhmpaeohhln). (as this extension [used its ID](#How-does-it-works))
 >
 > Please remove it before installing this extension (if installed), otherwise this extension might not work as expected
 
-- Download [archive](https://github.com/supechicken/ChromeOS-AutoStart/archive/refs/tags/v3.0.1.zip) of this repository and unzip it
+- Download [the latest release (in `zip`)](https://github.com/supechicken/ChromeOS-AutoStart/releases/latest) and unzip it
 - Go to `chrome://extensions` and enable Developer Mode
-- Click `Load unpacked extension` and select the `ChromeOS-AutoStart-main` unzipped folder
-- A new window will appear and type the command you want to run it at startup
-- Optional: Click the `Test` button to test it out after setting a command
+- Click `Load unpacked extension` and select the `ChromeOS-AutoStart-<version>` unzipped folder
+- A new window will appear and add command(s) you want to run at startup
+- Optional: Click the `Test run` button to test it out after adding a command
 
 <em>* Please do not delete the unzipped folder after loading the extension, otherwise the extension will get deleted after reboot</em>
 

changelog.md

@@ -0,0 +1,16 @@
+# v5.0 (2024-02-26)
+## New features
+- Running commands in `crosvm` (e.g Crostini) and `crosh` are supported now
+- Multiple autostart entries can be added now
+
+## Major changes
+- Migrate to Manifest V3 as Manifest V2 is deprecated
+- Refactored whole extension, along with better user interface
+- Bring back `hterm` for easier debugging and terminal-like appearance
+
+## Misc
+- Put HTML, JavaScript and CSS files into separated folders
+- Added icon in SVG format
+- Improved README.md
+
+---

css/button.css

@@ -0,0 +1,29 @@
+a, button {
+  font-family: 'Google Sans', sans-serif;
+  text-decoration: none;
+  background-color: transparent;
+  color: rgb(26,115,232);
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 10px 20px;
+  margin: 5px;
+  display: inline-block;
+  border-radius: 20px;
+  border: 2px solid #cccccc7d;
+  opacity: 1;
+  transition: opacity 0.3s;
+  cursor: pointer;
+}
+
+a:hover, button:hover {
+  background-color: #5e71d212;
+}
+
+a.tone2, button.tone2 {
+  background-color: #1a73e8;
+  color: white;
+}
+
+a.tone2:hover, button.tone2:hover {
+  opacity: 0.9;
+}

css/stylesheet.css

@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@100;200;300;400;500;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Prompt:wght@500&family=Raleway:wght@200;300;500;700&display=swap');
+@import url(button.css);
+@import url(theme.css);
+
+body {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  font-weight: lighter;
+}
+
+fieldset, textarea, input[type="text"] {
+  border-radius: 7px;
+}
+
+textarea, input[type="text"] {
+  background-color: transparent;
+  color: var(--txt-color);
+  border: 2px solid #cccccc7d;
+}
+
+input[type="text"]:disabled {
+  color: gray;
+}
+
+fieldset {
+  margin-bottom: 5px;
+}
+
+fieldset > * {
+  margin-bottom: 2px;
+}
+
+tr > td {
+  white-space: pre;
+  padding-right: 10px;
+  min-width: 150px;
+}
+
+.monospace {
+  font-family: monospace;
+}
+
+.horizontal-center {
+  display: flex;
+  align-items: center;
+}
+
+.horizontal-center > * {
+  margin: 10px 5px;
+}

css/theme.css

@@ -0,0 +1,25 @@
+:root {
+  --bg-color: white;
+  --bg-subcolor: rgba(0, 0, 0, 0.05);
+  --txt-color: black;
+  --green: #329f23;
+  --red: #ff3131;
+  --gray: #8b8b8b;
+  --yellow: #ffff00;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #202124;
+    --bg-subcolor: rgba(255, 255, 255, 0.1);
+    --txt-color: #ebebeb;
+  }
+}
+
+html, body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bg-color);
+  color: var(--txt-color);
+}

html/addEntry.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>Add a new entry</title>
+
+  <link rel="stylesheet" href="/css/stylesheet.css" />
+  <script src="/js/addEntry.js" defer></script>
+
+  <style>
+    fieldset {
+      width: calc(100% - 50px);
+    }
+
+    fieldset > label {
+      display: inline-block;
+      min-width: 1.5in;
+    }
+
+    #cmdBox {
+      height: 1.5in;
+      width: calc(100% - 9px);
+    }
+  </style>
+</head>
+
+<body>
+  <fieldset>
+    <legend>Autostart type</legend>
+
+    <input type="radio" id="crosh" name="autostart_type" value="crosh" checked />
+    <label for="crosh">ChromeOS shell (crosh)</label>
+
+    <input type="radio" id="vmshell" name="autostart_type" value="vmshell" />
+    <label for="vmshell">ChromeOS VM (crosvm)</label>
+
+    <input type="radio" id="dev_bash" name="autostart_type" value="devshell" />
+    <label for="dev_bash">Developer mode shell</label>
+  </fieldset>
+  <fieldset>
+    <legend>Specific settings for crosvm</legend>
+
+    <label for="vmName">VM name</label>
+    <input type="text" id="vmName" class="monospace" value="termina" disabled />
+    <br />
+
+    <label for="containerName">Container name</label>
+    <input type="text" id="containerName" class="monospace" value="penguin" disabled />
+    <br />
+  </fieldset>
+  <fieldset>
+    <legend id="cmdBox_prompt">Commands</legend>
+    <textarea id="cmdBox" placeholder="Enter or paste your command(s) here"></textarea>
+  </fieldset>
+  <div class="horizontal-center">
+    <button id="cancelBtn">Cancel</button>
+    <button id="saveBtn">Save</button>
+  </div>
+</body>
+
+</html>

html/autoStart.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>ChromeOS AutoStart</title>
+
+  <link rel="stylesheet" href="/css/stylesheet.css" />
+  <script src="/js/hterm.js"></script>
+  <script src="/js/autoStart.js" defer></script>
+
+  <style>
+    #terminal {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id='terminal'></div>
+</body>
+
+</html>

html/listEntries.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>ChromeOS AutoStart</title>
+
+  <link rel="stylesheet" href="/css/stylesheet.css" />
+  <script src="/js/listEntries.js" defer></script>
+
+  <style>
+    body {
+      min-width: 700px;
+      padding-bottom: 50px;
+    }
+
+    .entry {
+      position: relative;
+      padding: 20px;
+      margin-bottom: 10px;
+      width: 80%;
+      background-color: var(--bg-subcolor);
+      border-radius: 15px;
+    }
+
+    .deleteBtn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+
+    .cmdBox {
+      box-sizing: border-box;
+      margin-top: 10px;
+      width: 100%;
+      height: 100px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Current autostart command(s)</h1>
+  <div class="horizontal-center" style="justify-content: center;">
+    <button id="testBtn">Test run</button>
+    <button id="addEntryBtn">Add a new entry</button>
+  </div>
+  <p id="totalEntries"></p>
+</body>
+
+</html>

js/addEntry.js

@@ -0,0 +1,35 @@
+const cancelBtn     = document.getElementById('cancelBtn'),
+      saveBtn       = document.getElementById('saveBtn'),
+      cmdBox        = document.getElementById('cmdBox'),
+      cmdBox_prompt = document.getElementById('cmdBox_prompt'),
+      vmName        = document.getElementById('vmName'),
+      containerName = document.getElementById('containerName');
+
+document.querySelectorAll('input[name="autostart_type"]').forEach(e => {
+  e.onchange = () => {
+    // only crosh does not support bash syntax
+    cmdBox_prompt.innerText = (e.checked && e.value == 'crosh') ? 'Commands' : 'Commands (Bash syntax supported)';
+
+    // enable VM/container name input box only when vmshell is selected
+    vmName.disabled = containerName.disabled = !(e.checked && e.value == 'vmshell');
+  };
+});
+
+// close the window if user cancelled
+cancelBtn.onclick = () => window.close();
+
+// save entry to local storage
+saveBtn.onclick = async () => {
+  const localStorage      = await new Promise(resolve => chrome.storage.local.get(['autostart_entries'], callback => resolve(callback))),
+        autostart_entries = localStorage.autostart_entries || [],
+        autostart_type    = document.querySelector('input[name="autostart_type"]:checked')?.value;
+
+  chrome.storage.local.set({
+    autostart_entries: autostart_entries.concat([{
+      type:          autostart_type,
+      vmName:        (autostart_type === 'vmshell') ? vmName.value : null,
+      containerName: (autostart_type === 'vmshell') ? containerName.value : null,
+      cmd:           cmdBox.value
+    }])
+  }, () => window.close()); // close window when completed
+};