Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johndatserakis/chrome-ribbon-reminder
🎀 A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.
https://github.com/johndatserakis/chrome-ribbon-reminder
async await bootstrap bootstrap4 chrome chrome-extension fontawesome vue webpack
Last synced: 3 months ago
JSON representation
🎀 A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.
- Host: GitHub
- URL: https://github.com/johndatserakis/chrome-ribbon-reminder
- Owner: johndatserakis
- License: mit
- Created: 2018-04-10T02:07:42.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-28T01:36:57.000Z (3 months ago)
- Last Synced: 2024-10-28T05:27:33.647Z (3 months ago)
- Topics: async, await, bootstrap, bootstrap4, chrome, chrome-extension, fontawesome, vue, webpack
- Language: TypeScript
- Homepage: https://chrome.google.com/webstore/detail/ribbon-reminder/ahdegcekcodbkojmccabgmfcfddabnbd
- Size: 4.66 MB
- Stars: 12
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ribbon Reminder
## Links
- [Live in the Chrome Web Store](https://chromewebstore.google.com/detail/ribbon-reminder/ahdegcekcodbkojmccabgmfcfddabnbd)
- [GitHub](https://github.com/johndatserakis/chrome-ribbon-reminder)
## About
Stay on top of every task, right from your toolbar. Ribbon Reminder’s badge counter lets you add, edit, and delete tasks instantly. Simply tie or untie tasks to update your count - because everyone could use a little backup. It's like tying a ribbon on your finger.
Ribbon Reminder started as an iOS app I built in Swift, and I think its concept would be perfect for an extension. I’ve open-sourced the project so others can explore and learn from it!
## Develop
Utilizes a HotBuild plugin to build the app on each save.
To see changes close and reopen the popup window.
Load unpacked extension from `./dist`.
You could also visit http://localhost:5173/src/popup/index.html to view the popup outside of the popup world.
```bash
yarn dev
```
Inspect Chrome storage sync
```js
chrome.storage.sync.get(console.log);
```
To clear the Chrome sync storage, run this in the popup.
```ts
chrome.storage.local.clear(function () {
const error = chrome.runtime.lastError;
if (error) {
console.error(error);
}
});
chrome.storage.sync.clear();
```
## Build
```bash
# Local Dev
yarn build:package
```
The resulting `./ribbon-reminder.zip` is what you upload to the extension store.
## Chrome vs. Firefox build
Update the `background` property in ./public/manifest.json to this for each build:
### Chrome
```json
{
"background": {
"service_worker": "src/background/index.js",
"type": "module"
}
}
```
### Firefox
```json
{
"background": {
"scripts": ["src/background/index.js"],
"type": "module"
}
}
```
From what I've read, you can leave the `browser_specific_settings` property in the `manifest.json`, even though it's only used in Firefox.
## Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
## License
[MIT](http://opensource.org/licenses/MIT)