A browser extension that lets you summarize any webpage and ask questions using AI.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Update popup and options branding icon

Made-with: Cursor

+87 -24
+9
lightning.svg
··· 1 + <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 + <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 + <svg width="100%" height="100%" viewBox="0 0 571 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> 4 + <g transform="matrix(1,0,0,1,-242.737675,-4.302677)"> 5 + <g transform="matrix(2.061595,0.357455,-0.357455,2.061595,-342.211752,-730.395512)"> 6 + <path d="M520.828,281.713L496.332,468.258L618.867,419.852C623.264,418.115 628.272,419.151 631.619,422.489C634.966,425.827 636.015,430.832 634.29,435.233C591.046,545.573 527.57,652.425 447.165,756.331C443.667,760.853 437.444,762.24 432.356,759.633C427.268,757.027 424.759,751.165 426.385,745.684L487.827,538.566L392.453,556.504C388.107,557.321 383.666,555.656 380.929,552.182C378.192,548.709 377.611,544.002 379.422,539.967L498.215,275.303C500.629,269.926 506.62,267.132 512.291,268.739C517.961,270.347 521.595,275.869 520.828,281.713Z" style="fill:rgb(241,91,47);"/> 7 + </g> 8 + </g> 9 + </svg>
+23 -9
options/options.css
··· 4 4 box-sizing: border-box; 5 5 } 6 6 7 + :root { 8 + --brand: #F15B2F; 9 + --brand-hover: #D94E27; 10 + } 11 + 7 12 body { 8 13 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 9 14 background: #f5f0e8; ··· 26 31 } 27 32 28 33 .page-header .logo-mark { 29 - font-size: 14px; 30 - color: #999; 34 + width: 14px; 35 + height: 14px; 36 + display: inline-flex; 37 + align-items: center; 38 + justify-content: center; 39 + } 40 + 41 + .page-header .logo-mark .brand-icon { 42 + width: 100%; 43 + height: 100%; 44 + display: block; 31 45 } 32 46 33 47 .page-header h1 { ··· 68 82 width: 16px; 69 83 height: 16px; 70 84 cursor: pointer; 71 - accent-color: #1a1a1a; 85 + accent-color: var(--brand); 72 86 } 73 87 74 88 input[type="text"], ··· 91 105 textarea:focus, 92 106 select:focus { 93 107 outline: none; 94 - border-color: #aaa; 108 + border-color: var(--brand); 95 109 } 96 110 97 111 select { ··· 141 155 142 156 .btn-primary { 143 157 padding: 8px 18px; 144 - background: #1a1a1a; 145 - color: #f5f0e8; 158 + background: var(--brand); 159 + color: #fff; 146 160 border: none; 147 161 border-radius: 6px; 148 162 font-size: 12.5px; 149 163 font-weight: 500; 150 164 } 151 165 152 - .btn-primary:hover { background: #333; } 166 + .btn-primary:hover { background: var(--brand-hover); } 153 167 154 168 .btn-secondary { 155 169 padding: 8px 14px; ··· 256 270 } 257 271 258 272 .info-section a { 259 - color: #555; 273 + color: var(--brand); 260 274 text-decoration: underline; 261 275 } 262 276 263 - .info-section a:hover { color: #111; } 277 + .info-section a:hover { color: var(--brand-hover); }
+3 -1
options/options.html
··· 8 8 <body> 9 9 <div class="container"> 10 10 <div class="page-header"> 11 - <div class="logo-mark">✦</div> 11 + <div class="logo-mark"> 12 + <img src="../lightning.svg" alt="" class="brand-icon" /> 13 + </div> 12 14 <h1>Settings</h1> 13 15 </div> 14 16
+46 -12
popup/popup.css
··· 39 39 --heading: #111; 40 40 --strong: #111; 41 41 --blockquote: #888; 42 + --brand: #F15B2F; 43 + --brand-hover: #D94E27; 44 + --brand-active: #BF4522; 42 45 } 43 46 44 47 /* ── Dark theme ── */ ··· 76 79 --heading: #e8e3db; 77 80 --strong: #e8e3db; 78 81 --blockquote: #666; 82 + --brand: #F15B2F; 83 + --brand-hover: #D94E27; 84 + --brand-active: #BF4522; 79 85 } 80 86 81 87 body { ··· 117 123 } 118 124 119 125 .logo-mark { 120 - font-size: 13px; 121 - color: var(--text-muted); 126 + width: 13px; 127 + height: 13px; 128 + display: inline-flex; 129 + align-items: center; 130 + justify-content: center; 131 + } 132 + 133 + .logo-mark .brand-icon { 134 + width: 100%; 135 + height: 100%; 136 + display: block; 122 137 } 123 138 124 139 .logo-text { ··· 174 189 .initial-state.hidden { display: none; } 175 190 176 191 .initial-icon { 177 - font-size: 18px; 178 - color: var(--text-faint); 192 + width: 18px; 193 + height: 18px; 179 194 margin-bottom: 4px; 195 + } 196 + 197 + .initial-icon .brand-icon { 198 + width: 100%; 199 + height: 100%; 200 + display: block; 180 201 } 181 202 182 203 .initial-title { ··· 326 347 } 327 348 328 349 .result a { color: var(--link); text-decoration: underline; } 329 - .result a:hover { color: var(--link-hover); } 350 + .result a:hover { color: var(--brand); } 330 351 331 352 .result hr { 332 353 border: none; ··· 431 452 .footer-btn:disabled { 432 453 opacity: 0.35; 433 454 cursor: not-allowed; 455 + } 456 + 457 + .footer-btn.primary { 458 + background: var(--brand); 459 + color: #fff; 460 + } 461 + 462 + .footer-btn.primary:hover { 463 + background: var(--brand-hover); 464 + } 465 + 466 + .footer-btn.primary:active { 467 + background: var(--brand-active); 434 468 } 435 469 436 470 .hidden { ··· 502 536 } 503 537 504 538 .suggestion-btn:hover { 505 - border-color: var(--border-hover); 506 - color: var(--text); 539 + border-color: var(--brand); 540 + color: var(--brand); 507 541 background: var(--bg); 508 542 } 509 543 ··· 663 697 } 664 698 665 699 .chat-message.assistant a:hover { 666 - color: var(--link-hover); 700 + color: var(--brand); 667 701 } 668 702 669 703 /* User message markdown */ ··· 699 733 } 700 734 701 735 .chat-input:focus { 702 - border-color: var(--border-hover); 736 + border-color: var(--brand); 703 737 } 704 738 705 739 .chat-input::placeholder { ··· 711 745 height: 32px; 712 746 border-radius: 6px; 713 747 border: none; 714 - background: var(--primary-bg); 715 - color: var(--primary-text); 748 + background: var(--brand); 749 + color: #fff; 716 750 cursor: pointer; 717 751 display: flex; 718 752 align-items: center; ··· 722 756 } 723 757 724 758 .chat-send-btn:hover { 725 - background: var(--primary-bg-hover); 759 + background: var(--brand-hover); 726 760 } 727 761 728 762 .chat-send-btn:disabled {
+6 -2
popup/popup.html
··· 9 9 <div class="app"> 10 10 <div class="header"> 11 11 <div class="header-left"> 12 - <div class="logo-mark">✦</div> 12 + <div class="logo-mark"> 13 + <img src="../lightning.svg" alt="" class="brand-icon" /> 14 + </div> 13 15 <span class="logo-text">Summarize</span> 14 16 </div> 15 17 <div class="header-right"> ··· 49 51 50 52 <div class="content-container"> 51 53 <div id="initial-state" class="initial-state"> 52 - <div class="initial-icon">✦</div> 54 + <div class="initial-icon"> 55 + <img src="../lightning.svg" alt="" class="brand-icon" /> 56 + </div> 53 57 <p class="initial-title">Ready to summarize</p> 54 58 <p class="initial-sub">Get an AI-powered summary of the page you're reading.</p> 55 59 </div>