Refactor Style Editor, Upgrade to Manifest V3, and Update Changelog

Changelog.md

@@ -1,32 +1,39 @@
+# 0.4 / 2023-09-15
 
-0.3 / 2013-03-27 
-==================
+- Upgraded to manifest_version 3
+- Modularized codebase using IIFE (StyleEditor module)
+- Modernized JavaScript (const/let, arrow functions)
+- Improved code organization and readability
+- Enhanced modularity with focused functions
+- Centralized constants and setup functions
+- Refined existing features (selector generation, style extraction)
+- Maintained core functionality (in-browser editing, storage, shortcuts)
 
-  * Update version to 0.3.
-  * Only throttle when saving styles to local storage. Let updates to style tag go through for quick previewing.
-  * Make styles !important to prevent site's stylesheet for overriding.
-  * Automatically fill in selector by alt + clicking element.
-  * Save CSS less frequently. Handle change event so copy-pasting saves CSS.
-  * Maintain editor's left-to-right direction even on right-to-left websites.
+# 0.3 / 2013-03-27
 
-0.2 / 2013-03-27 
-==================
+- Update version to 0.3.
+- Only throttle when saving styles to local storage. Let updates to style tag go through for quick previewing.
+- Make styles !important to prevent site's stylesheet for overriding.
+- Automatically fill in selector by alt + clicking element.
+- Save CSS less frequently. Handle change event so copy-pasting saves CSS.
+- Maintain editor's left-to-right direction even on right-to-left websites.
 
-  * Update README with new shortcut.
-  * Update extension version to 0.2.
-  * Switch shortcut to control + m for Windows support.
+# 0.2 / 2013-03-27
 
-0.1 / 2013-03-27 
-==================
+- Update README with new shortcut.
+- Update extension version to 0.2.
+- Switch shortcut to control + m for Windows support.
 
-  * Remove Chrome extension file (.crx) in favor of the Chrome web store.
-  * Add installation instructions.
-  * Improve README usage instructions.
-  * Move extension files into separate directory. Generate packed extension.
-  * Fix typo in README.
-  * Add further usage instructions to README.
-  * Add README and LICENSE.
-  * Add help message.
-  * Factor out constants. Add further documentation.
-  * Run script at document_start to provide snappier CSS injection.
-  * Initial commit.
+# 0.1 / 2013-03-27
+
+- Remove Chrome extension file (.crx) in favor of the Chrome web store.
+- Add installation instructions.
+- Improve README usage instructions.
+- Move extension files into separate directory. Generate packed extension.
+- Fix typo in README.
+- Add further usage instructions to README.
+- Add README and LICENSE.
+- Add help message.
+- Factor out constants. Add further documentation.
+- Run script at document_start to provide snappier CSS injection.
+- Initial commit.

README.md

@@ -1,10 +1,12 @@
 # My Style
+
 [My Style](https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb)
 is a Google Chrome extension that allows you to insert custom CSS into pages,
 immediately see the visual results, and have that CSS persist for future
 visits.
 
 ## Usage
+
 Take TechCrunch, for example. You may dislike the site's design and want to add
 your own touch--that is, your own style--to make it aesthetically pleasing.
 After installing the extension, visit [TechCrunch](http://techcrunch.com) and
@@ -29,33 +31,40 @@ editor. With this, you can circumvent the time it takes to inspect the element
 to find how to target it.
 
 ## Installation
+
 You may install My Style at the
 [Chrome Web Store](https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb).
 Just click the 'Add to Chrome' button.
 
 ## How it works
+
 My Style is quite simple. It inserts a textarea into the page, looks for
 changes to the textarea's contents, and updates a dynamically inserted style
 tag appropriately. My Style employs local storage to make CSS changes
 persistent. It uses simple technologies for a simple result.
 
 ## Improvements
+
 Sites that clear local storage can erase My Style's custom CSS. A more
 persistent form of storage (e.g. the JavaScript FileSystem APIs) would be
 a better option to retain CSS.
 
 ## Contributors
+
 ### Karthik Viswanathan
+
 - GitHub: [@karthikv](https://github.com/karthikv)
 - Twitter: [@karthikvnet](https://twitter.com/karthikvnet)
 - Website: [http://karthikv.net](http://karthikv.net)
 - Email: [email protected]
 
 ## Safari extension
+
 If you use Safari, consider downloading Luke Hagan's Safari port of My Style.
 It can be found at [lhagan/my-style](https://github.com/lhagan/my-style).
 
 ## License
+
 (The MIT License)
 
 Copyright (c) 2013 Karthik Viswanathan <[email protected]>

extension/manifest.json

@@ -1,14 +1,16 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
 
   "name": "My Style",
   "description": "Insert custom CSS into pages, immediately see the visual results, and have that CSS persist for future visits.",
   "version": "0.3",
 
-  "content_scripts": [{
-    "matches": ["http://*/*", "https://*/*"],
-    "css": ["my-style.css"],
-    "js": ["my-style.js"],
-    "run_at": "document_start"
-  }]
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "css": ["my-style.css"],
+      "js": ["my-style.js"],
+      "run_at": "document_start"
+    }
+  ]
 }