├── .gitignore ├── CONTRIBUTING.md ├── README.md ├── dist └── output.css ├── package-lock.json ├── package.json ├── public ├── index.html ├── logo.png └── manifest.json ├── src ├── App.jsx ├── assets │ ├── close.png │ ├── github.png │ ├── index.js │ └── info.jpg ├── components │ ├── Bookmark.js │ └── Card.js ├── index.css ├── index.jsx └── pages │ └── About.jsx └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Advanced Bookmarks Extension 2 | 3 | Thank you for your interest in contributing to the Advanced Bookmarks Chrome Extension! We welcome contributions from the community to help make this extension even better. Please take a moment to review this document for guidelines on how to contribute. 4 | 5 | ## Getting Started 6 | 7 | To install the Advanced Bookmark Chrome Extension locally using npm, follow these steps: 8 | 9 | 1. **Clone the Project** 10 | ```bash 11 | git clone https://github.com/nishaaannnt/advance-bookmarks.git 12 | ``` 13 | 14 | 2. **Go to the project directory** 15 | 16 | ```bash 17 | cd advance-bookmarks 18 | ``` 19 | 20 | 3. **Install dependencies** 21 | 22 | ```bash 23 | npm install 24 | ``` 25 | 26 | 4. **Build the Project** 27 | 28 | ```bash 29 | npm run build 30 | ``` 31 | 32 | 5. **Open the Chrome browser** and go to the Extensions page. You can access it by typing chrome://extensions in the address bar. 33 | 34 | 6. **Enable the Developer mode** by toggling the switch at the top-right corner of the Extensions page. 35 | 36 | 7. **Click on the "Load unpacked" button** and select the **build folder** from the project directory. 37 | 38 | 8. The Advance Bookmark extension should now be installed in your Chrome browser. You can find its icon in the toolbar. 39 | 40 | ## Contributing Guidelines 41 | 42 | We welcome contributions! Please follow these guidelines: 43 | 44 | **1. Fork the repository:** 45 | 46 | Fork the Advanced Bookmarks repository on GitHub. 47 | 48 | **2. Create a branch:** 49 | 50 | Create a new branch for your contribution. 51 | 52 | **3. Make your changes:** 53 | 54 | Implement your feature or fix bugs. Please ensure your code follows the existing coding style. 55 | 56 | * Watch the Project Changes During Development 57 | ```bash 58 | npm run watch 59 | ``` 60 | - Note : Wait for the build to be completed. 61 | 62 | **4. Test your changes:** 63 | 64 | Ensure that your changes work as expected and do not introduce new issues. 65 | 66 | **5. Commit your changes:** 67 | 68 | Write clear and concise commit messages. 69 | 70 | **6. Push your changes:** 71 | 72 | Push your changes to your forked repository. 73 | 74 | **7. Create a pull request:** 75 | 76 | Create a pull request from your branch to the main repository. 77 | 78 | **8. Follow up:** 79 | 80 | Respond to any feedback or comments provided during the review process. 81 | 82 | 83 | 84 | 85 | ### Please follow the Code of Conduct while contributing. 86 | 87 | Thank you for contributing to the Advanced Bookmarks Extension! 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Advance Bookmark 🔖 2 | 3 | ![advanceBookmarkGithub](https://github.com/nishaaannnt/advance-bookmarks/assets/100792085/a8217a3b-8a57-4827-885f-be2c9f7bee91) 4 | 5 | A Chrome Extension and a useful tool that allows users to access their browser bookmarks without the need to switch tabs. It aims to streamline the browsing experience by providing quick and easy access to frequently visited websites. The extension features a simple and intuitive user interface, making it convenient and efficient for users to manage and access their bookmarks. 6 | 7 | ## Advantages 8 | - **Efficient Bookmark Access**: With the Advance Bookmark extension, users can access their bookmarks directly from the browser toolbar, eliminating the need to navigate through multiple tabs. 9 | - **Time-Saving**: By avoiding the hassle of switching tabs or searching for bookmarks, users can save valuable time and enhance their productivity. 10 | - **Simplified UI**: The extension offers a clean and straightforward user interface, ensuring a user-friendly experience for all users. 11 | 12 | ## Contributing 13 | Please go through Contributing guidelines before contributing - [Contributing](CONTRIBUTING.md)! 14 | 15 | ## Run Locally 16 | 17 | **Please make your own branch if any changes are to be made eg. feature/dark, bug/bookmark-name** 18 | 19 | To install the Advance Bookmark Chrome Extension locally using npm, follow these steps: 20 | 21 | Clone the project 22 | 23 | ```bash 24 | git clone https://github.com/nishaaannnt/advance-bookmarks.git 25 | ``` 26 | 27 | Go to the project directory 28 | 29 | ```bash 30 | cd advance-bookmarks 31 | ``` 32 | 33 | Install dependencies 34 | 35 | ```bash 36 | npm install 37 | ``` 38 | 39 | Build the Project 40 | 41 | ```bash 42 | npm run build 43 | ``` 44 | 45 | - Open the Chrome browser and go to the Extensions page. You can access it by typing chrome://extensions in the address bar. 46 | 47 | - Enable the Developer mode by toggling the switch at the top-right corner of the Extensions page. 48 | 49 | - Click on the "Load unpacked" button and select the **build folder** from the project directory. 50 | 51 | - The Advance Bookmark extension should now be installed in your Chrome browser. You can find its icon in the toolbar. 52 | 53 | 54 | 55 | Once the Advance Bookmark extension is installed, you can pin it and click on its icon in the Chrome toolbar to open the bookmark list. From there, you can easily access your saved bookmarks without switching tabs. 56 | 57 | Feel free to fork and use the code or contribute ! 58 | -------------------------------------------------------------------------------- /dist/output.css: -------------------------------------------------------------------------------- 1 | /* 2 | ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com 3 | */ 4 | 5 | /* 6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 8 | */ 9 | 10 | *, 11 | ::before, 12 | ::after { 13 | box-sizing: border-box; 14 | /* 1 */ 15 | border-width: 0; 16 | /* 2 */ 17 | border-style: solid; 18 | /* 2 */ 19 | border-color: #e5e7eb; 20 | /* 2 */ 21 | } 22 | 23 | ::before, 24 | ::after { 25 | --tw-content: ''; 26 | } 27 | 28 | /* 29 | 1. Use a consistent sensible line-height in all browsers. 30 | 2. Prevent adjustments of font size after orientation changes in iOS. 31 | 3. Use a more readable tab size. 32 | 4. Use the user's configured `sans` font-family by default. 33 | 5. Use the user's configured `sans` font-feature-settings by default. 34 | 6. Use the user's configured `sans` font-variation-settings by default. 35 | */ 36 | 37 | html { 38 | line-height: 1.5; 39 | /* 1 */ 40 | -webkit-text-size-adjust: 100%; 41 | /* 2 */ 42 | /* 3 */ 43 | tab-size: 4; 44 | /* 3 */ 45 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 46 | /* 4 */ 47 | -webkit-font-feature-settings: normal; 48 | font-feature-settings: normal; 49 | /* 5 */ 50 | font-variation-settings: normal; 51 | /* 6 */ 52 | } 53 | 54 | /* 55 | 1. Remove the margin in all browsers. 56 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 57 | */ 58 | 59 | body { 60 | margin: 0; 61 | /* 1 */ 62 | line-height: inherit; 63 | /* 2 */ 64 | } 65 | 66 | /* 67 | 1. Add the correct height in Firefox. 68 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 69 | 3. Ensure horizontal rules are visible by default. 70 | */ 71 | 72 | hr { 73 | height: 0; 74 | /* 1 */ 75 | color: inherit; 76 | /* 2 */ 77 | border-top-width: 1px; 78 | /* 3 */ 79 | } 80 | 81 | /* 82 | Add the correct text decoration in Chrome, Edge, and Safari. 83 | */ 84 | 85 | abbr:where([title]) { 86 | -webkit-text-decoration: underline dotted; 87 | text-decoration: underline dotted; 88 | } 89 | 90 | /* 91 | Remove the default font size and weight for headings. 92 | */ 93 | 94 | h1, 95 | h2, 96 | h3, 97 | h4, 98 | h5, 99 | h6 { 100 | font-size: inherit; 101 | font-weight: inherit; 102 | } 103 | 104 | /* 105 | Reset links to optimize for opt-in styling instead of opt-out. 106 | */ 107 | 108 | a { 109 | color: inherit; 110 | text-decoration: inherit; 111 | } 112 | 113 | /* 114 | Add the correct font weight in Edge and Safari. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bolder; 120 | } 121 | 122 | /* 123 | 1. Use the user's configured `mono` font family by default. 124 | 2. Correct the odd `em` font sizing in all browsers. 125 | */ 126 | 127 | code, 128 | kbd, 129 | samp, 130 | pre { 131 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 132 | /* 1 */ 133 | font-size: 1em; 134 | /* 2 */ 135 | } 136 | 137 | /* 138 | Add the correct font size in all browsers. 139 | */ 140 | 141 | small { 142 | font-size: 80%; 143 | } 144 | 145 | /* 146 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 147 | */ 148 | 149 | sub, 150 | sup { 151 | font-size: 75%; 152 | line-height: 0; 153 | position: relative; 154 | vertical-align: baseline; 155 | } 156 | 157 | sub { 158 | bottom: -0.25em; 159 | } 160 | 161 | sup { 162 | top: -0.5em; 163 | } 164 | 165 | /* 166 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 167 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 168 | 3. Remove gaps between table borders by default. 169 | */ 170 | 171 | table { 172 | text-indent: 0; 173 | /* 1 */ 174 | border-color: inherit; 175 | /* 2 */ 176 | border-collapse: collapse; 177 | /* 3 */ 178 | } 179 | 180 | /* 181 | 1. Change the font styles in all browsers. 182 | 2. Remove the margin in Firefox and Safari. 183 | 3. Remove default padding in all browsers. 184 | */ 185 | 186 | button, 187 | input, 188 | optgroup, 189 | select, 190 | textarea { 191 | font-family: inherit; 192 | /* 1 */ 193 | font-size: 100%; 194 | /* 1 */ 195 | font-weight: inherit; 196 | /* 1 */ 197 | line-height: inherit; 198 | /* 1 */ 199 | color: inherit; 200 | /* 1 */ 201 | margin: 0; 202 | /* 2 */ 203 | padding: 0; 204 | /* 3 */ 205 | } 206 | 207 | /* 208 | Remove the inheritance of text transform in Edge and Firefox. 209 | */ 210 | 211 | button, 212 | select { 213 | text-transform: none; 214 | } 215 | 216 | /* 217 | 1. Correct the inability to style clickable types in iOS and Safari. 218 | 2. Remove default button styles. 219 | */ 220 | 221 | button, 222 | [type='button'], 223 | [type='reset'], 224 | [type='submit'] { 225 | -webkit-appearance: button; 226 | /* 1 */ 227 | background-color: transparent; 228 | /* 2 */ 229 | background-image: none; 230 | /* 2 */ 231 | } 232 | 233 | /* 234 | Use the modern Firefox focus style for all focusable elements. 235 | */ 236 | 237 | :-moz-focusring { 238 | outline: auto; 239 | } 240 | 241 | /* 242 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 243 | */ 244 | 245 | :-moz-ui-invalid { 246 | box-shadow: none; 247 | } 248 | 249 | /* 250 | Add the correct vertical alignment in Chrome and Firefox. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /* 258 | Correct the cursor style of increment and decrement buttons in Safari. 259 | */ 260 | 261 | ::-webkit-inner-spin-button, 262 | ::-webkit-outer-spin-button { 263 | height: auto; 264 | } 265 | 266 | /* 267 | 1. Correct the odd appearance in Chrome and Safari. 268 | 2. Correct the outline style in Safari. 269 | */ 270 | 271 | [type='search'] { 272 | -webkit-appearance: textfield; 273 | /* 1 */ 274 | outline-offset: -2px; 275 | /* 2 */ 276 | } 277 | 278 | /* 279 | Remove the inner padding in Chrome and Safari on macOS. 280 | */ 281 | 282 | ::-webkit-search-decoration { 283 | -webkit-appearance: none; 284 | } 285 | 286 | /* 287 | 1. Correct the inability to style clickable types in iOS and Safari. 288 | 2. Change font properties to `inherit` in Safari. 289 | */ 290 | 291 | ::-webkit-file-upload-button { 292 | -webkit-appearance: button; 293 | /* 1 */ 294 | font: inherit; 295 | /* 2 */ 296 | } 297 | 298 | /* 299 | Add the correct display in Chrome and Safari. 300 | */ 301 | 302 | summary { 303 | display: list-item; 304 | } 305 | 306 | /* 307 | Removes the default spacing and border for appropriate elements. 308 | */ 309 | 310 | blockquote, 311 | dl, 312 | dd, 313 | h1, 314 | h2, 315 | h3, 316 | h4, 317 | h5, 318 | h6, 319 | hr, 320 | figure, 321 | p, 322 | pre { 323 | margin: 0; 324 | } 325 | 326 | fieldset { 327 | margin: 0; 328 | padding: 0; 329 | } 330 | 331 | legend { 332 | padding: 0; 333 | } 334 | 335 | ol, 336 | ul, 337 | menu { 338 | list-style: none; 339 | margin: 0; 340 | padding: 0; 341 | } 342 | 343 | /* 344 | Prevent resizing textareas horizontally by default. 345 | */ 346 | 347 | textarea { 348 | resize: vertical; 349 | } 350 | 351 | /* 352 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 353 | 2. Set the default placeholder color to the user's configured gray 400 color. 354 | */ 355 | 356 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 357 | opacity: 1; 358 | /* 1 */ 359 | color: #9ca3af; 360 | /* 2 */ 361 | } 362 | 363 | input::placeholder, 364 | textarea::placeholder { 365 | opacity: 1; 366 | /* 1 */ 367 | color: #9ca3af; 368 | /* 2 */ 369 | } 370 | 371 | /* 372 | Set the default cursor for buttons. 373 | */ 374 | 375 | button, 376 | [role="button"] { 377 | cursor: pointer; 378 | } 379 | 380 | /* 381 | Make sure disabled buttons don't get the pointer cursor. 382 | */ 383 | 384 | :disabled { 385 | cursor: default; 386 | } 387 | 388 | /* 389 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 390 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 391 | This can trigger a poorly considered lint error in some tools but is included by design. 392 | */ 393 | 394 | img, 395 | svg, 396 | video, 397 | canvas, 398 | audio, 399 | iframe, 400 | embed, 401 | object { 402 | display: block; 403 | /* 1 */ 404 | vertical-align: middle; 405 | /* 2 */ 406 | } 407 | 408 | /* 409 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 410 | */ 411 | 412 | img, 413 | video { 414 | max-width: 100%; 415 | height: auto; 416 | } 417 | 418 | /* Make elements with the HTML hidden attribute stay hidden by default */ 419 | 420 | [hidden] { 421 | display: none; 422 | } 423 | 424 | *, ::before, ::after { 425 | --tw-border-spacing-x: 0; 426 | --tw-border-spacing-y: 0; 427 | --tw-translate-x: 0; 428 | --tw-translate-y: 0; 429 | --tw-rotate: 0; 430 | --tw-skew-x: 0; 431 | --tw-skew-y: 0; 432 | --tw-scale-x: 1; 433 | --tw-scale-y: 1; 434 | --tw-pan-x: ; 435 | --tw-pan-y: ; 436 | --tw-pinch-zoom: ; 437 | --tw-scroll-snap-strictness: proximity; 438 | --tw-gradient-from-position: ; 439 | --tw-gradient-via-position: ; 440 | --tw-gradient-to-position: ; 441 | --tw-ordinal: ; 442 | --tw-slashed-zero: ; 443 | --tw-numeric-figure: ; 444 | --tw-numeric-spacing: ; 445 | --tw-numeric-fraction: ; 446 | --tw-ring-inset: ; 447 | --tw-ring-offset-width: 0px; 448 | --tw-ring-offset-color: #fff; 449 | --tw-ring-color: rgb(59 130 246 / 0.5); 450 | --tw-ring-offset-shadow: 0 0 #0000; 451 | --tw-ring-shadow: 0 0 #0000; 452 | --tw-shadow: 0 0 #0000; 453 | --tw-shadow-colored: 0 0 #0000; 454 | --tw-blur: ; 455 | --tw-brightness: ; 456 | --tw-contrast: ; 457 | --tw-grayscale: ; 458 | --tw-hue-rotate: ; 459 | --tw-invert: ; 460 | --tw-saturate: ; 461 | --tw-sepia: ; 462 | --tw-drop-shadow: ; 463 | --tw-backdrop-blur: ; 464 | --tw-backdrop-brightness: ; 465 | --tw-backdrop-contrast: ; 466 | --tw-backdrop-grayscale: ; 467 | --tw-backdrop-hue-rotate: ; 468 | --tw-backdrop-invert: ; 469 | --tw-backdrop-opacity: ; 470 | --tw-backdrop-saturate: ; 471 | --tw-backdrop-sepia: ; 472 | } 473 | 474 | ::-webkit-backdrop { 475 | --tw-border-spacing-x: 0; 476 | --tw-border-spacing-y: 0; 477 | --tw-translate-x: 0; 478 | --tw-translate-y: 0; 479 | --tw-rotate: 0; 480 | --tw-skew-x: 0; 481 | --tw-skew-y: 0; 482 | --tw-scale-x: 1; 483 | --tw-scale-y: 1; 484 | --tw-pan-x: ; 485 | --tw-pan-y: ; 486 | --tw-pinch-zoom: ; 487 | --tw-scroll-snap-strictness: proximity; 488 | --tw-gradient-from-position: ; 489 | --tw-gradient-via-position: ; 490 | --tw-gradient-to-position: ; 491 | --tw-ordinal: ; 492 | --tw-slashed-zero: ; 493 | --tw-numeric-figure: ; 494 | --tw-numeric-spacing: ; 495 | --tw-numeric-fraction: ; 496 | --tw-ring-inset: ; 497 | --tw-ring-offset-width: 0px; 498 | --tw-ring-offset-color: #fff; 499 | --tw-ring-color: rgb(59 130 246 / 0.5); 500 | --tw-ring-offset-shadow: 0 0 #0000; 501 | --tw-ring-shadow: 0 0 #0000; 502 | --tw-shadow: 0 0 #0000; 503 | --tw-shadow-colored: 0 0 #0000; 504 | --tw-blur: ; 505 | --tw-brightness: ; 506 | --tw-contrast: ; 507 | --tw-grayscale: ; 508 | --tw-hue-rotate: ; 509 | --tw-invert: ; 510 | --tw-saturate: ; 511 | --tw-sepia: ; 512 | --tw-drop-shadow: ; 513 | --tw-backdrop-blur: ; 514 | --tw-backdrop-brightness: ; 515 | --tw-backdrop-contrast: ; 516 | --tw-backdrop-grayscale: ; 517 | --tw-backdrop-hue-rotate: ; 518 | --tw-backdrop-invert: ; 519 | --tw-backdrop-opacity: ; 520 | --tw-backdrop-saturate: ; 521 | --tw-backdrop-sepia: ; 522 | } 523 | 524 | ::backdrop { 525 | --tw-border-spacing-x: 0; 526 | --tw-border-spacing-y: 0; 527 | --tw-translate-x: 0; 528 | --tw-translate-y: 0; 529 | --tw-rotate: 0; 530 | --tw-skew-x: 0; 531 | --tw-skew-y: 0; 532 | --tw-scale-x: 1; 533 | --tw-scale-y: 1; 534 | --tw-pan-x: ; 535 | --tw-pan-y: ; 536 | --tw-pinch-zoom: ; 537 | --tw-scroll-snap-strictness: proximity; 538 | --tw-gradient-from-position: ; 539 | --tw-gradient-via-position: ; 540 | --tw-gradient-to-position: ; 541 | --tw-ordinal: ; 542 | --tw-slashed-zero: ; 543 | --tw-numeric-figure: ; 544 | --tw-numeric-spacing: ; 545 | --tw-numeric-fraction: ; 546 | --tw-ring-inset: ; 547 | --tw-ring-offset-width: 0px; 548 | --tw-ring-offset-color: #fff; 549 | --tw-ring-color: rgb(59 130 246 / 0.5); 550 | --tw-ring-offset-shadow: 0 0 #0000; 551 | --tw-ring-shadow: 0 0 #0000; 552 | --tw-shadow: 0 0 #0000; 553 | --tw-shadow-colored: 0 0 #0000; 554 | --tw-blur: ; 555 | --tw-brightness: ; 556 | --tw-contrast: ; 557 | --tw-grayscale: ; 558 | --tw-hue-rotate: ; 559 | --tw-invert: ; 560 | --tw-saturate: ; 561 | --tw-sepia: ; 562 | --tw-drop-shadow: ; 563 | --tw-backdrop-blur: ; 564 | --tw-backdrop-brightness: ; 565 | --tw-backdrop-contrast: ; 566 | --tw-backdrop-grayscale: ; 567 | --tw-backdrop-hue-rotate: ; 568 | --tw-backdrop-invert: ; 569 | --tw-backdrop-opacity: ; 570 | --tw-backdrop-saturate: ; 571 | --tw-backdrop-sepia: ; 572 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advance-bookmark", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "next-themes": "^0.2.1", 10 | "react": "^18.2.0", 11 | "react-beautiful-dnd": "^13.1.1", 12 | "react-dom": "^18.2.0", 13 | "react-icons": "^4.11.0", 14 | "react-scripts": "5.0.1", 15 | "react-toggle-dark-mode": "^1.1.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "watch": "npm-watch", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "watch": { 26 | "build": { 27 | "patterns": [ 28 | "src" 29 | ], 30 | "extensions": "js,jsx,css" 31 | } 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "npm-watch": "^0.11.0", 53 | "tailwindcss": "^3.3.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | React App 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nishaaannnt/advance-bookmarks/04e552aeb23dadf2185cbbe006a538958af0c7c4/public/logo.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "manifest_version": 3, 4 | "name": "Advance Bookmark", 5 | "permissions":[ 6 | "bookmarks" 7 | ], 8 | "description": "This is a Chrome extension built with React", 9 | "action": { 10 | "default_popup": "index.html" 11 | }, 12 | "icons":{ 13 | "128":"logo.png" 14 | }, 15 | "commands": { 16 | "_execute_action": { 17 | "suggested_key": { 18 | "windows": "Ctrl+Shift+Q", 19 | "mac": "MacCtrl+Shift+Q" 20 | }, 21 | "description": "Open Your Extension" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | /*global chrome*/ 2 | import React, { useState, useEffect } from 'react'; 3 | import Card from './components/Card'; 4 | import { info, close, GoSun, FaMoon, AiOutlineClose, FaInfo, SlOptionsVertical } from './assets'; 5 | import About from './pages/About'; 6 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; 7 | 8 | 9 | const App = () => { 10 | const [loading, setLoading] = useState(false); 11 | const [bookmarks, setBookmarks] = useState([]); 12 | const [about, setAbout] = useState(false); 13 | const [darkMode, setDarkMode] = useState(null) 14 | 15 | useEffect(() => { 16 | setLoading(true); 17 | try { 18 | const storedBookmarks = localStorage.getItem('bookmarks'); 19 | if (storedBookmarks) { 20 | setBookmarks(JSON.parse(storedBookmarks)); 21 | } else { 22 | // Fetch bookmarks from the browser's bookmarks API as you did before 23 | chrome.bookmarks?.getTree(function (bookmarkTreeNodes) { 24 | const bookmarks = []; 25 | function traverseBookmarks(bookmarkNodes) { 26 | for (let node of bookmarkNodes) { 27 | if (node.children) { 28 | traverseBookmarks(node.children); 29 | } else { 30 | bookmarks.push({ 31 | id: node.id, 32 | title: node.title, 33 | url: node.url, 34 | thumbnailUrl: `https://www.google.com/s2/favicons?domain=${node.url}`, 35 | }); 36 | } 37 | } 38 | } 39 | traverseBookmarks(bookmarkTreeNodes); 40 | setBookmarks(bookmarks); 41 | // Save the initial bookmarks to local storage 42 | localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); 43 | }); 44 | } 45 | } catch (error) { 46 | console.log(error); 47 | } finally { 48 | setLoading(false); 49 | } 50 | }, []); 51 | 52 | const handleAbout = () => { 53 | setAbout(!about); 54 | }; 55 | 56 | const onDragEnd = (result) => { 57 | if (!result.destination) return; 58 | 59 | const reorderedBookmarks = [...bookmarks]; 60 | const [reorderedBookmark] = reorderedBookmarks.splice( 61 | result.source.index, 62 | 1 63 | ); 64 | reorderedBookmarks.splice(result.destination.index, 0, reorderedBookmark); 65 | 66 | // Save the reordered bookmarks to local storage 67 | localStorage.setItem('bookmarks', JSON.stringify(reorderedBookmarks)); 68 | 69 | setBookmarks(reorderedBookmarks); 70 | }; 71 | 72 | useEffect(() => { 73 | if(window.matchMedia('(prefers-color-scheme: dark)').matches){ 74 | setDarkMode('dark'); 75 | } 76 | else { 77 | setDarkMode('light'); 78 | } 79 | }, []) 80 | 81 | useEffect(() => { 82 | if (darkMode === "dark") { 83 | document.documentElement.classList.add("dark"); 84 | } else { 85 | document.documentElement.classList.remove("dark"); 86 | } 87 | }, [darkMode]); 88 | 89 | const toggleDarkMode = () => { 90 | setDarkMode(darkMode === "dark" ? "light" : "dark"); 91 | }; 92 | 93 | 94 | 95 | return ( 96 |
97 |
98 |

Advanced Bookmarks

99 | {darkMode === 'dark' ? ( 100 | 104 | ): 105 | 109 | } 110 | {darkMode === 'dark' ? ( 111 | 122 | ): 123 | 133 | } 134 |
135 | {about ? ( 136 | 137 | ) : ( 138 | 139 | 140 | {(provided) => ( 141 |
    146 | {bookmarks.map((bookmark, index) => ( 147 | 152 | {(provided) => ( 153 |
  • 158 |
    window.open(bookmark.url, '_blank')} className='flex w-full hover:cursor-pointer'> 159 | Bookmark Icon 164 | 167 | {bookmark.title.length > 30 168 | ? `${bookmark.title.substring(0, 30)}...` 169 | : bookmark.title} 170 | 171 |
    172 |
    176 | {/* Replaced the icon with a vertical dots icon */} 177 | 178 | {/* */} 179 | 180 |
    181 |
    • 182 | )} 183 |     184 | ))} 185 | {provided.placeholder} 186 |
187 | )} 188 | 189 | 190 | )} 191 |
192 | ); 193 | }; 194 | 195 | export default App; 196 | -------------------------------------------------------------------------------- /src/assets/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nishaaannnt/advance-bookmarks/04e552aeb23dadf2185cbbe006a538958af0c7c4/src/assets/close.png -------------------------------------------------------------------------------- /src/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nishaaannnt/advance-bookmarks/04e552aeb23dadf2185cbbe006a538958af0c7c4/src/assets/github.png -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | import github from './github.png' 2 | import info from './info.jpg' 3 | import close from './close.png' 4 | import { FaInfo } from "react-icons/fa"; 5 | import { AiOutlineClose } from "react-icons/ai"; 6 | import { GoSun } from "react-icons/go"; 7 | import { FaMoon } from "react-icons/fa"; 8 | import { SlOptionsVertical } from "react-icons/sl"; 9 | 10 | 11 | export {github,info,close,FaInfo,AiOutlineClose,GoSun,FaMoon,SlOptionsVertical}; -------------------------------------------------------------------------------- /src/assets/info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nishaaannnt/advance-bookmarks/04e552aeb23dadf2185cbbe006a538958af0c7c4/src/assets/info.jpg -------------------------------------------------------------------------------- /src/components/Bookmark.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Bookmark = ({ book }) => { 4 | const [title, setTitle] = useState(""); 5 | 6 | const handleSetTitle = () => { 7 | const s = book.title; 8 | if (s.length > 50) { 9 | setTitle(s.substring(0, 50) + " ..."); 10 | } else { 11 | setTitle(s); 12 | } 13 | }; 14 | 15 | // Call handleSetTitle when component mounts 16 | React.useEffect(() => { 17 | handleSetTitle(); 18 | }, []); 19 | 20 | return ( 21 |
22 |
23 | 24 | 25 |

{title}

26 | 27 |
28 |
29 | ); 30 | }; 31 | 32 | export default Bookmark; 33 | -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Bookmark from "./Bookmark"; 3 | 4 | const Card = ({ bookmark }) => { 5 | return ( 6 | <> 7 | {bookmark.map((book) => (<> 8 | 9 | ))} 10 | 11 | ); 12 | }; 13 | 14 | export default Card; 15 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body{ 6 | background-color: #1f1f1f; 7 | /* dark-background-color: #1f1f1f; */ 8 | } 9 | /* Width and height of the scrollbar */ 10 | ::-webkit-scrollbar { 11 | width: 10px; 12 | height: 10px; 13 | border-radius: 10px; 14 | } 15 | 16 | /* Track (background) of the scrollbar */ 17 | ::-webkit-scrollbar-track { 18 | background-color: #1b1b1b; 19 | } 20 | 21 | /* Handle (thumb) of the scrollbar */ 22 | ::-webkit-scrollbar-thumb { 23 | background-color: #272727; 24 | } 25 | 26 | /* Hover styles for the scrollbar handle */ 27 | ::-webkit-scrollbar-thumb:hover { 28 | background-color: #2f2f2f ; 29 | } -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css' 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render( 8 | 9 | 10 | 11 | ); -------------------------------------------------------------------------------- /src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AiFillTwitterCircle, AiFillGithub, AiFillLinkedin } from "react-icons/ai"; 3 | import { BiCoffeeTogo } from "react-icons/bi"; 4 | 5 | const About = () => { 6 | 7 | return ( 8 |
9 |
10 |
11 | 20 |

Payment Gateway will be added soon, till then enjoy using the extension :D

21 |

Access all your extension in a list without switching tabs.

22 |

23 | Pin the extension for more productivity! 24 |

25 |

Note

26 |
27 |
    28 |
  • Bookmarks are fetched from Browser itself
    • 29 |
  • Bookmark a page in the browser to access it from the extension
    • 30 |
  • If you can't access a url or icon maybe the url is not working
    • 31 |
  • Ctrl+Shift+Q to open the extension
    • 32 |
33 |
34 |
35 | 55 |
56 |
57 |
58 | ); 59 | }; 60 | 61 | export default About; 62 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,jsx,js}"], 4 | darkMode :'class', 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | } 10 | 11 | --------------------------------------------------------------------------------