├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── pre-release-build.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── README.zh-CN.md ├── build.mjs ├── package.json ├── packages ├── Glarity-chromium.zip └── Glarity-firefox.zip ├── pnpm-lock.yaml ├── screenshots ├── brave.png ├── extension-google-zh-CN.png ├── extension-google.png ├── extension-youtube-zh-CN.jpeg ├── extension-youtube.jpeg └── google-vs-chatgpt.png ├── src ├── _locales │ ├── en │ │ └── messages.json │ ├── es │ │ └── messages.json │ ├── fr │ │ └── messages.json │ ├── he │ │ └── messages.json │ ├── hu │ │ └── messages.json │ ├── ja │ │ └── messages.json │ ├── ko │ │ └── messages.json │ ├── pt_PT │ │ └── messages.json │ ├── ro │ │ └── messages.json │ ├── ru │ │ └── messages.json │ ├── uk │ │ └── messages.json │ └── zh_CN │ │ └── messages.json ├── background │ ├── fetch-sse.ts │ ├── index.ts │ ├── providers │ │ ├── chatgpt.ts │ │ └── openai.ts │ ├── stream-async-iterable.ts │ └── types.ts ├── base.css ├── config.ts ├── content-script │ ├── ChatGPTCard.tsx │ ├── ChatGPTContainer.tsx │ ├── ChatGPTFeedback.tsx │ ├── ChatGPTQuery.tsx │ ├── dark.scss │ ├── index.tsx │ ├── light.scss │ ├── prompt.js │ ├── search-engine-configs.ts │ ├── styles.scss │ └── utils.ts ├── global.d.ts ├── logo-128.png ├── logo-16.png ├── logo-32.png ├── logo-48.png ├── logo.png ├── manifest.json ├── manifest.v2.json ├── messaging.ts ├── options │ ├── App.tsx │ ├── ProviderSelect.tsx │ ├── index.html │ ├── index.tsx │ └── styles.scss ├── popup │ ├── App.tsx │ ├── index.html │ └── index.tsx └── utils.ts ├── tailwind.config.cjs └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "env": { 4 | "browser": true 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/recommended", 10 | "plugin:react/recommended", 11 | "plugin:react-hooks/recommended", 12 | "prettier" 13 | ], 14 | "overrides": [], 15 | "parserOptions": { 16 | "ecmaVersion": "latest", 17 | "sourceType": "module" 18 | }, 19 | "rules": { 20 | "react/react-in-jsx-scope": "off" 21 | }, 22 | "ignorePatterns": ["build/**"] 23 | } 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Desktop (please complete the following information):** 14 | - OS: [e.g. Windows] 15 | - Browser [e.g. chrome, brave] 16 | -------------------------------------------------------------------------------- /.github/workflows/pre-release-build.yml: -------------------------------------------------------------------------------- 1 | name: Pre-release 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | build: 8 | runs-on: ubuntu-22.04 9 | 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 18 15 | - run: npm install 16 | - run: npm run build 17 | 18 | - uses: josStorer/get-current-time@v2.0.2 19 | id: current-time 20 | with: 21 | format: YY_MMDD_HH_mm 22 | 23 | - uses: actions/upload-artifact@v3 24 | with: 25 | name: Chromium_ChatGPT_Extension_Build_${{ steps.current-time.outputs.formattedTime }} 26 | path: build/chromium/* 27 | 28 | - uses: actions/upload-artifact@v3 29 | with: 30 | name: Firefox_ChatGPT_Extension_Build_${{ steps.current-time.outputs.formattedTime }} 31 | path: build/firefox/* 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | background.js 4 | .DS_Store 5 | .env 6 | docs/ -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "semi": false, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "trailingComma": "all", 7 | "bracketSpacing": true, 8 | "overrides": [ 9 | { 10 | "files": ".prettierrc", 11 | "options": { 12 | "parser": "json" 13 | } 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Glarity - Summary for Google/YouTube with ChatGPT 2 | 3 | Chrome extension to display ChatGPT summaries alongside Google search results and YouTube videos. 4 | 5 | ## Supported Websites 6 | 7 | Google 8 | YouTube 9 | 10 | ## Installation 11 | 12 | [Add from Chrome Web Store](https://chrome.google.com/webstore/detail/summary-for-google-with-c/cmnlolelipjlhfkhpohphpedmkfbobjc) 13 | 14 | [Add from Mozilla Add-on Store](https://addons.mozilla.org/zh-CN/firefox/addon/glarity/) 15 | 16 | ## Screenshot 17 | 18 | ### Google 19 | 20 | ![Screenshot](screenshots/google-vs-chatgpt.png?raw=true) 21 | ![Screenshot](screenshots/extension-google.png?raw=true) 22 | 23 | ### YouTube 24 | 25 | ![Screenshot](screenshots/extension-youtube.jpeg?raw=true) 26 | 27 | ## Features 28 | 29 | - Supports Google search 30 | - Supports YouTube 31 | - Supports the official OpenAI API 32 | - Supports ChatGPT Plus 33 | - Markdown rendering 34 | - Code highlights 35 | - Dark mode 36 | - Provide feedback to improve ChatGPT 37 | - Copy to clipboard 38 | - Switch languages 39 | 40 | ## Troubleshooting 41 | 42 | ### How to make it work in Brave 43 | 44 | ![Screenshot](screenshots/brave.png?raw=true) 45 | 46 | Disable "Prevent sites from fingerprinting me based on my language preferences" in `brave://settings/shields` 47 | 48 | ## Build from source 49 | 50 | 1. Clone the repo 51 | 2. Install dependencies with `npm` 52 | 3. `npm run build` 53 | 54 | ### Packages 55 | 56 | - [Chromium](packages/Glarity-chromium.zip) 57 | - [Firefox](packages/Glarity-firefox.zip) 58 | 59 | ### Chrome 60 | 61 | 1. Go to `chrome://extensions/`. 62 | 2. At the top right, turn on `Developer mode`. 63 | 3. Click `Load unpacked`. 64 | 4. Find and select extension folder(`build/chromium/`). 65 | 66 | ### Firefox 67 | 68 | 1. Go to `about:debugging#/runtime/this-firefox`. 69 | 2. Click `Load Temporary Add-on`. 70 | 3. Find and select the extension file(`build/firefox.zip`). 71 | 72 | ## Credit 73 | 74 | This project is inspired by [wong2/chatgpt-google-extension](https://github.com/wong2/chatgpt-google-extension) & [qunash/chatgpt-advanced](https://github.com/qunash/chatgpt-advanced) & [YouTube Summary with ChatGPT](https://github.com/kazuki-sf/YouTube_Summary_with_ChatGPT) 75 | 76 | ## License 77 | 78 | [GPL-3.0 license](LICENSE). 79 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # # Glarity - Summary for Google/YouTube with ChatGPT 2 | 3 | Chrome 浏览器扩展实现在 Google 搜索结果和 YouTube 视频旁边展示 ChatGPT 摘要。 4 | 5 | ## 支持网站 6 | 7 | Google 8 | YouTube 9 | 10 | ## 安装 11 | 12 | [Chrome 应用市场](https://chrome.google.com/webstore/detail/summary-for-google-with-c/cmnlolelipjlhfkhpohphpedmkfbobjc) 13 | 14 | [Firefox Add-ons 市场](https://addons.mozilla.org/zh-CN/firefox/addon/glarity/) 15 | 16 | ## 截图 17 | 18 | ### Google 19 | 20 | ![Screenshot](screenshots/extension-google-zh-CN.png?raw=true) 21 | ![Screenshot](screenshots/google-vs-chatgpt.png?raw=true) 22 | 23 | ### YouTube 24 | 25 | ![Screenshot](screenshots/extension-youtube-zh-CN.jpeg?raw=true) 26 | 27 | ## 功能 28 | 29 | - 支持 Google 搜索 30 | - 支持 YouTube 总结 31 | - 支持 OpenAI 官方 API 32 | - 支持 ChatGPT Plus 33 | - Markdown 格式渲染 34 | - 代码高亮 35 | - 暗色模式 36 | - 支持 ChatGPT 反馈 37 | - 复制结果 38 | - 切换语言 39 | 40 | ## 常见问题 41 | 42 | ### 在 Brave 运行 43 | 44 | ![Screenshot](screenshots/brave.png?raw=true) 45 | 46 | Disable "Prevent sites from fingerprinting me based on my language preferences" in `brave://settings/shields` 47 | 48 | ## 手动安装 49 | 50 | 1. Clone 代码 51 | 2. `npm i` 52 | 3. `npm run build` 53 | 54 | ### 扩展包 55 | 56 | - [Chromium](packages/Glarity-chromium.zip) 57 | - [Firefox](packages/Glarity-firefox.zip) 58 | 59 | ### Chrome 60 | 61 | 1. 打开扩展管理窗口，chrome://extensions 62 | 2. 激活开发者模式 63 | 3. 载入 `build/chromium/` 64 | 65 | ### Firefox 66 | 67 | 1. 打开 `about:debugging#/runtime/this-firefox` 68 | 2. 临时载入附加组件 69 | 3. 载入 `build/firefox.zip` 70 | 71 | ## Credit 72 | 73 | 项目灵感： [wong2/chatgpt-google-extension](https://github.com/wong2/chatgpt-google-extension) & [qunash/chatgpt-advanced](https://github.com/qunash/chatgpt-advanced) & [YouTube Summary with ChatGPT](https://github.com/kazuki-sf/YouTube_Summary_with_ChatGPT) 74 | 75 | ## License 76 | 77 | [GPL-3.0 license](LICENSE). 78 | -------------------------------------------------------------------------------- /build.mjs: -------------------------------------------------------------------------------- 1 | import archiver from 'archiver' 2 | import autoprefixer from 'autoprefixer' 3 | import * as dotenv from 'dotenv' 4 | import esbuild from 'esbuild' 5 | import postcssPlugin from 'esbuild-style-plugin' 6 | import fs from 'fs-extra' 7 | import process from 'node:process' 8 | import tailwindcss from 'tailwindcss' 9 | 10 | dotenv.config() 11 | 12 | const outdir = 'build' 13 | const packagesDir = 'packages' 14 | const appName = 'Glarity-' 15 | 16 | async function deleteOldDir() { 17 | await fs.remove(outdir) 18 | } 19 | 20 | async function runEsbuild() { 21 | await esbuild.build({ 22 | entryPoints: [ 23 | 'src/content-script/index.tsx', 24 | 'src/background/index.ts', 25 | 'src/options/index.tsx', 26 | 'src/popup/index.tsx', 27 | ], 28 | bundle: true, 29 | outdir: outdir, 30 | treeShaking: true, 31 | minify: true, 32 | legalComments: 'none', 33 | define: { 34 | 'process.env.NODE_ENV': '"production"', 35 | 'process.env.AXIOM_TOKEN': JSON.stringify(process.env.AXIOM_TOKEN || 'UNDEFINED'), 36 | }, 37 | jsxFactory: 'h', 38 | jsxFragment: 'Fragment', 39 | jsx: 'automatic', 40 | loader: { 41 | '.png': 'dataurl', 42 | }, 43 | plugins: [ 44 | postcssPlugin({ 45 | postcss: { 46 | plugins: [tailwindcss, autoprefixer], 47 | }, 48 | }), 49 | ], 50 | }) 51 | } 52 | 53 | async function zipFolder(dir) { 54 | const output = fs.createWriteStream(`${dir}.zip`) 55 | const archive = archiver('zip', { 56 | zlib: { level: 9 }, 57 | }) 58 | archive.pipe(output) 59 | archive.directory(dir, false) 60 | await archive.finalize() 61 | } 62 | 63 | async function copyFiles(entryPoints, targetDir) { 64 | await fs.ensureDir(targetDir) 65 | await Promise.all( 66 | entryPoints.map(async (entryPoint) => { 67 | await fs.copy(entryPoint.src, `${targetDir}/${entryPoint.dst}`) 68 | }), 69 | ) 70 | } 71 | 72 | async function build() { 73 | await deleteOldDir() 74 | await runEsbuild() 75 | 76 | const commonFiles = [ 77 | { src: 'build/content-script/index.js', dst: 'content-script.js' }, 78 | { src: 'build/content-script/index.css', dst: 'content-script.css' }, 79 | { src: 'build/background/index.js', dst: 'background.js' }, 80 | { src: 'build/options/index.js', dst: 'options.js' }, 81 | { src: 'build/options/index.css', dst: 'options.css' }, 82 | { src: 'src/options/index.html', dst: 'options.html' }, 83 | { src: 'build/popup/index.js', dst: 'popup.js' }, 84 | { src: 'build/popup/index.css', dst: 'popup.css' }, 85 | { src: 'src/popup/index.html', dst: 'popup.html' }, 86 | { src: 'src/logo-16.png', dst: 'logo-16.png' }, 87 | { src: 'src/logo-32.png', dst: 'logo-32.png' }, 88 | { src: 'src/logo-48.png', dst: 'logo-48.png' }, 89 | { src: 'src/logo-128.png', dst: 'logo-128.png' }, 90 | { src: 'src/logo.png', dst: 'logo.png' }, 91 | { src: 'src/_locales', dst: '_locales' }, 92 | ] 93 | 94 | // chromium 95 | await copyFiles( 96 | [...commonFiles, { src: 'src/manifest.json', dst: 'manifest.json' }], 97 | `./${outdir}/chromium`, 98 | ) 99 | 100 | await zipFolder(`./${outdir}/chromium`) 101 | await copyFiles( 102 | [ 103 | { 104 | src: `${outdir}/chromium.zip`, 105 | dst: `${appName}chromium.zip`, 106 | }, 107 | ], 108 | `./${packagesDir}`, 109 | ) 110 | 111 | // firefox 112 | await copyFiles( 113 | [...commonFiles, { src: 'src/manifest.v2.json', dst: 'manifest.json' }], 114 | `./${outdir}/firefox`, 115 | ) 116 | 117 | await zipFolder(`./${outdir}/firefox`) 118 | await copyFiles( 119 | [ 120 | { 121 | src: `${outdir}/firefox.zip`, 122 | dst: `${appName}firefox.zip`, 123 | }, 124 | ], 125 | `./${packagesDir}`, 126 | ) 127 | 128 | console.log('Build success.') 129 | } 130 | 131 | build() 132 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chatgpt-google-summary-extension", 3 | "author": "givebest", 4 | "scripts": { 5 | "build": "node build.mjs", 6 | "lint": "eslint --ext .js,.mjs,.jsx .", 7 | "lint:fix": "eslint --ext .js,.mjs,.jsx . --fix", 8 | "prepare": "husky install", 9 | "watch": "chokidar src -c 'npm run build'" 10 | }, 11 | "dependencies": { 12 | "@geist-ui/core": "^2.3.8", 13 | "@primer/octicons-react": "^17.9.0", 14 | "copy-to-clipboard": "^3.3.3", 15 | "eventsource-parser": "^0.0.5", 16 | "expiry-map": "^2.0.0", 17 | "gb-url": "^1.1.6", 18 | "github-markdown-css": "^5.1.0", 19 | "inter-ui": "^3.19.3", 20 | "jquery": "^3.6.3", 21 | "lodash-es": "^4.17.21", 22 | "preact": "^10.11.3", 23 | "prop-types": "^15.8.1", 24 | "punycode": "^2.1.1", 25 | "react": "npm:@preact/compat@^17.1.2", 26 | "react-dom": "npm:@preact/compat@^17.1.2", 27 | "react-markdown": "^8.0.4", 28 | "rehype-highlight": "^6.0.0", 29 | "swr": "^2.0.0", 30 | "uuid": "^9.0.0", 31 | "xss": "^1.0.14" 32 | }, 33 | "devDependencies": { 34 | "@types/fs-extra": "^9.0.13", 35 | "@types/lodash-es": "^4.17.6", 36 | "@types/uuid": "^9.0.0", 37 | "@types/webextension-polyfill": "^0.9.2", 38 | "@typescript-eslint/eslint-plugin": "^5.47.0", 39 | "@typescript-eslint/parser": "^5.47.0", 40 | "archiver": "^5.3.1", 41 | "autoprefixer": "^10.4.13", 42 | "chokidar-cli": "^3.0.0", 43 | "dotenv": "^16.0.3", 44 | "esbuild": "^0.17.4", 45 | "esbuild-style-plugin": "^1.6.1", 46 | "eslint": "^8.30.0", 47 | "eslint-config-prettier": "^8.5.0", 48 | "eslint-plugin-react": "^7.31.11", 49 | "eslint-plugin-react-hooks": "^4.6.0", 50 | "fs-extra": "^11.1.0", 51 | "husky": "^8.0.0", 52 | "lint-staged": "^13.1.0", 53 | "postcss": "^8.4.20", 54 | "postcss-scss": "^4.0.6", 55 | "prettier": "^2.8.0", 56 | "prettier-plugin-organize-imports": "^3.2.1", 57 | "sass": "^1.57.1", 58 | "tailwindcss": "^3.2.4", 59 | "typescript": "^4.9.4", 60 | "webextension-polyfill": "^0.10.0" 61 | }, 62 | "lint-staged": { 63 | "**/*.{js,jsx,ts,tsx,mjs}": [ 64 | "npx prettier --write", 65 | "npx eslint --fix" 66 | ] 67 | } 68 | } -------------------------------------------------------------------------------- /packages/Glarity-chromium.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/packages/Glarity-chromium.zip -------------------------------------------------------------------------------- /packages/Glarity-firefox.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/packages/Glarity-firefox.zip -------------------------------------------------------------------------------- /screenshots/brave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/brave.png -------------------------------------------------------------------------------- /screenshots/extension-google-zh-CN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/extension-google-zh-CN.png -------------------------------------------------------------------------------- /screenshots/extension-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/extension-google.png -------------------------------------------------------------------------------- /screenshots/extension-youtube-zh-CN.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/extension-youtube-zh-CN.jpeg -------------------------------------------------------------------------------- /screenshots/extension-youtube.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/extension-youtube.jpeg -------------------------------------------------------------------------------- /screenshots/google-vs-chatgpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/screenshots/google-vs-chatgpt.png -------------------------------------------------------------------------------- /src/_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Display ChatGPT summaries alongside Google search results and YouTube videos" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/es/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Mostrar resúmenes de ChatGPT junto a los resultados de búsqueda de Google y los vídeos de YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/fr/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Afficher les résumés de ChatGPT à côté des résultats de recherche Google et des vidéos YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/he/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "הצג סיכומים של ChatGPT לצד תוצאות החיפוש של Google וסרטוני YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/hu/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Jelenítse meg a ChatGPT-összefoglalókat a Google keresési eredményei és a YouTube-videók mellett" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/ja/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Google検索結果やYouTube動画と一緒にChatGPTの要約を表示" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/ko/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Google 검색 결과 및 YouTube 동영상과 함께 ChatGPT 요약 표시" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/pt_PT/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Exibir resumos do ChatGPT ao lado dos resultados de pesquisa do Google e vídeos do YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/ro/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Afișați rezumate ChatGPT alături de rezultatele căutării Google și videoclipurile YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/ru/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Отображать сводки ChatGPT вместе с результатами поиска Google и видео на YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/uk/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Відображати підсумки ChatGPT разом із результатами пошуку Google і відео YouTube" 7 | } 8 | } -------------------------------------------------------------------------------- /src/_locales/zh_CN/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Glarity-Summary for Google/YouTube (ChatGPT)" 4 | }, 5 | "appDesc": { 6 | "message": "Google 搜索结果和 YouTube 视频旁边展示 ChatGPT 摘要" 7 | } 8 | } -------------------------------------------------------------------------------- /src/background/fetch-sse.ts: -------------------------------------------------------------------------------- 1 | import { createParser } from 'eventsource-parser' 2 | import { isEmpty } from 'lodash-es' 3 | import { streamAsyncIterable } from './stream-async-iterable.js' 4 | 5 | export async function fetchSSE( 6 | resource: string, 7 | options: RequestInit & { onMessage: (message: string) => void }, 8 | ) { 9 | const { onMessage, ...fetchOptions } = options 10 | const resp = await fetch(resource, fetchOptions) 11 | if (!resp.ok) { 12 | const error = await resp.json().catch(() => ({})) 13 | throw new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`) 14 | } 15 | const parser = createParser((event) => { 16 | if (event.type === 'event') { 17 | onMessage(event.data) 18 | } 19 | }) 20 | for await (const chunk of streamAsyncIterable(resp.body!)) { 21 | const str = new TextDecoder().decode(chunk) 22 | parser.feed(str) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/background/index.ts: -------------------------------------------------------------------------------- 1 | import Browser from 'webextension-polyfill' 2 | import { getProviderConfigs, ProviderType } from '../config' 3 | import { ChatGPTProvider, getChatGPTAccessToken, sendMessageFeedback } from './providers/chatgpt' 4 | import { OpenAIProvider } from './providers/openai' 5 | import { Provider } from './types' 6 | 7 | async function generateAnswers(port: Browser.Runtime.Port, question: string) { 8 | const providerConfigs = await getProviderConfigs() 9 | 10 | let provider: Provider 11 | if (providerConfigs.provider === ProviderType.ChatGPT) { 12 | const token = await getChatGPTAccessToken() 13 | provider = new ChatGPTProvider(token) 14 | } else if (providerConfigs.provider === ProviderType.GPT3) { 15 | const { apiKey, model } = providerConfigs.configs[ProviderType.GPT3]! 16 | provider = new OpenAIProvider(apiKey, model) 17 | } else { 18 | throw new Error(`Unknown provider ${providerConfigs.provider}`) 19 | } 20 | 21 | const controller = new AbortController() 22 | port.onDisconnect.addListener(() => { 23 | controller.abort() 24 | cleanup?.() 25 | }) 26 | 27 | const { cleanup } = await provider.generateAnswer({ 28 | prompt: question, 29 | signal: controller.signal, 30 | onEvent(event) { 31 | if (event.type === 'done') { 32 | port.postMessage({ event: 'DONE' }) 33 | return 34 | } 35 | port.postMessage(event.data) 36 | }, 37 | }) 38 | } 39 | 40 | Browser.runtime.onConnect.addListener((port) => { 41 | port.onMessage.addListener(async (msg) => { 42 | console.debug('received msg', msg) 43 | try { 44 | await generateAnswers(port, msg.question) 45 | } catch (err: any) { 46 | // console.error(err) 47 | port.postMessage({ error: err.message }) 48 | } 49 | }) 50 | }) 51 | 52 | Browser.runtime.onMessage.addListener(async (message) => { 53 | if (message.type === 'FEEDBACK') { 54 | const token = await getChatGPTAccessToken() 55 | await sendMessageFeedback(token, message.data) 56 | } else if (message.type === 'OPEN_OPTIONS_PAGE') { 57 | Browser.runtime.openOptionsPage() 58 | } else if (message.type === 'GET_ACCESS_TOKEN') { 59 | return getChatGPTAccessToken() 60 | } 61 | }) 62 | 63 | Browser.runtime.onInstalled.addListener((details) => { 64 | if (details.reason === 'install') { 65 | Browser.runtime.openOptionsPage() 66 | } 67 | }) 68 | -------------------------------------------------------------------------------- /src/background/providers/chatgpt.ts: -------------------------------------------------------------------------------- 1 | import ExpiryMap from 'expiry-map' 2 | import { v4 as uuidv4 } from 'uuid' 3 | import { fetchSSE } from '../fetch-sse' 4 | import { GenerateAnswerParams, Provider } from '../types' 5 | 6 | async function request(token: string, method: string, path: string, data?: unknown) { 7 | return fetch(`https://chat.openai.com/backend-api${path}`, { 8 | method, 9 | headers: { 10 | 'Content-Type': 'application/json', 11 | Authorization: `Bearer ${token}`, 12 | }, 13 | body: data === undefined ? undefined : JSON.stringify(data), 14 | }) 15 | } 16 | 17 | export async function sendMessageFeedback(token: string, data: unknown) { 18 | await request(token, 'POST', '/conversation/message_feedback', data) 19 | } 20 | 21 | export async function setConversationProperty( 22 | token: string, 23 | conversationId: string, 24 | propertyObject: object, 25 | ) { 26 | await request(token, 'PATCH', `/conversation/${conversationId}`, propertyObject) 27 | } 28 | 29 | const KEY_ACCESS_TOKEN = 'accessToken' 30 | 31 | const cache = new ExpiryMap(10 * 1000) 32 | 33 | export async function getChatGPTAccessToken(): Promise { 34 | if (cache.get(KEY_ACCESS_TOKEN)) { 35 | return cache.get(KEY_ACCESS_TOKEN) 36 | } 37 | const resp = await fetch('https://chat.openai.com/api/auth/session') 38 | if (resp.status === 403) { 39 | throw new Error('CLOUDFLARE') 40 | } 41 | const data = await resp.json().catch(() => ({})) 42 | if (!data.accessToken) { 43 | throw new Error('UNAUTHORIZED') 44 | } 45 | cache.set(KEY_ACCESS_TOKEN, data.accessToken) 46 | return data.accessToken 47 | } 48 | 49 | export class ChatGPTProvider implements Provider { 50 | constructor(private token: string) { 51 | this.token = token 52 | } 53 | 54 | private async fetchModels(): Promise< 55 | { slug: string; title: string; description: string; max_tokens: number }[] 56 | > { 57 | const resp = await request(this.token, 'GET', '/models').then((r) => r.json()) 58 | return resp.models 59 | } 60 | 61 | private async getModelName(): Promise { 62 | try { 63 | const models = await this.fetchModels() 64 | return models[0].slug 65 | } catch (err) { 66 | console.error(err) 67 | return 'text-davinci-002-render' 68 | } 69 | } 70 | 71 | async generateAnswer(params: GenerateAnswerParams) { 72 | let conversationId: string | undefined 73 | 74 | const cleanup = () => { 75 | if (conversationId) { 76 | setConversationProperty(this.token, conversationId, { is_visible: false }) 77 | } 78 | } 79 | 80 | const modelName = await this.getModelName() 81 | 82 | await fetchSSE('https://chat.openai.com/backend-api/conversation', { 83 | method: 'POST', 84 | signal: params.signal, 85 | headers: { 86 | 'Content-Type': 'application/json', 87 | Authorization: `Bearer ${this.token}`, 88 | }, 89 | body: JSON.stringify({ 90 | action: 'next', 91 | messages: [ 92 | { 93 | id: uuidv4(), 94 | role: 'user', 95 | content: { 96 | content_type: 'text', 97 | parts: [params.prompt], 98 | }, 99 | }, 100 | ], 101 | model: modelName, 102 | parent_message_id: uuidv4(), 103 | }), 104 | onMessage(message: string) { 105 | console.debug('sse message', message) 106 | if (message === '[DONE]') { 107 | params.onEvent({ type: 'done' }) 108 | cleanup() 109 | return 110 | } 111 | let data 112 | try { 113 | data = JSON.parse(message) 114 | } catch (err) { 115 | // console.error(err) 116 | return 117 | } 118 | const text = data.message?.content?.parts?.[0] 119 | if (text) { 120 | conversationId = data.conversation_id 121 | params.onEvent({ 122 | type: 'answer', 123 | data: { 124 | text, 125 | messageId: data.message.id, 126 | conversationId: data.conversation_id, 127 | }, 128 | }) 129 | } 130 | }, 131 | }) 132 | return { cleanup } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/background/providers/openai.ts: -------------------------------------------------------------------------------- 1 | import { fetchSSE } from '../fetch-sse' 2 | import { GenerateAnswerParams, Provider } from '../types' 3 | 4 | export class OpenAIProvider implements Provider { 5 | constructor(private token: string, private model: string) { 6 | this.token = token 7 | this.model = model 8 | } 9 | 10 | private buildPrompt(prompt: string): string { 11 | if (this.model.startsWith('text-chat-davinci')) { 12 | return `Respond conversationally.<|im_end|>\n\nUser: ${prompt}<|im_sep|>\nChatGPT:` 13 | } 14 | return prompt 15 | } 16 | 17 | async generateAnswer(params: GenerateAnswerParams) { 18 | let result = '' 19 | await fetchSSE('https://api.openai.com/v1/completions', { 20 | method: 'POST', 21 | signal: params.signal, 22 | headers: { 23 | 'Content-Type': 'application/json', 24 | Authorization: `Bearer ${this.token}`, 25 | }, 26 | body: JSON.stringify({ 27 | model: this.model, 28 | prompt: this.buildPrompt(params.prompt), 29 | stream: true, 30 | max_tokens: 2048, 31 | }), 32 | onMessage(message) { 33 | console.debug('sse message', message) 34 | if (message === '[DONE]') { 35 | params.onEvent({ type: 'done' }) 36 | return 37 | } 38 | let data 39 | try { 40 | data = JSON.parse(message) 41 | const text = data.choices[0].text 42 | if (text === '<|im_end|>' || text === '<|im_sep|>') { 43 | return 44 | } 45 | result += text 46 | params.onEvent({ 47 | type: 'answer', 48 | data: { 49 | text: result, 50 | messageId: data.id, 51 | conversationId: data.id, 52 | }, 53 | }) 54 | } catch (err) { 55 | // console.error(err) 56 | return 57 | } 58 | }, 59 | }) 60 | return {} 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/background/stream-async-iterable.ts: -------------------------------------------------------------------------------- 1 | export async function* streamAsyncIterable(stream: ReadableStream) { 2 | const reader = stream.getReader() 3 | try { 4 | while (true) { 5 | const { done, value } = await reader.read() 6 | if (done) { 7 | return 8 | } 9 | yield value 10 | } 11 | } finally { 12 | reader.releaseLock() 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/background/types.ts: -------------------------------------------------------------------------------- 1 | import { Answer } from '../messaging' 2 | 3 | export type Event = 4 | | { 5 | type: 'answer' 6 | data: Answer 7 | } 8 | | { 9 | type: 'done' 10 | } 11 | 12 | export interface GenerateAnswerParams { 13 | prompt: string 14 | onEvent: (event: Event) => void 15 | signal?: AbortSignal 16 | } 17 | 18 | export interface Provider { 19 | generateAnswer(params: GenerateAnswerParams): Promise<{ cleanup?: () => void }> 20 | } 21 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | import { defaults } from 'lodash-es' 2 | import Browser from 'webextension-polyfill' 3 | 4 | export enum TriggerMode { 5 | Always = 'always', 6 | QuestionMark = 'questionMark', 7 | Manually = 'manually', 8 | } 9 | 10 | export const TRIGGER_MODE_TEXT = { 11 | [TriggerMode.Always]: { title: 'Always', desc: 'ChatGPT is queried on every search' }, 12 | // [TriggerMode.QuestionMark]: { 13 | // title: 'Question Mark', 14 | // desc: 'When your query ends with a question mark (?)', 15 | // }, 16 | [TriggerMode.Manually]: { 17 | title: 'Manually', 18 | desc: 'ChatGPT is queried when you manually click a button', 19 | }, 20 | } 21 | 22 | export enum Theme { 23 | Auto = 'auto', 24 | Light = 'light', 25 | Dark = 'dark', 26 | } 27 | 28 | export enum Language { 29 | Auto = 'auto', 30 | English = 'en-US', 31 | Chinese = 'zh-CN', 32 | Spanish = 'es-ES', 33 | French = 'fr-FR', 34 | Korean = 'ko-KR', 35 | Japanese = 'ja-JP', 36 | German = 'de-DE', 37 | Portuguese = 'pt-PT', 38 | Russian = 'ru-RU', 39 | } 40 | 41 | const userConfigWithDefaultValue = { 42 | triggerMode: TriggerMode.Always, 43 | theme: Theme.Auto, 44 | language: Language.Auto, 45 | prompt: '', 46 | } 47 | 48 | export type UserConfig = typeof userConfigWithDefaultValue 49 | 50 | export async function getUserConfig(): Promise { 51 | const result = await Browser.storage.local.get(Object.keys(userConfigWithDefaultValue)) 52 | return defaults(result, userConfigWithDefaultValue) 53 | } 54 | 55 | export async function updateUserConfig(updates: Partial) { 56 | console.debug('update configs', updates) 57 | return Browser.storage.local.set(updates) 58 | } 59 | 60 | export enum ProviderType { 61 | ChatGPT = 'chatgpt', 62 | GPT3 = 'gpt3', 63 | } 64 | 65 | interface GPT3ProviderConfig { 66 | model: string 67 | apiKey: string 68 | } 69 | 70 | export interface ProviderConfigs { 71 | provider: ProviderType 72 | configs: { 73 | [ProviderType.GPT3]: GPT3ProviderConfig | undefined 74 | } 75 | } 76 | 77 | export async function getProviderConfigs(): Promise { 78 | const { provider = ProviderType.ChatGPT } = await Browser.storage.local.get('provider') 79 | const configKey = `provider:${ProviderType.GPT3}` 80 | const result = await Browser.storage.local.get(configKey) 81 | return { 82 | provider, 83 | configs: { 84 | [ProviderType.GPT3]: result[configKey], 85 | }, 86 | } 87 | } 88 | 89 | export async function saveProviderConfigs( 90 | provider: ProviderType, 91 | configs: ProviderConfigs['configs'], 92 | ) { 93 | return Browser.storage.local.set({ 94 | provider, 95 | [`provider:${ProviderType.GPT3}`]: configs[ProviderType.GPT3], 96 | }) 97 | } 98 | -------------------------------------------------------------------------------- /src/content-script/ChatGPTCard.tsx: -------------------------------------------------------------------------------- 1 | import { LightBulbIcon, SearchIcon } from '@primer/octicons-react' 2 | import { useState } from 'preact/hooks' 3 | import { TriggerMode } from '../config' 4 | import ChatGPTQuery, { QueryStatus } from './ChatGPTQuery' 5 | import { endsWithQuestionMark } from './utils.js' 6 | 7 | interface Props { 8 | question: string 9 | triggerMode: TriggerMode 10 | onStatusChange?: (status: QueryStatus) => void 11 | } 12 | 13 | function ChatGPTCard(props: Props) { 14 | const [triggered, setTriggered] = useState(false) 15 | 16 | if (props.triggerMode === TriggerMode.Always) { 17 | return 18 | } 19 | if (props.triggerMode === TriggerMode.QuestionMark) { 20 | if (endsWithQuestionMark(props.question.trim())) { 21 | return 22 | } 23 | return ( 24 |

25 | Trigger ChatGPT by appending a question mark after your query 26 |

27 | ) 28 | } 29 | if (triggered) { 30 | return 31 | } 32 | return ( 33 | setTriggered(true)}> 34 | Ask ChatGPT for this query 35 | 36 | ) 37 | } 38 | 39 | export default ChatGPTCard 40 | -------------------------------------------------------------------------------- /src/content-script/ChatGPTContainer.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useCallback, useEffect } from 'react' 2 | import Browser from 'webextension-polyfill' 3 | // import useSWRImmutable from 'swr/immutable' 4 | import { SearchEngine } from './search-engine-configs' 5 | import { TriggerMode } from '../config' 6 | import ChatGPTCard from './ChatGPTCard' 7 | import { QueryStatus } from './ChatGPTQuery' 8 | import { getSearchParam, copyTranscript, getConverTranscript } from './utils' 9 | import { 10 | GearIcon, 11 | CheckIcon, 12 | CopyIcon, 13 | ChevronDownIcon, 14 | ChevronUpIcon, 15 | AlertIcon, 16 | } from '@primer/octicons-react' 17 | import { queryParam } from 'gb-url' 18 | 19 | interface Props { 20 | question: string 21 | transcript?: any 22 | triggerMode: TriggerMode 23 | siteConfig: SearchEngine 24 | langOptionsWithLink?: any 25 | } 26 | 27 | function ChatGPTContainer(props: Props) { 28 | const [queryStatus, setQueryStatus] = useState() 29 | const { question, transcript, triggerMode, siteConfig, langOptionsWithLink } = props 30 | const [copied, setCopied] = useState(false) 31 | const [transcriptShow, setTranscriptShow] = useState(false) 32 | const [currentTranscript, setCurrentTranscript] = useState(transcript) 33 | const [selectedOption, setSelectedOption] = useState(0) 34 | 35 | const handleChange = async (event) => { 36 | const val = event.target.value || '' 37 | const videoId = queryParam('v', window.location.href || '') 38 | 39 | if (val < 0 || !videoId) { 40 | return 41 | } 42 | 43 | setSelectedOption(val) 44 | 45 | const transcriptList = await getConverTranscript({ langOptionsWithLink, videoId, index: val }) 46 | 47 | setTranscriptShow(true) 48 | 49 | setCurrentTranscript(transcriptList) 50 | } 51 | 52 | const copytSubtitle = () => { 53 | const videoId = getSearchParam(window.location.href)?.v 54 | copyTranscript(videoId, currentTranscript) 55 | setCopied(true) 56 | } 57 | 58 | const openOptionsPage = useCallback(() => { 59 | Browser.runtime.sendMessage({ type: 'OPEN_OPTIONS_PAGE' }) 60 | }, []) 61 | 62 | useEffect(() => { 63 | if (copied) { 64 | const timer = setTimeout(() => { 65 | setCopied(false) 66 | }, 500) 67 | return () => clearTimeout(timer) 68 | } 69 | }, [copied]) 70 | 71 | const switchtranscriptShow = () => { 72 | setTranscriptShow((state) => !state) 73 | } 74 | 75 | return ( 76 | <> 77 |
78 |
79 | 96 | 97 |
98 |
99 | 100 |
101 |
102 | {question ? ( 103 | <> 104 | 109 | 110 | ) : siteConfig?.name === 'youtube' ? ( 111 | <> 112 |

No Transcription Available...

113 |

114 | Try{' '} 115 | 120 | Youtube Whisperer 121 | {' '} 122 | to transcribe! 123 |

124 | 125 | ) : ( 126 |

127 | No results. 128 |

129 | )} 130 |
131 |
132 | 133 | {question && currentTranscript && ( 134 |
135 |
136 |
137 | Transcript 138 | {langOptionsWithLink.length > 1 && ( 139 | <> 140 | {' '} 141 | 155 | 156 | )} 157 |
158 | 167 |
168 | 169 |
175 | {currentTranscript.map((v, i) => { 176 | const { time, text } = v 177 | 178 | return ( 179 |
180 |
{time}
181 |
185 |
186 | ) 187 | })} 188 |
189 |
190 | )} 191 |
192 | 193 | ) 194 | } 195 | 196 | export default ChatGPTContainer 197 | -------------------------------------------------------------------------------- /src/content-script/ChatGPTFeedback.tsx: -------------------------------------------------------------------------------- 1 | import { ThumbsdownIcon, ThumbsupIcon, CopyIcon, CheckIcon } from '@primer/octicons-react' 2 | import { memo, useCallback, useState } from 'react' 3 | import { useEffect } from 'preact/hooks' 4 | import Browser from 'webextension-polyfill' 5 | 6 | interface Props { 7 | messageId: string 8 | conversationId: string 9 | answerText: string 10 | } 11 | 12 | function ChatGPTFeedback(props: Props) { 13 | const [copied, setCopied] = useState(false) 14 | const [action, setAction] = useState<'thumbsUp' | 'thumbsDown' | null>(null) 15 | 16 | const clickThumbsUp = useCallback(async () => { 17 | if (action) { 18 | return 19 | } 20 | setAction('thumbsUp') 21 | await Browser.runtime.sendMessage({ 22 | type: 'FEEDBACK', 23 | data: { 24 | conversation_id: props.conversationId, 25 | message_id: props.messageId, 26 | rating: 'thumbsUp', 27 | }, 28 | }) 29 | }, [action, props.conversationId, props.messageId]) 30 | 31 | const clickThumbsDown = useCallback(async () => { 32 | if (action) { 33 | return 34 | } 35 | setAction('thumbsDown') 36 | await Browser.runtime.sendMessage({ 37 | type: 'FEEDBACK', 38 | data: { 39 | conversation_id: props.conversationId, 40 | message_id: props.messageId, 41 | rating: 'thumbsDown', 42 | text: '', 43 | tags: [], 44 | }, 45 | }) 46 | }, [action, props.conversationId, props.messageId]) 47 | 48 | const clickCopyToClipboard = useCallback(async () => { 49 | await navigator.clipboard.writeText(props.answerText) 50 | setCopied(true) 51 | }, [props.answerText]) 52 | 53 | useEffect(() => { 54 | if (copied) { 55 | const timer = setTimeout(() => { 56 | setCopied(false) 57 | }, 500) 58 | return () => clearTimeout(timer) 59 | } 60 | }, [copied]) 61 | 62 | return ( 63 |
64 | 68 | 69 | 70 | 74 | 75 | 76 | 77 | {copied ? : } 78 | 79 |
80 | ) 81 | } 82 | 83 | export default memo(ChatGPTFeedback) 84 | -------------------------------------------------------------------------------- /src/content-script/ChatGPTQuery.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'preact/hooks' 2 | import { memo, useCallback } from 'react' 3 | import ReactMarkdown from 'react-markdown' 4 | import rehypeHighlight from 'rehype-highlight' 5 | import Browser from 'webextension-polyfill' 6 | import { Answer } from '../messaging' 7 | import ChatGPTFeedback from './ChatGPTFeedback' 8 | import { isBraveBrowser, shouldShowRatingTip } from './utils.js' 9 | 10 | export type QueryStatus = 'success' | 'error' | undefined 11 | 12 | interface Props { 13 | question: string 14 | onStatusChange?: (status: QueryStatus) => void 15 | } 16 | 17 | function ChatGPTQuery(props: Props) { 18 | const [answer, setAnswer] = useState(null) 19 | const [error, setError] = useState('') 20 | const [retry, setRetry] = useState(0) 21 | const [done, setDone] = useState(false) 22 | const [showTip, setShowTip] = useState(false) 23 | const [status, setStatus] = useState() 24 | 25 | useEffect(() => { 26 | props.onStatusChange?.(status) 27 | }, [props, status]) 28 | 29 | useEffect(() => { 30 | const port = Browser.runtime.connect() 31 | const listener = (msg: any) => { 32 | console.log('result', msg) 33 | 34 | if (msg.text) { 35 | setAnswer(msg) 36 | setStatus('success') 37 | } else if (msg.error) { 38 | setError(msg.error) 39 | setStatus('error') 40 | } else if (msg.event === 'DONE') { 41 | setDone(true) 42 | } 43 | } 44 | port.onMessage.addListener(listener) 45 | port.postMessage({ question: props.question }) 46 | return () => { 47 | port.onMessage.removeListener(listener) 48 | port.disconnect() 49 | } 50 | }, [props.question, retry]) 51 | 52 | // retry error on focus 53 | useEffect(() => { 54 | const onFocus = () => { 55 | if (error && (error == 'UNAUTHORIZED' || error === 'CLOUDFLARE')) { 56 | setError('') 57 | setRetry((r) => r + 1) 58 | } 59 | } 60 | window.addEventListener('focus', onFocus) 61 | return () => { 62 | window.removeEventListener('focus', onFocus) 63 | } 64 | }, [error]) 65 | 66 | useEffect(() => { 67 | shouldShowRatingTip().then((show) => setShowTip(show)) 68 | }, []) 69 | 70 | const openOptionsPage = useCallback(() => { 71 | Browser.runtime.sendMessage({ type: 'OPEN_OPTIONS_PAGE' }) 72 | }, []) 73 | 74 | if (answer) { 75 | return ( 76 |
77 |
78 | 83 |
84 | 85 | {answer.text} 86 | 87 | {/* {done && showTip && ( 88 |

89 | Enjoy this extension? Give us a 5-star rating at{' '} 90 | 95 | Chrome Web Store 96 | 97 |

98 | )} */} 99 |
100 | ) 101 | } 102 | 103 | if (error === 'UNAUTHORIZED' || error === 'CLOUDFLARE') { 104 | return ( 105 |

106 | Please login and pass Cloudflare check at{' '} 107 | 108 | chat.openai.com 109 | 110 | {retry > 0 && 111 | (() => { 112 | if (isBraveBrowser()) { 113 | return ( 114 | 115 | Still not working? Follow{' '} 116 | 117 | Brave Troubleshooting 118 | 119 | 120 | ) 121 | } else { 122 | return ( 123 | 124 | OpenAI requires passing a security check every once in a while. If this keeps 125 | happening, change AI provider to OpenAI API in the extension options. 126 | 127 | ) 128 | } 129 | })()} 130 |

131 | ) 132 | } 133 | if (error) { 134 | return ( 135 |

136 | Failed to load response from ChatGPT: 137 | {error} 138 | { 141 | setError('') 142 | setRetry((r) => r + 1) 143 | }} 144 | > 145 | Retry 146 | 147 |

148 | ) 149 | } 150 | 151 | return

Waiting for ChatGPT response...

152 | } 153 | 154 | export default memo(ChatGPTQuery) 155 | -------------------------------------------------------------------------------- /src/content-script/dark.scss: -------------------------------------------------------------------------------- 1 | .glarity--container.gpt--dark { 2 | .glarity--chatgpt { 3 | color: white; 4 | border-color: #3c4043; 5 | background-color: #0d1117; 6 | } 7 | 8 | .glarity--header, 9 | .glarity--main__header a, 10 | a.glarity--header__logo { 11 | color: #fff; 12 | 13 | &:visited { 14 | color: #fff; 15 | } 16 | } 17 | 18 | .glarity--main { 19 | border-top-color: #3c4043; 20 | } 21 | 22 | .glarity--main__header { 23 | border-bottom-color: #3c4043; 24 | } 25 | 26 | .glarity--main__container { 27 | color: #eee; 28 | 29 | a { 30 | color: #8ab4f8; 31 | } 32 | } 33 | 34 | pre code.hljs { 35 | display: block; 36 | overflow-x: auto; 37 | padding: 1em; 38 | } 39 | code.hljs { 40 | padding: 3px 5px; 41 | } /*! 42 | Theme: GitHub Dark 43 | Description: Dark theme as seen on github.com 44 | Author: github.com 45 | Maintainer: @Hirse 46 | Updated: 2021-05-15 47 | 48 | Outdated base version: https://github.com/primer/github-syntax-dark 49 | Current colors taken from GitHub's CSS 50 | */ 51 | .hljs { 52 | color: #c9d1d9; 53 | background: #0d1117; 54 | } 55 | .hljs-doctag, 56 | .hljs-keyword, 57 | .hljs-meta .hljs-keyword, 58 | .hljs-template-tag, 59 | .hljs-template-variable, 60 | .hljs-type, 61 | .hljs-variable.language_ { 62 | color: #ff7b72; 63 | } 64 | .hljs-title, 65 | .hljs-title.class_, 66 | .hljs-title.class_.inherited__, 67 | .hljs-title.function_ { 68 | color: #d2a8ff; 69 | } 70 | .hljs-attr, 71 | .hljs-attribute, 72 | .hljs-literal, 73 | .hljs-meta, 74 | .hljs-number, 75 | .hljs-operator, 76 | .hljs-selector-attr, 77 | .hljs-selector-class, 78 | .hljs-selector-id, 79 | .hljs-variable { 80 | color: #79c0ff; 81 | } 82 | .hljs-meta .hljs-string, 83 | .hljs-regexp, 84 | .hljs-string { 85 | color: #a5d6ff; 86 | } 87 | .hljs-built_in, 88 | .hljs-symbol { 89 | color: #ffa657; 90 | } 91 | .hljs-code, 92 | .hljs-comment, 93 | .hljs-formula { 94 | color: #8b949e; 95 | } 96 | .hljs-name, 97 | .hljs-quote, 98 | .hljs-selector-pseudo, 99 | .hljs-selector-tag { 100 | color: #7ee787; 101 | } 102 | .hljs-subst { 103 | color: #c9d1d9; 104 | } 105 | .hljs-section { 106 | color: #1f6feb; 107 | font-weight: 700; 108 | } 109 | .hljs-bullet { 110 | color: #f2cc60; 111 | } 112 | .hljs-emphasis { 113 | color: #c9d1d9; 114 | font-style: italic; 115 | } 116 | .hljs-strong { 117 | color: #c9d1d9; 118 | font-weight: 700; 119 | } 120 | .hljs-addition { 121 | color: #aff5b4; 122 | background-color: #033a16; 123 | } 124 | .hljs-deletion { 125 | color: #ffdcd7; 126 | background-color: #67060c; 127 | } 128 | 129 | .markdown-body { 130 | color-scheme: dark; 131 | -ms-text-size-adjust: 100%; 132 | -webkit-text-size-adjust: 100%; 133 | margin: 0; 134 | color: #c9d1d9; 135 | background-color: #0d1117; 136 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 137 | 'Apple Color Emoji', 'Segoe UI Emoji'; 138 | font-size: 16px; 139 | line-height: 1.5; 140 | word-wrap: break-word; 141 | } 142 | 143 | .markdown-body .octicon { 144 | display: inline-block; 145 | fill: currentColor; 146 | vertical-align: text-bottom; 147 | } 148 | 149 | .markdown-body h1:hover .anchor .octicon-link:before, 150 | .markdown-body h2:hover .anchor .octicon-link:before, 151 | .markdown-body h3:hover .anchor .octicon-link:before, 152 | .markdown-body h4:hover .anchor .octicon-link:before, 153 | .markdown-body h5:hover .anchor .octicon-link:before, 154 | .markdown-body h6:hover .anchor .octicon-link:before { 155 | width: 16px; 156 | height: 16px; 157 | content: ' '; 158 | display: inline-block; 159 | background-color: currentColor; 160 | -webkit-mask-image: url("data:image/svg+xml,"); 161 | mask-image: url("data:image/svg+xml,"); 162 | } 163 | 164 | .markdown-body details, 165 | .markdown-body figcaption, 166 | .markdown-body figure { 167 | display: block; 168 | } 169 | 170 | .markdown-body summary { 171 | display: list-item; 172 | } 173 | 174 | .markdown-body [hidden] { 175 | display: none !important; 176 | } 177 | 178 | .markdown-body a { 179 | background-color: transparent; 180 | color: #58a6ff; 181 | text-decoration: none; 182 | } 183 | 184 | .markdown-body a:active, 185 | .markdown-body a:hover { 186 | outline-width: 0; 187 | } 188 | 189 | .markdown-body abbr[title] { 190 | border-bottom: none; 191 | text-decoration: underline dotted; 192 | } 193 | 194 | .markdown-body b, 195 | .markdown-body strong { 196 | font-weight: 600; 197 | } 198 | 199 | .markdown-body dfn { 200 | font-style: italic; 201 | } 202 | 203 | .markdown-body h1 { 204 | margin: 0.67em 0; 205 | font-weight: 600; 206 | padding-bottom: 0.3em; 207 | font-size: 2em; 208 | border-bottom: 1px solid #21262d; 209 | } 210 | 211 | .markdown-body mark { 212 | background-color: rgba(187, 128, 9, 0.15); 213 | color: #c9d1d9; 214 | } 215 | 216 | .markdown-body small { 217 | font-size: 90%; 218 | } 219 | 220 | .markdown-body sub, 221 | .markdown-body sup { 222 | font-size: 75%; 223 | line-height: 0; 224 | position: relative; 225 | vertical-align: baseline; 226 | } 227 | 228 | .markdown-body sub { 229 | bottom: -0.25em; 230 | } 231 | 232 | .markdown-body sup { 233 | top: -0.5em; 234 | } 235 | 236 | .markdown-body img { 237 | border-style: none; 238 | max-width: 100%; 239 | box-sizing: content-box; 240 | background-color: #0d1117; 241 | } 242 | 243 | .markdown-body code, 244 | .markdown-body kbd, 245 | .markdown-body pre, 246 | .markdown-body samp { 247 | font-family: monospace, monospace; 248 | font-size: 1em; 249 | } 250 | 251 | .markdown-body figure { 252 | margin: 1em 40px; 253 | } 254 | 255 | .markdown-body hr { 256 | box-sizing: content-box; 257 | overflow: hidden; 258 | background: transparent; 259 | border-bottom: 1px solid #21262d; 260 | height: 0.25em; 261 | padding: 0; 262 | margin: 24px 0; 263 | background-color: #30363d; 264 | border: 0; 265 | } 266 | 267 | .markdown-body input { 268 | font: inherit; 269 | margin: 0; 270 | overflow: visible; 271 | font-family: inherit; 272 | font-size: inherit; 273 | line-height: inherit; 274 | } 275 | 276 | .markdown-body [type='button'], 277 | .markdown-body [type='reset'], 278 | .markdown-body [type='submit'] { 279 | -webkit-appearance: button; 280 | } 281 | 282 | .markdown-body [type='button']::-moz-focus-inner, 283 | .markdown-body [type='reset']::-moz-focus-inner, 284 | .markdown-body [type='submit']::-moz-focus-inner { 285 | border-style: none; 286 | padding: 0; 287 | } 288 | 289 | .markdown-body [type='button']:-moz-focusring, 290 | .markdown-body [type='reset']:-moz-focusring, 291 | .markdown-body [type='submit']:-moz-focusring { 292 | outline: 1px dotted ButtonText; 293 | } 294 | 295 | .markdown-body [type='checkbox'], 296 | .markdown-body [type='radio'] { 297 | box-sizing: border-box; 298 | padding: 0; 299 | } 300 | 301 | .markdown-body [type='number']::-webkit-inner-spin-button, 302 | .markdown-body [type='number']::-webkit-outer-spin-button { 303 | height: auto; 304 | } 305 | 306 | .markdown-body [type='search'] { 307 | -webkit-appearance: textfield; 308 | outline-offset: -2px; 309 | } 310 | 311 | .markdown-body [type='search']::-webkit-search-cancel-button, 312 | .markdown-body [type='search']::-webkit-search-decoration { 313 | -webkit-appearance: none; 314 | } 315 | 316 | .markdown-body ::-webkit-input-placeholder { 317 | color: inherit; 318 | opacity: 0.54; 319 | } 320 | 321 | .markdown-body ::-webkit-file-upload-button { 322 | -webkit-appearance: button; 323 | font: inherit; 324 | } 325 | 326 | .markdown-body a:hover { 327 | text-decoration: underline; 328 | } 329 | 330 | .markdown-body hr::before { 331 | display: table; 332 | content: ''; 333 | } 334 | 335 | .markdown-body hr::after { 336 | display: table; 337 | clear: both; 338 | content: ''; 339 | } 340 | 341 | .markdown-body table { 342 | border-spacing: 0; 343 | border-collapse: collapse; 344 | display: block; 345 | width: max-content; 346 | max-width: 100%; 347 | overflow: auto; 348 | } 349 | 350 | .markdown-body td, 351 | .markdown-body th { 352 | padding: 0; 353 | } 354 | 355 | .markdown-body details summary { 356 | cursor: pointer; 357 | } 358 | 359 | .markdown-body details:not([open]) > *:not(summary) { 360 | display: none !important; 361 | } 362 | 363 | .markdown-body kbd { 364 | display: inline-block; 365 | padding: 3px 5px; 366 | font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 367 | line-height: 10px; 368 | color: #c9d1d9; 369 | vertical-align: middle; 370 | background-color: #161b22; 371 | border: solid 1px rgba(110, 118, 129, 0.4); 372 | border-bottom-color: rgba(110, 118, 129, 0.4); 373 | border-radius: 6px; 374 | box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); 375 | } 376 | 377 | .markdown-body h1, 378 | .markdown-body h2, 379 | .markdown-body h3, 380 | .markdown-body h4, 381 | .markdown-body h5, 382 | .markdown-body h6 { 383 | margin-top: 24px; 384 | margin-bottom: 16px; 385 | font-weight: 600; 386 | line-height: 1.25; 387 | } 388 | 389 | .markdown-body h2 { 390 | font-weight: 600; 391 | padding-bottom: 0.3em; 392 | font-size: 1.5em; 393 | border-bottom: 1px solid #21262d; 394 | } 395 | 396 | .markdown-body h3 { 397 | font-weight: 600; 398 | font-size: 1.25em; 399 | } 400 | 401 | .markdown-body h4 { 402 | font-weight: 600; 403 | font-size: 1em; 404 | } 405 | 406 | .markdown-body h5 { 407 | font-weight: 600; 408 | font-size: 0.875em; 409 | } 410 | 411 | .markdown-body h6 { 412 | font-weight: 600; 413 | font-size: 0.85em; 414 | color: #8b949e; 415 | } 416 | 417 | .markdown-body p { 418 | margin-top: 0; 419 | margin-bottom: 10px; 420 | } 421 | 422 | .markdown-body blockquote { 423 | margin: 0; 424 | padding: 0 1em; 425 | color: #8b949e; 426 | border-left: 0.25em solid #30363d; 427 | } 428 | 429 | .markdown-body ul, 430 | .markdown-body ol { 431 | margin-top: 0; 432 | margin-bottom: 0; 433 | padding-left: 2em; 434 | } 435 | 436 | .markdown-body ol ol, 437 | .markdown-body ul ol { 438 | list-style-type: lower-roman; 439 | } 440 | 441 | .markdown-body ul ul ol, 442 | .markdown-body ul ol ol, 443 | .markdown-body ol ul ol, 444 | .markdown-body ol ol ol { 445 | list-style-type: lower-alpha; 446 | } 447 | 448 | .markdown-body dd { 449 | margin-left: 0; 450 | } 451 | 452 | .markdown-body tt, 453 | .markdown-body code { 454 | font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 455 | font-size: 12px; 456 | } 457 | 458 | .markdown-body pre { 459 | margin-top: 0; 460 | margin-bottom: 0; 461 | font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 462 | font-size: 12px; 463 | word-wrap: normal; 464 | } 465 | 466 | .markdown-body .octicon { 467 | display: inline-block; 468 | overflow: visible !important; 469 | vertical-align: text-bottom; 470 | fill: currentColor; 471 | } 472 | 473 | .markdown-body ::placeholder { 474 | color: #484f58; 475 | opacity: 1; 476 | } 477 | 478 | .markdown-body input::-webkit-outer-spin-button, 479 | .markdown-body input::-webkit-inner-spin-button { 480 | margin: 0; 481 | -webkit-appearance: none; 482 | appearance: none; 483 | } 484 | 485 | .markdown-body .pl-c { 486 | color: #8b949e; 487 | } 488 | 489 | .markdown-body .pl-c1, 490 | .markdown-body .pl-s .pl-v { 491 | color: #79c0ff; 492 | } 493 | 494 | .markdown-body .pl-e, 495 | .markdown-body .pl-en { 496 | color: #d2a8ff; 497 | } 498 | 499 | .markdown-body .pl-smi, 500 | .markdown-body .pl-s .pl-s1 { 501 | color: #c9d1d9; 502 | } 503 | 504 | .markdown-body .pl-ent { 505 | color: #7ee787; 506 | } 507 | 508 | .markdown-body .pl-k { 509 | color: #ff7b72; 510 | } 511 | 512 | .markdown-body .pl-s, 513 | .markdown-body .pl-pds, 514 | .markdown-body .pl-s .pl-pse .pl-s1, 515 | .markdown-body .pl-sr, 516 | .markdown-body .pl-sr .pl-cce, 517 | .markdown-body .pl-sr .pl-sre, 518 | .markdown-body .pl-sr .pl-sra { 519 | color: #a5d6ff; 520 | } 521 | 522 | .markdown-body .pl-v, 523 | .markdown-body .pl-smw { 524 | color: #ffa657; 525 | } 526 | 527 | .markdown-body .pl-bu { 528 | color: #f85149; 529 | } 530 | 531 | .markdown-body .pl-ii { 532 | color: #f0f6fc; 533 | background-color: #8e1519; 534 | } 535 | 536 | .markdown-body .pl-c2 { 537 | color: #f0f6fc; 538 | background-color: #b62324; 539 | } 540 | 541 | .markdown-body .pl-sr .pl-cce { 542 | font-weight: bold; 543 | color: #7ee787; 544 | } 545 | 546 | .markdown-body .pl-ml { 547 | color: #f2cc60; 548 | } 549 | 550 | .markdown-body .pl-mh, 551 | .markdown-body .pl-mh .pl-en, 552 | .markdown-body .pl-ms { 553 | font-weight: bold; 554 | color: #1f6feb; 555 | } 556 | 557 | .markdown-body .pl-mi { 558 | font-style: italic; 559 | color: #c9d1d9; 560 | } 561 | 562 | .markdown-body .pl-mb { 563 | font-weight: bold; 564 | color: #c9d1d9; 565 | } 566 | 567 | .markdown-body .pl-md { 568 | color: #ffdcd7; 569 | background-color: #67060c; 570 | } 571 | 572 | .markdown-body .pl-mi1 { 573 | color: #aff5b4; 574 | background-color: #033a16; 575 | } 576 | 577 | .markdown-body .pl-mc { 578 | color: #ffdfb6; 579 | background-color: #5a1e02; 580 | } 581 | 582 | .markdown-body .pl-mi2 { 583 | color: #c9d1d9; 584 | background-color: #1158c7; 585 | } 586 | 587 | .markdown-body .pl-mdr { 588 | font-weight: bold; 589 | color: #d2a8ff; 590 | } 591 | 592 | .markdown-body .pl-ba { 593 | color: #8b949e; 594 | } 595 | 596 | .markdown-body .pl-sg { 597 | color: #484f58; 598 | } 599 | 600 | .markdown-body .pl-corl { 601 | text-decoration: underline; 602 | color: #a5d6ff; 603 | } 604 | 605 | .markdown-body [data-catalyst] { 606 | display: block; 607 | } 608 | 609 | .markdown-body g-emoji { 610 | font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 611 | font-size: 1em; 612 | font-style: normal !important; 613 | font-weight: 400; 614 | line-height: 1; 615 | vertical-align: -0.075em; 616 | } 617 | 618 | .markdown-body g-emoji img { 619 | width: 1em; 620 | height: 1em; 621 | } 622 | 623 | .markdown-body::before { 624 | display: table; 625 | content: ''; 626 | } 627 | 628 | .markdown-body::after { 629 | display: table; 630 | clear: both; 631 | content: ''; 632 | } 633 | 634 | .markdown-body > *:first-child { 635 | // margin-top: 0 !important; 636 | } 637 | 638 | .markdown-body > *:last-child { 639 | margin-bottom: 0 !important; 640 | } 641 | 642 | .markdown-body a:not([href]) { 643 | color: inherit; 644 | text-decoration: none; 645 | } 646 | 647 | .markdown-body .absent { 648 | color: #f85149; 649 | } 650 | 651 | .markdown-body .anchor { 652 | float: left; 653 | padding-right: 4px; 654 | margin-left: -20px; 655 | line-height: 1; 656 | } 657 | 658 | .markdown-body .anchor:focus { 659 | outline: none; 660 | } 661 | 662 | .markdown-body p, 663 | .markdown-body blockquote, 664 | .markdown-body ul, 665 | .markdown-body ol, 666 | .markdown-body dl, 667 | .markdown-body table, 668 | .markdown-body pre, 669 | .markdown-body details { 670 | margin-top: 0; 671 | margin-bottom: 16px; 672 | } 673 | 674 | .markdown-body blockquote > :first-child { 675 | margin-top: 0; 676 | } 677 | 678 | .markdown-body blockquote > :last-child { 679 | margin-bottom: 0; 680 | } 681 | 682 | .markdown-body sup > a::before { 683 | content: '['; 684 | } 685 | 686 | .markdown-body sup > a::after { 687 | content: ']'; 688 | } 689 | 690 | .markdown-body h1 .octicon-link, 691 | .markdown-body h2 .octicon-link, 692 | .markdown-body h3 .octicon-link, 693 | .markdown-body h4 .octicon-link, 694 | .markdown-body h5 .octicon-link, 695 | .markdown-body h6 .octicon-link { 696 | color: #c9d1d9; 697 | vertical-align: middle; 698 | visibility: hidden; 699 | } 700 | 701 | .markdown-body h1:hover .anchor, 702 | .markdown-body h2:hover .anchor, 703 | .markdown-body h3:hover .anchor, 704 | .markdown-body h4:hover .anchor, 705 | .markdown-body h5:hover .anchor, 706 | .markdown-body h6:hover .anchor { 707 | text-decoration: none; 708 | } 709 | 710 | .markdown-body h1:hover .anchor .octicon-link, 711 | .markdown-body h2:hover .anchor .octicon-link, 712 | .markdown-body h3:hover .anchor .octicon-link, 713 | .markdown-body h4:hover .anchor .octicon-link, 714 | .markdown-body h5:hover .anchor .octicon-link, 715 | .markdown-body h6:hover .anchor .octicon-link { 716 | visibility: visible; 717 | } 718 | 719 | .markdown-body h1 tt, 720 | .markdown-body h1 code, 721 | .markdown-body h2 tt, 722 | .markdown-body h2 code, 723 | .markdown-body h3 tt, 724 | .markdown-body h3 code, 725 | .markdown-body h4 tt, 726 | .markdown-body h4 code, 727 | .markdown-body h5 tt, 728 | .markdown-body h5 code, 729 | .markdown-body h6 tt, 730 | .markdown-body h6 code { 731 | padding: 0 0.2em; 732 | font-size: inherit; 733 | } 734 | 735 | .markdown-body ul.no-list, 736 | .markdown-body ol.no-list { 737 | padding: 0; 738 | list-style-type: none; 739 | } 740 | 741 | .markdown-body ol[type='1'] { 742 | list-style-type: decimal; 743 | } 744 | 745 | .markdown-body ol[type='a'] { 746 | list-style-type: lower-alpha; 747 | } 748 | 749 | .markdown-body ol[type='i'] { 750 | list-style-type: lower-roman; 751 | } 752 | 753 | .markdown-body div > ol:not([type]) { 754 | list-style-type: decimal; 755 | } 756 | 757 | .markdown-body ul ul, 758 | .markdown-body ul ol, 759 | .markdown-body ol ol, 760 | .markdown-body ol ul { 761 | margin-top: 0; 762 | margin-bottom: 0; 763 | } 764 | 765 | .markdown-body li > p { 766 | margin-top: 16px; 767 | } 768 | 769 | .markdown-body li + li { 770 | margin-top: 0.25em; 771 | } 772 | 773 | .markdown-body dl { 774 | padding: 0; 775 | } 776 | 777 | .markdown-body dl dt { 778 | padding: 0; 779 | margin-top: 16px; 780 | font-size: 1em; 781 | font-style: italic; 782 | font-weight: 600; 783 | } 784 | 785 | .markdown-body dl dd { 786 | padding: 0 16px; 787 | margin-bottom: 16px; 788 | } 789 | 790 | .markdown-body table th { 791 | font-weight: 600; 792 | } 793 | 794 | .markdown-body table th, 795 | .markdown-body table td { 796 | padding: 6px 13px; 797 | border: 1px solid #30363d; 798 | } 799 | 800 | .markdown-body table tr { 801 | background-color: #0d1117; 802 | border-top: 1px solid #21262d; 803 | } 804 | 805 | .markdown-body table tr:nth-child(2n) { 806 | background-color: #161b22; 807 | } 808 | 809 | .markdown-body table img { 810 | background-color: transparent; 811 | } 812 | 813 | .markdown-body img[align='right'] { 814 | padding-left: 20px; 815 | } 816 | 817 | .markdown-body img[align='left'] { 818 | padding-right: 20px; 819 | } 820 | 821 | .markdown-body .emoji { 822 | max-width: none; 823 | vertical-align: text-top; 824 | background-color: transparent; 825 | } 826 | 827 | .markdown-body span.frame { 828 | display: block; 829 | overflow: hidden; 830 | } 831 | 832 | .markdown-body span.frame > span { 833 | display: block; 834 | float: left; 835 | width: auto; 836 | padding: 7px; 837 | margin: 13px 0 0; 838 | overflow: hidden; 839 | border: 1px solid #30363d; 840 | } 841 | 842 | .markdown-body span.frame span img { 843 | display: block; 844 | float: left; 845 | } 846 | 847 | .markdown-body span.frame span span { 848 | display: block; 849 | padding: 5px 0 0; 850 | clear: both; 851 | color: #c9d1d9; 852 | } 853 | 854 | .markdown-body span.align-center { 855 | display: block; 856 | overflow: hidden; 857 | clear: both; 858 | } 859 | 860 | .markdown-body span.align-center > span { 861 | display: block; 862 | margin: 13px auto 0; 863 | overflow: hidden; 864 | text-align: center; 865 | } 866 | 867 | .markdown-body span.align-center span img { 868 | margin: 0 auto; 869 | text-align: center; 870 | } 871 | 872 | .markdown-body span.align-right { 873 | display: block; 874 | overflow: hidden; 875 | clear: both; 876 | } 877 | 878 | .markdown-body span.align-right > span { 879 | display: block; 880 | margin: 13px 0 0; 881 | overflow: hidden; 882 | text-align: right; 883 | } 884 | 885 | .markdown-body span.align-right span img { 886 | margin: 0; 887 | text-align: right; 888 | } 889 | 890 | .markdown-body span.float-left { 891 | display: block; 892 | float: left; 893 | margin-right: 13px; 894 | overflow: hidden; 895 | } 896 | 897 | .markdown-body span.float-left span { 898 | margin: 13px 0 0; 899 | } 900 | 901 | .markdown-body span.float-right { 902 | display: block; 903 | float: right; 904 | margin-left: 13px; 905 | overflow: hidden; 906 | } 907 | 908 | .markdown-body span.float-right > span { 909 | display: block; 910 | margin: 13px auto 0; 911 | overflow: hidden; 912 | text-align: right; 913 | } 914 | 915 | .markdown-body code, 916 | .markdown-body tt { 917 | padding: 0.2em 0.4em; 918 | margin: 0; 919 | font-size: 85%; 920 | background-color: rgba(110, 118, 129, 0.4); 921 | border-radius: 6px; 922 | } 923 | 924 | .markdown-body code br, 925 | .markdown-body tt br { 926 | display: none; 927 | } 928 | 929 | .markdown-body del code { 930 | text-decoration: inherit; 931 | } 932 | 933 | .markdown-body pre code { 934 | font-size: 100%; 935 | } 936 | 937 | .markdown-body pre > code { 938 | padding: 0; 939 | margin: 0; 940 | word-break: normal; 941 | white-space: pre; 942 | background: transparent; 943 | border: 0; 944 | } 945 | 946 | .markdown-body .highlight { 947 | margin-bottom: 16px; 948 | } 949 | 950 | .markdown-body .highlight pre { 951 | margin-bottom: 0; 952 | word-break: normal; 953 | } 954 | 955 | .markdown-body .highlight pre, 956 | .markdown-body pre { 957 | padding: 16px; 958 | overflow: auto; 959 | font-size: 85%; 960 | line-height: 1.45; 961 | background-color: #161b22; 962 | border-radius: 6px; 963 | } 964 | 965 | .markdown-body pre code, 966 | .markdown-body pre tt { 967 | display: inline; 968 | max-width: auto; 969 | padding: 0; 970 | margin: 0; 971 | overflow: visible; 972 | line-height: inherit; 973 | word-wrap: normal; 974 | background-color: transparent; 975 | border: 0; 976 | } 977 | 978 | .markdown-body .csv-data td, 979 | .markdown-body .csv-data th { 980 | padding: 5px; 981 | overflow: hidden; 982 | font-size: 12px; 983 | line-height: 1; 984 | text-align: left; 985 | white-space: nowrap; 986 | } 987 | 988 | .markdown-body .csv-data .blob-num { 989 | padding: 10px 8px 9px; 990 | text-align: right; 991 | background: #0d1117; 992 | border: 0; 993 | } 994 | 995 | .markdown-body .csv-data tr { 996 | border-top: 0; 997 | } 998 | 999 | .markdown-body .csv-data th { 1000 | font-weight: 600; 1001 | background: #161b22; 1002 | border-top: 0; 1003 | } 1004 | 1005 | .markdown-body .footnotes { 1006 | font-size: 12px; 1007 | color: #8b949e; 1008 | border-top: 1px solid #30363d; 1009 | } 1010 | 1011 | .markdown-body .footnotes ol { 1012 | padding-left: 16px; 1013 | } 1014 | 1015 | .markdown-body .footnotes li { 1016 | position: relative; 1017 | } 1018 | 1019 | .markdown-body .footnotes li:target::before { 1020 | position: absolute; 1021 | top: -8px; 1022 | right: -8px; 1023 | bottom: -8px; 1024 | left: -24px; 1025 | pointer-events: none; 1026 | content: ''; 1027 | border: 2px solid #1f6feb; 1028 | border-radius: 6px; 1029 | } 1030 | 1031 | .markdown-body .footnotes li:target { 1032 | color: #c9d1d9; 1033 | } 1034 | 1035 | .markdown-body .footnotes .data-footnote-backref g-emoji { 1036 | font-family: monospace; 1037 | } 1038 | 1039 | .markdown-body .task-list-item { 1040 | list-style-type: none; 1041 | } 1042 | 1043 | .markdown-body .task-list-item label { 1044 | font-weight: 400; 1045 | } 1046 | 1047 | .markdown-body .task-list-item.enabled label { 1048 | cursor: pointer; 1049 | } 1050 | 1051 | .markdown-body .task-list-item + .task-list-item { 1052 | margin-top: 3px; 1053 | } 1054 | 1055 | .markdown-body .task-list-item .handle { 1056 | display: none; 1057 | } 1058 | 1059 | .markdown-body .task-list-item-checkbox { 1060 | margin: 0 0.2em 0.25em -1.6em; 1061 | vertical-align: middle; 1062 | } 1063 | 1064 | .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { 1065 | margin: 0 -1.6em 0.25em 0.2em; 1066 | } 1067 | 1068 | .markdown-body ::-webkit-calendar-picker-indicator { 1069 | filter: invert(50%); 1070 | } 1071 | } 1072 | -------------------------------------------------------------------------------- /src/content-script/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import '../base.css' 3 | import { getUserConfig, Language, Theme } from '../config' 4 | import { detectSystemColorScheme } from '../utils' 5 | import ChatGPTContainer from './ChatGPTContainer' 6 | import { config, SearchEngine } from './search-engine-configs' 7 | import { 8 | getPossibleElementByQuerySelector, 9 | getSearchParam, 10 | getLangOptionsWithLink, 11 | getTranscriptHTML, 12 | getRawTranscript, 13 | waitForElm, 14 | getConverTranscript, 15 | } from './utils' 16 | import { getSummaryPrompt } from './prompt' 17 | import xss from 'xss' 18 | import { defaultPrompt } from '../utils' 19 | import './styles.scss' 20 | 21 | const siteRegex = new RegExp(Object.keys(config).join('|')) 22 | const siteName = location.hostname.match(siteRegex)![0] 23 | const siteConfig = config[siteName] 24 | 25 | async function mount( 26 | question: string, 27 | siteConfig: SearchEngine, 28 | transcript?: any, 29 | langOptionsWithLink?: any, 30 | ) { 31 | if (document.querySelector('div.glarity--container')) { 32 | document.querySelector('div.glarity--container')?.remove() 33 | } 34 | 35 | const container = document.createElement('div') 36 | container.className = 'glarity--container' 37 | 38 | const userConfig = await getUserConfig() 39 | let theme: Theme 40 | if (userConfig.theme === Theme.Auto) { 41 | theme = detectSystemColorScheme() 42 | } else { 43 | theme = userConfig.theme 44 | } 45 | if (theme === Theme.Dark) { 46 | container.classList.add('gpt--dark') 47 | } else { 48 | container.classList.add('gpt--light') 49 | } 50 | 51 | if (siteName === 'youtube') { 52 | container.classList.add('glarity--chatgpt--youtube') 53 | waitForElm('#secondary.style-scope.ytd-watch-flexy').then(() => { 54 | document.querySelector('#secondary.style-scope.ytd-watch-flexy')?.prepend(container) 55 | }) 56 | } else { 57 | const siderbarContainer = getPossibleElementByQuerySelector(siteConfig.sidebarContainerQuery) 58 | 59 | console.log( 60 | 'siderbarContainer', 61 | siderbarContainer, 62 | document.querySelector('#center_col')?.nextSibling, 63 | ) 64 | 65 | if (siderbarContainer) { 66 | siderbarContainer.prepend(container) 67 | } else { 68 | // container.classList.add('sidebar--free') 69 | // const appendContainer = getPossibleElementByQuerySelector(siteConfig.appendContainerQuery) 70 | // if (appendContainer) { 71 | // appendContainer.appendChild(container) 72 | // } 73 | 74 | if (siteConfig.extabarContainerQuery && document.querySelector('#center_col')?.nextSibling) { 75 | container.classList.add('glarity--full-container') 76 | const appendContainer = getPossibleElementByQuerySelector(siteConfig.extabarContainerQuery) 77 | if (appendContainer) { 78 | appendContainer.appendChild(container) 79 | } 80 | } else { 81 | container.classList.add('sidebar--free') 82 | const appendContainer = getPossibleElementByQuerySelector(siteConfig.appendContainerQuery) 83 | if (appendContainer) { 84 | appendContainer.appendChild(container) 85 | } 86 | } 87 | } 88 | } 89 | 90 | render( 91 | , 98 | container, 99 | ) 100 | } 101 | 102 | async function run() { 103 | const language = window.navigator.language 104 | const userConfig = await getUserConfig() 105 | console.debug('Mount ChatGPT on', siteName) 106 | 107 | // Youtube 108 | if (siteName === 'youtube') { 109 | const videoId = getSearchParam(window.location.href)?.v 110 | 111 | if (!videoId) { 112 | return 113 | } 114 | 115 | // Get Transcript Language Options & Create Language Select Btns 116 | const langOptionsWithLink = await getLangOptionsWithLink(videoId) 117 | 118 | console.log('langOptionsWithLink', langOptionsWithLink) 119 | 120 | const transcriptList = await getConverTranscript({ langOptionsWithLink, videoId, index: 0 }) 121 | 122 | // const transcript = 123 | // transcriptList.map((v) => { 124 | // return `(${v.time}):${v.text}` 125 | // }) || [] 126 | 127 | // let transcriptText = transcript.join('. \r\n ') 128 | 129 | // transcriptText = 130 | // transcriptText.length > 3700 ? transcriptText.substring(0, 3700) : transcriptText 131 | 132 | const videoTitle = document.title 133 | const videoUrl = window.location.href 134 | 135 | const transcript = ( 136 | transcriptList.map((v) => { 137 | return `${v.text}` 138 | }) || [] 139 | ).join('') 140 | 141 | // const queryText = `Video transcript: 142 | 143 | // ${suttitleText} 144 | 145 | // Instructions: Use the transcript information above to summarise the highlights of this video. 146 | 147 | // Reply in ${userConfig.language === Language.Auto ? language : userConfig.language} Language.` 148 | 149 | const Instructions = userConfig.prompt ? `${userConfig.prompt}` : defaultPrompt 150 | 151 | const queryText = ` 152 | Title: ${videoTitle} 153 | URL: ${videoUrl} 154 | Transcript:${getSummaryPrompt(transcript)} 155 | 156 | Instructions: ${Instructions} 157 | 158 | Reply in ${userConfig.language === Language.Auto ? language : userConfig.language} Language.` 159 | 160 | // const queryText = `Title: ${videoTitle} 161 | // URL: ${videoUrl} 162 | 163 | // Transcript:${getSummaryPrompt(transcript)} 164 | 165 | // Instructions: The above is the transcript and title of a youtube video I would like to analyze for exaggeration. Based on the content, please give a Clickbait score(Full score of 10) of the title. Please provide a brief explanation for your rating. and give a most accurate title according to the transcript and summarize the highlights of the video. 166 | 167 | // Reply format: 168 | // "Reply in the following format:" 169 | // **Summary**: 170 | // xxx \r\n 171 | // **Clickbait score**: x/10 \r\n 172 | // **Explanation**: 173 | // xxx \r\n 174 | // **Most accurate title**: 175 | // xxx \r\n 176 | 177 | // Reply in ${userConfig.language === Language.Auto ? language : userConfig.language} Language.` 178 | 179 | console.log('youtube queryText', queryText) 180 | 181 | mount(transcript.length > 0 ? queryText : '', siteConfig, transcriptList, langOptionsWithLink) 182 | return 183 | } 184 | 185 | // Google 186 | const searchInput = getPossibleElementByQuerySelector(siteConfig.inputQuery) 187 | if (searchInput && searchInput.value) { 188 | const searchValueWithLanguageOption = 189 | userConfig.language === Language.Auto 190 | ? searchInput.value 191 | : `${searchInput.value}(in ${userConfig.language})` 192 | 193 | console.log('searchValueWithLanguageOption', searchValueWithLanguageOption) 194 | // mount(searchValueWithLanguageOption, siteConfig) 195 | 196 | let searchList = '' 197 | 198 | // Result list 199 | const resultList = document.querySelectorAll('div.MjjYud') 200 | if (resultList.length > 0) { 201 | resultList.forEach((v, i) => { 202 | let url = '' 203 | let text = '' 204 | const index = i + 1 205 | let titleWrap: Element | null = null 206 | let title: Element | null = null 207 | 208 | if (v.contains(v.querySelector('block-component'))) { 209 | // featured snippets 210 | titleWrap = v.querySelector('div.yuRUbf') 211 | title = titleWrap?.querySelector('h3.LC20lb') || null 212 | url = titleWrap?.querySelector('a')?.href || '' 213 | text = v.querySelector('span.ILfuVd')?.textContent || '' 214 | } else if (v.contains(v.querySelector('video-voyager'))) { 215 | // video 216 | titleWrap = v.querySelector('div.ct3b9e') 217 | title = titleWrap?.querySelector('h3.LC20lb') || null 218 | // url = titleWrap?.querySelector('a')?.href || '' 219 | // text = v.querySelector('div.Uroaid')?.textContent || '' 220 | url = '' 221 | text = '' 222 | } else { 223 | // link 224 | titleWrap = v.querySelector('div.yuRUbf') 225 | title = titleWrap?.querySelector('h3.LC20lb') || null 226 | url = titleWrap?.querySelector('a')?.href || '' 227 | text = v.querySelector('div.VwiC3b')?.textContent || '' 228 | } 229 | 230 | console.log(title, text, url) 231 | 232 | if (title) { 233 | const html = xss(`[${index}] `) 234 | title.insertAdjacentHTML('afterbegin', html) 235 | } 236 | 237 | if (text && url && index <= 5) { 238 | searchList = 239 | searchList + 240 | ` 241 | [${index}] ${text} 242 | URL: ${url} 243 | 244 | ` 245 | } 246 | }) 247 | } 248 | 249 | const date = new Date() 250 | const year = date.getFullYear() 251 | const month = date.getMonth() + 1 252 | const day = date.getDate() 253 | 254 | const queryText = `Web search results: 255 | 256 | ${searchList} 257 | 258 | Current date: ${year}/${month}/${day} 259 | 260 | Instructions: Using the provided web search results, write a comprehensive reply to the given query. Make sure to cite results using [[number](URL)] notation after the reference. If the provided search results refer to multiple subjects with the same name, write separate answers for each subject. 261 | Query: ${searchInput.value} 262 | Reply in ${userConfig.language === Language.Auto ? language : userConfig.language}` 263 | 264 | console.log('searchList', searchList) 265 | console.log('queryText', queryText) 266 | console.log('siteConfig', siteConfig) 267 | 268 | mount(searchList ? queryText : searchValueWithLanguageOption, siteConfig, '', '') 269 | } 270 | } 271 | 272 | run() 273 | 274 | if (siteConfig.watchRouteChange) { 275 | siteConfig.watchRouteChange(run) 276 | } 277 | -------------------------------------------------------------------------------- /src/content-script/light.scss: -------------------------------------------------------------------------------- 1 | .glarity--container.gpt--light { 2 | .glarity--chatgpt { 3 | color: black; 4 | border-color: #e8e8e8; 5 | background-color: #f9f9f9; 6 | } 7 | 8 | pre code.hljs { 9 | display: block; 10 | overflow-x: auto; 11 | padding: 1em; 12 | } 13 | code.hljs { 14 | padding: 3px 5px; 15 | } /*! 16 | Theme: GitHub 17 | Description: Light theme as seen on github.com 18 | Author: github.com 19 | Maintainer: @Hirse 20 | Updated: 2021-05-15 21 | 22 | Outdated base version: https://github.com/primer/github-syntax-light 23 | Current colors taken from GitHub's CSS 24 | */ 25 | .hljs { 26 | color: #24292e; 27 | background: #fff; 28 | } 29 | .hljs-doctag, 30 | .hljs-keyword, 31 | .hljs-meta .hljs-keyword, 32 | .hljs-template-tag, 33 | .hljs-template-variable, 34 | .hljs-type, 35 | .hljs-variable.language_ { 36 | color: #d73a49; 37 | } 38 | .hljs-title, 39 | .hljs-title.class_, 40 | .hljs-title.class_.inherited__, 41 | .hljs-title.function_ { 42 | color: #6f42c1; 43 | } 44 | .hljs-attr, 45 | .hljs-attribute, 46 | .hljs-literal, 47 | .hljs-meta, 48 | .hljs-number, 49 | .hljs-operator, 50 | .hljs-selector-attr, 51 | .hljs-selector-class, 52 | .hljs-selector-id, 53 | .hljs-variable { 54 | color: #005cc5; 55 | } 56 | .hljs-meta .hljs-string, 57 | .hljs-regexp, 58 | .hljs-string { 59 | color: #032f62; 60 | } 61 | .hljs-built_in, 62 | .hljs-symbol { 63 | color: #e36209; 64 | } 65 | .hljs-code, 66 | .hljs-comment, 67 | .hljs-formula { 68 | color: #6a737d; 69 | } 70 | .hljs-name, 71 | .hljs-quote, 72 | .hljs-selector-pseudo, 73 | .hljs-selector-tag { 74 | color: #22863a; 75 | } 76 | .hljs-subst { 77 | color: #24292e; 78 | } 79 | .hljs-section { 80 | color: #005cc5; 81 | font-weight: 700; 82 | } 83 | .hljs-bullet { 84 | color: #735c0f; 85 | } 86 | .hljs-emphasis { 87 | color: #24292e; 88 | font-style: italic; 89 | } 90 | .hljs-strong { 91 | color: #24292e; 92 | font-weight: 700; 93 | } 94 | .hljs-addition { 95 | color: #22863a; 96 | background-color: #f0fff4; 97 | } 98 | .hljs-deletion { 99 | color: #b31d28; 100 | background-color: #ffeef0; 101 | } 102 | 103 | .markdown-body { 104 | -ms-text-size-adjust: 100%; 105 | -webkit-text-size-adjust: 100%; 106 | margin: 0; 107 | color: #24292f; 108 | // background-color: #ffffff; 109 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 110 | 'Apple Color Emoji', 'Segoe UI Emoji'; 111 | font-size: 16px; 112 | line-height: 1.5; 113 | word-wrap: break-word; 114 | } 115 | 116 | .markdown-body .octicon { 117 | display: inline-block; 118 | fill: currentColor; 119 | vertical-align: text-bottom; 120 | } 121 | 122 | .markdown-body h1:hover .anchor .octicon-link:before, 123 | .markdown-body h2:hover .anchor .octicon-link:before, 124 | .markdown-body h3:hover .anchor .octicon-link:before, 125 | .markdown-body h4:hover .anchor .octicon-link:before, 126 | .markdown-body h5:hover .anchor .octicon-link:before, 127 | .markdown-body h6:hover .anchor .octicon-link:before { 128 | width: 16px; 129 | height: 16px; 130 | content: ' '; 131 | display: inline-block; 132 | background-color: currentColor; 133 | -webkit-mask-image: url("data:image/svg+xml,"); 134 | mask-image: url("data:image/svg+xml,"); 135 | } 136 | 137 | .markdown-body details, 138 | .markdown-body figcaption, 139 | .markdown-body figure { 140 | display: block; 141 | } 142 | 143 | .markdown-body summary { 144 | display: list-item; 145 | } 146 | 147 | .markdown-body [hidden] { 148 | display: none !important; 149 | } 150 | 151 | .markdown-body a { 152 | background-color: transparent; 153 | color: #0969da; 154 | text-decoration: none; 155 | } 156 | 157 | .markdown-body a:active, 158 | .markdown-body a:hover { 159 | outline-width: 0; 160 | } 161 | 162 | .markdown-body abbr[title] { 163 | border-bottom: none; 164 | text-decoration: underline dotted; 165 | } 166 | 167 | .markdown-body b, 168 | .markdown-body strong { 169 | font-weight: 600; 170 | } 171 | 172 | .markdown-body dfn { 173 | font-style: italic; 174 | } 175 | 176 | .markdown-body h1 { 177 | margin: 0.67em 0; 178 | font-weight: 600; 179 | padding-bottom: 0.3em; 180 | font-size: 2em; 181 | border-bottom: 1px solid hsla(210, 18%, 87%, 1); 182 | } 183 | 184 | .markdown-body mark { 185 | background-color: #fff8c5; 186 | color: #24292f; 187 | } 188 | 189 | .markdown-body small { 190 | font-size: 90%; 191 | } 192 | 193 | .markdown-body sub, 194 | .markdown-body sup { 195 | font-size: 75%; 196 | line-height: 0; 197 | position: relative; 198 | vertical-align: baseline; 199 | } 200 | 201 | .markdown-body sub { 202 | bottom: -0.25em; 203 | } 204 | 205 | .markdown-body sup { 206 | top: -0.5em; 207 | } 208 | 209 | .markdown-body img { 210 | border-style: none; 211 | max-width: 100%; 212 | box-sizing: content-box; 213 | background-color: #ffffff; 214 | } 215 | 216 | .markdown-body code, 217 | .markdown-body kbd, 218 | .markdown-body pre, 219 | .markdown-body samp { 220 | font-family: monospace, monospace; 221 | font-size: 1em; 222 | } 223 | 224 | .markdown-body figure { 225 | margin: 1em 40px; 226 | } 227 | 228 | .markdown-body hr { 229 | box-sizing: content-box; 230 | overflow: hidden; 231 | background: transparent; 232 | border-bottom: 1px solid hsla(210, 18%, 87%, 1); 233 | height: 0.25em; 234 | padding: 0; 235 | margin: 24px 0; 236 | background-color: #d0d7de; 237 | border: 0; 238 | } 239 | 240 | .markdown-body input { 241 | font: inherit; 242 | margin: 0; 243 | overflow: visible; 244 | font-family: inherit; 245 | font-size: inherit; 246 | line-height: inherit; 247 | } 248 | 249 | .markdown-body [type='button'], 250 | .markdown-body [type='reset'], 251 | .markdown-body [type='submit'] { 252 | -webkit-appearance: button; 253 | } 254 | 255 | .markdown-body [type='button']::-moz-focus-inner, 256 | .markdown-body [type='reset']::-moz-focus-inner, 257 | .markdown-body [type='submit']::-moz-focus-inner { 258 | border-style: none; 259 | padding: 0; 260 | } 261 | 262 | .markdown-body [type='button']:-moz-focusring, 263 | .markdown-body [type='reset']:-moz-focusring, 264 | .markdown-body [type='submit']:-moz-focusring { 265 | outline: 1px dotted ButtonText; 266 | } 267 | 268 | .markdown-body [type='checkbox'], 269 | .markdown-body [type='radio'] { 270 | box-sizing: border-box; 271 | padding: 0; 272 | } 273 | 274 | .markdown-body [type='number']::-webkit-inner-spin-button, 275 | .markdown-body [type='number']::-webkit-outer-spin-button { 276 | height: auto; 277 | } 278 | 279 | .markdown-body [type='search'] { 280 | -webkit-appearance: textfield; 281 | outline-offset: -2px; 282 | } 283 | 284 | .markdown-body [type='search']::-webkit-search-cancel-button, 285 | .markdown-body [type='search']::-webkit-search-decoration { 286 | -webkit-appearance: none; 287 | } 288 | 289 | .markdown-body ::-webkit-input-placeholder { 290 | color: inherit; 291 | opacity: 0.54; 292 | } 293 | 294 | .markdown-body ::-webkit-file-upload-button { 295 | -webkit-appearance: button; 296 | font: inherit; 297 | } 298 | 299 | .markdown-body a:hover { 300 | text-decoration: underline; 301 | } 302 | 303 | .markdown-body hr::before { 304 | display: table; 305 | content: ''; 306 | } 307 | 308 | .markdown-body hr::after { 309 | display: table; 310 | clear: both; 311 | content: ''; 312 | } 313 | 314 | .markdown-body table { 315 | border-spacing: 0; 316 | border-collapse: collapse; 317 | display: block; 318 | width: max-content; 319 | max-width: 100%; 320 | overflow: auto; 321 | } 322 | 323 | .markdown-body td, 324 | .markdown-body th { 325 | padding: 0; 326 | } 327 | 328 | .markdown-body details summary { 329 | cursor: pointer; 330 | } 331 | 332 | .markdown-body details:not([open]) > *:not(summary) { 333 | display: none !important; 334 | } 335 | 336 | .markdown-body kbd { 337 | display: inline-block; 338 | padding: 3px 5px; 339 | font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 340 | line-height: 10px; 341 | color: #24292f; 342 | vertical-align: middle; 343 | background-color: #f6f8fa; 344 | border: solid 1px rgba(175, 184, 193, 0.2); 345 | border-bottom-color: rgba(175, 184, 193, 0.2); 346 | border-radius: 6px; 347 | box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); 348 | } 349 | 350 | .markdown-body h1, 351 | .markdown-body h2, 352 | .markdown-body h3, 353 | .markdown-body h4, 354 | .markdown-body h5, 355 | .markdown-body h6 { 356 | margin-top: 24px; 357 | margin-bottom: 16px; 358 | font-weight: 600; 359 | line-height: 1.25; 360 | } 361 | 362 | .markdown-body h2 { 363 | font-weight: 600; 364 | padding-bottom: 0.3em; 365 | font-size: 1.5em; 366 | border-bottom: 1px solid hsla(210, 18%, 87%, 1); 367 | } 368 | 369 | .markdown-body h3 { 370 | font-weight: 600; 371 | font-size: 1.25em; 372 | } 373 | 374 | .markdown-body h4 { 375 | font-weight: 600; 376 | font-size: 1em; 377 | } 378 | 379 | .markdown-body h5 { 380 | font-weight: 600; 381 | font-size: 0.875em; 382 | } 383 | 384 | .markdown-body h6 { 385 | font-weight: 600; 386 | font-size: 0.85em; 387 | color: #57606a; 388 | } 389 | 390 | .markdown-body p { 391 | margin-top: 0; 392 | margin-bottom: 10px; 393 | } 394 | 395 | .markdown-body blockquote { 396 | margin: 0; 397 | padding: 0 1em; 398 | color: #57606a; 399 | border-left: 0.25em solid #d0d7de; 400 | } 401 | 402 | .markdown-body ul, 403 | .markdown-body ol { 404 | margin-top: 0; 405 | margin-bottom: 0; 406 | padding-left: 2em; 407 | } 408 | 409 | .markdown-body ol ol, 410 | .markdown-body ul ol { 411 | list-style-type: lower-roman; 412 | } 413 | 414 | .markdown-body ul ul ol, 415 | .markdown-body ul ol ol, 416 | .markdown-body ol ul ol, 417 | .markdown-body ol ol ol { 418 | list-style-type: lower-alpha; 419 | } 420 | 421 | .markdown-body dd { 422 | margin-left: 0; 423 | } 424 | 425 | .markdown-body tt, 426 | .markdown-body code { 427 | font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 428 | font-size: 12px; 429 | } 430 | 431 | .markdown-body pre { 432 | margin-top: 0; 433 | margin-bottom: 0; 434 | font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 435 | font-size: 12px; 436 | word-wrap: normal; 437 | } 438 | 439 | .markdown-body .octicon { 440 | display: inline-block; 441 | overflow: visible !important; 442 | vertical-align: text-bottom; 443 | fill: currentColor; 444 | } 445 | 446 | .markdown-body ::placeholder { 447 | color: #6e7781; 448 | opacity: 1; 449 | } 450 | 451 | .markdown-body input::-webkit-outer-spin-button, 452 | .markdown-body input::-webkit-inner-spin-button { 453 | margin: 0; 454 | -webkit-appearance: none; 455 | appearance: none; 456 | } 457 | 458 | .markdown-body .pl-c { 459 | color: #6e7781; 460 | } 461 | 462 | .markdown-body .pl-c1, 463 | .markdown-body .pl-s .pl-v { 464 | color: #0550ae; 465 | } 466 | 467 | .markdown-body .pl-e, 468 | .markdown-body .pl-en { 469 | color: #8250df; 470 | } 471 | 472 | .markdown-body .pl-smi, 473 | .markdown-body .pl-s .pl-s1 { 474 | color: #24292f; 475 | } 476 | 477 | .markdown-body .pl-ent { 478 | color: #116329; 479 | } 480 | 481 | .markdown-body .pl-k { 482 | color: #cf222e; 483 | } 484 | 485 | .markdown-body .pl-s, 486 | .markdown-body .pl-pds, 487 | .markdown-body .pl-s .pl-pse .pl-s1, 488 | .markdown-body .pl-sr, 489 | .markdown-body .pl-sr .pl-cce, 490 | .markdown-body .pl-sr .pl-sre, 491 | .markdown-body .pl-sr .pl-sra { 492 | color: #0a3069; 493 | } 494 | 495 | .markdown-body .pl-v, 496 | .markdown-body .pl-smw { 497 | color: #953800; 498 | } 499 | 500 | .markdown-body .pl-bu { 501 | color: #82071e; 502 | } 503 | 504 | .markdown-body .pl-ii { 505 | color: #f6f8fa; 506 | background-color: #82071e; 507 | } 508 | 509 | .markdown-body .pl-c2 { 510 | color: #f6f8fa; 511 | background-color: #cf222e; 512 | } 513 | 514 | .markdown-body .pl-sr .pl-cce { 515 | font-weight: bold; 516 | color: #116329; 517 | } 518 | 519 | .markdown-body .pl-ml { 520 | color: #3b2300; 521 | } 522 | 523 | .markdown-body .pl-mh, 524 | .markdown-body .pl-mh .pl-en, 525 | .markdown-body .pl-ms { 526 | font-weight: bold; 527 | color: #0550ae; 528 | } 529 | 530 | .markdown-body .pl-mi { 531 | font-style: italic; 532 | color: #24292f; 533 | } 534 | 535 | .markdown-body .pl-mb { 536 | font-weight: bold; 537 | color: #24292f; 538 | } 539 | 540 | .markdown-body .pl-md { 541 | color: #82071e; 542 | background-color: #ffebe9; 543 | } 544 | 545 | .markdown-body .pl-mi1 { 546 | color: #116329; 547 | background-color: #dafbe1; 548 | } 549 | 550 | .markdown-body .pl-mc { 551 | color: #953800; 552 | background-color: #ffd8b5; 553 | } 554 | 555 | .markdown-body .pl-mi2 { 556 | color: #eaeef2; 557 | background-color: #0550ae; 558 | } 559 | 560 | .markdown-body .pl-mdr { 561 | font-weight: bold; 562 | color: #8250df; 563 | } 564 | 565 | .markdown-body .pl-ba { 566 | color: #57606a; 567 | } 568 | 569 | .markdown-body .pl-sg { 570 | color: #8c959f; 571 | } 572 | 573 | .markdown-body .pl-corl { 574 | text-decoration: underline; 575 | color: #0a3069; 576 | } 577 | 578 | .markdown-body [data-catalyst] { 579 | display: block; 580 | } 581 | 582 | .markdown-body g-emoji { 583 | font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 584 | font-size: 1em; 585 | font-style: normal !important; 586 | font-weight: 400; 587 | line-height: 1; 588 | vertical-align: -0.075em; 589 | } 590 | 591 | .markdown-body g-emoji img { 592 | width: 1em; 593 | height: 1em; 594 | } 595 | 596 | .markdown-body::before { 597 | display: table; 598 | content: ''; 599 | } 600 | 601 | .markdown-body::after { 602 | display: table; 603 | clear: both; 604 | content: ''; 605 | } 606 | 607 | .markdown-body > *:first-child { 608 | // margin-top: 0 !important; 609 | } 610 | 611 | .markdown-body > *:last-child { 612 | margin-bottom: 0 !important; 613 | } 614 | 615 | .markdown-body a:not([href]) { 616 | color: inherit; 617 | text-decoration: none; 618 | } 619 | 620 | .markdown-body .absent { 621 | color: #cf222e; 622 | } 623 | 624 | .markdown-body .anchor { 625 | float: left; 626 | padding-right: 4px; 627 | margin-left: -20px; 628 | line-height: 1; 629 | } 630 | 631 | .markdown-body .anchor:focus { 632 | outline: none; 633 | } 634 | 635 | .markdown-body p, 636 | .markdown-body blockquote, 637 | .markdown-body ul, 638 | .markdown-body ol, 639 | .markdown-body dl, 640 | .markdown-body table, 641 | .markdown-body pre, 642 | .markdown-body details { 643 | margin-top: 0; 644 | margin-bottom: 16px; 645 | } 646 | 647 | .markdown-body blockquote > :first-child { 648 | margin-top: 0; 649 | } 650 | 651 | .markdown-body blockquote > :last-child { 652 | margin-bottom: 0; 653 | } 654 | 655 | .markdown-body sup > a::before { 656 | content: '['; 657 | } 658 | 659 | .markdown-body sup > a::after { 660 | content: ']'; 661 | } 662 | 663 | .markdown-body h1 .octicon-link, 664 | .markdown-body h2 .octicon-link, 665 | .markdown-body h3 .octicon-link, 666 | .markdown-body h4 .octicon-link, 667 | .markdown-body h5 .octicon-link, 668 | .markdown-body h6 .octicon-link { 669 | color: #24292f; 670 | vertical-align: middle; 671 | visibility: hidden; 672 | } 673 | 674 | .markdown-body h1:hover .anchor, 675 | .markdown-body h2:hover .anchor, 676 | .markdown-body h3:hover .anchor, 677 | .markdown-body h4:hover .anchor, 678 | .markdown-body h5:hover .anchor, 679 | .markdown-body h6:hover .anchor { 680 | text-decoration: none; 681 | } 682 | 683 | .markdown-body h1:hover .anchor .octicon-link, 684 | .markdown-body h2:hover .anchor .octicon-link, 685 | .markdown-body h3:hover .anchor .octicon-link, 686 | .markdown-body h4:hover .anchor .octicon-link, 687 | .markdown-body h5:hover .anchor .octicon-link, 688 | .markdown-body h6:hover .anchor .octicon-link { 689 | visibility: visible; 690 | } 691 | 692 | .markdown-body h1 tt, 693 | .markdown-body h1 code, 694 | .markdown-body h2 tt, 695 | .markdown-body h2 code, 696 | .markdown-body h3 tt, 697 | .markdown-body h3 code, 698 | .markdown-body h4 tt, 699 | .markdown-body h4 code, 700 | .markdown-body h5 tt, 701 | .markdown-body h5 code, 702 | .markdown-body h6 tt, 703 | .markdown-body h6 code { 704 | padding: 0 0.2em; 705 | font-size: inherit; 706 | } 707 | 708 | .markdown-body ul.no-list, 709 | .markdown-body ol.no-list { 710 | padding: 0; 711 | list-style-type: none; 712 | } 713 | 714 | .markdown-body ol[type='1'] { 715 | list-style-type: decimal; 716 | } 717 | 718 | .markdown-body ol[type='a'] { 719 | list-style-type: lower-alpha; 720 | } 721 | 722 | .markdown-body ol[type='i'] { 723 | list-style-type: lower-roman; 724 | } 725 | 726 | .markdown-body div > ol:not([type]) { 727 | list-style-type: decimal; 728 | } 729 | 730 | .markdown-body ul ul, 731 | .markdown-body ul ol, 732 | .markdown-body ol ol, 733 | .markdown-body ol ul { 734 | margin-top: 0; 735 | margin-bottom: 0; 736 | } 737 | 738 | .markdown-body li > p { 739 | margin-top: 16px; 740 | } 741 | 742 | .markdown-body li + li { 743 | margin-top: 0.25em; 744 | } 745 | 746 | .markdown-body dl { 747 | padding: 0; 748 | } 749 | 750 | .markdown-body dl dt { 751 | padding: 0; 752 | margin-top: 16px; 753 | font-size: 1em; 754 | font-style: italic; 755 | font-weight: 600; 756 | } 757 | 758 | .markdown-body dl dd { 759 | padding: 0 16px; 760 | margin-bottom: 16px; 761 | } 762 | 763 | .markdown-body table th { 764 | font-weight: 600; 765 | } 766 | 767 | .markdown-body table th, 768 | .markdown-body table td { 769 | padding: 6px 13px; 770 | border: 1px solid #d0d7de; 771 | } 772 | 773 | .markdown-body table tr { 774 | background-color: #ffffff; 775 | border-top: 1px solid hsla(210, 18%, 87%, 1); 776 | } 777 | 778 | .markdown-body table tr:nth-child(2n) { 779 | background-color: #f6f8fa; 780 | } 781 | 782 | .markdown-body table img { 783 | background-color: transparent; 784 | } 785 | 786 | .markdown-body img[align='right'] { 787 | padding-left: 20px; 788 | } 789 | 790 | .markdown-body img[align='left'] { 791 | padding-right: 20px; 792 | } 793 | 794 | .markdown-body .emoji { 795 | max-width: none; 796 | vertical-align: text-top; 797 | background-color: transparent; 798 | } 799 | 800 | .markdown-body span.frame { 801 | display: block; 802 | overflow: hidden; 803 | } 804 | 805 | .markdown-body span.frame > span { 806 | display: block; 807 | float: left; 808 | width: auto; 809 | padding: 7px; 810 | margin: 13px 0 0; 811 | overflow: hidden; 812 | border: 1px solid #d0d7de; 813 | } 814 | 815 | .markdown-body span.frame span img { 816 | display: block; 817 | float: left; 818 | } 819 | 820 | .markdown-body span.frame span span { 821 | display: block; 822 | padding: 5px 0 0; 823 | clear: both; 824 | color: #24292f; 825 | } 826 | 827 | .markdown-body span.align-center { 828 | display: block; 829 | overflow: hidden; 830 | clear: both; 831 | } 832 | 833 | .markdown-body span.align-center > span { 834 | display: block; 835 | margin: 13px auto 0; 836 | overflow: hidden; 837 | text-align: center; 838 | } 839 | 840 | .markdown-body span.align-center span img { 841 | margin: 0 auto; 842 | text-align: center; 843 | } 844 | 845 | .markdown-body span.align-right { 846 | display: block; 847 | overflow: hidden; 848 | clear: both; 849 | } 850 | 851 | .markdown-body span.align-right > span { 852 | display: block; 853 | margin: 13px 0 0; 854 | overflow: hidden; 855 | text-align: right; 856 | } 857 | 858 | .markdown-body span.align-right span img { 859 | margin: 0; 860 | text-align: right; 861 | } 862 | 863 | .markdown-body span.float-left { 864 | display: block; 865 | float: left; 866 | margin-right: 13px; 867 | overflow: hidden; 868 | } 869 | 870 | .markdown-body span.float-left span { 871 | margin: 13px 0 0; 872 | } 873 | 874 | .markdown-body span.float-right { 875 | display: block; 876 | float: right; 877 | margin-left: 13px; 878 | overflow: hidden; 879 | } 880 | 881 | .markdown-body span.float-right > span { 882 | display: block; 883 | margin: 13px auto 0; 884 | overflow: hidden; 885 | text-align: right; 886 | } 887 | 888 | .markdown-body code, 889 | .markdown-body tt { 890 | padding: 0.2em 0.4em; 891 | margin: 0; 892 | font-size: 85%; 893 | background-color: rgba(175, 184, 193, 0.2); 894 | border-radius: 6px; 895 | } 896 | 897 | .markdown-body code br, 898 | .markdown-body tt br { 899 | display: none; 900 | } 901 | 902 | .markdown-body del code { 903 | text-decoration: inherit; 904 | } 905 | 906 | .markdown-body pre code { 907 | font-size: 100%; 908 | } 909 | 910 | .markdown-body pre > code { 911 | padding: 0; 912 | margin: 0; 913 | word-break: normal; 914 | white-space: pre; 915 | background: transparent; 916 | border: 0; 917 | } 918 | 919 | .markdown-body .highlight { 920 | margin-bottom: 16px; 921 | } 922 | 923 | .markdown-body .highlight pre { 924 | margin-bottom: 0; 925 | word-break: normal; 926 | } 927 | 928 | .markdown-body .highlight pre, 929 | .markdown-body pre { 930 | padding: 16px; 931 | overflow: auto; 932 | font-size: 85%; 933 | line-height: 1.45; 934 | background-color: #f6f8fa; 935 | border-radius: 6px; 936 | } 937 | 938 | .markdown-body pre code, 939 | .markdown-body pre tt { 940 | display: inline; 941 | max-width: auto; 942 | padding: 0; 943 | margin: 0; 944 | overflow: visible; 945 | line-height: inherit; 946 | word-wrap: normal; 947 | background-color: transparent; 948 | border: 0; 949 | } 950 | 951 | .markdown-body .csv-data td, 952 | .markdown-body .csv-data th { 953 | padding: 5px; 954 | overflow: hidden; 955 | font-size: 12px; 956 | line-height: 1; 957 | text-align: left; 958 | white-space: nowrap; 959 | } 960 | 961 | .markdown-body .csv-data .blob-num { 962 | padding: 10px 8px 9px; 963 | text-align: right; 964 | background: #ffffff; 965 | border: 0; 966 | } 967 | 968 | .markdown-body .csv-data tr { 969 | border-top: 0; 970 | } 971 | 972 | .markdown-body .csv-data th { 973 | font-weight: 600; 974 | background: #f6f8fa; 975 | border-top: 0; 976 | } 977 | 978 | .markdown-body .footnotes { 979 | font-size: 12px; 980 | color: #57606a; 981 | border-top: 1px solid #d0d7de; 982 | } 983 | 984 | .markdown-body .footnotes ol { 985 | padding-left: 16px; 986 | } 987 | 988 | .markdown-body .footnotes li { 989 | position: relative; 990 | } 991 | 992 | .markdown-body .footnotes li:target::before { 993 | position: absolute; 994 | top: -8px; 995 | right: -8px; 996 | bottom: -8px; 997 | left: -24px; 998 | pointer-events: none; 999 | content: ''; 1000 | border: 2px solid #0969da; 1001 | border-radius: 6px; 1002 | } 1003 | 1004 | .markdown-body .footnotes li:target { 1005 | color: #24292f; 1006 | } 1007 | 1008 | .markdown-body .footnotes .data-footnote-backref g-emoji { 1009 | font-family: monospace; 1010 | } 1011 | 1012 | .markdown-body .task-list-item { 1013 | list-style-type: none; 1014 | } 1015 | 1016 | .markdown-body .task-list-item label { 1017 | font-weight: 400; 1018 | } 1019 | 1020 | .markdown-body .task-list-item.enabled label { 1021 | cursor: pointer; 1022 | } 1023 | 1024 | .markdown-body .task-list-item + .task-list-item { 1025 | margin-top: 3px; 1026 | } 1027 | 1028 | .markdown-body .task-list-item .handle { 1029 | display: none; 1030 | } 1031 | 1032 | .markdown-body .task-list-item-checkbox { 1033 | margin: 0 0.2em 0.25em -1.6em; 1034 | vertical-align: middle; 1035 | } 1036 | 1037 | .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { 1038 | margin: 0 -1.6em 0.25em 0.2em; 1039 | } 1040 | 1041 | .markdown-body ::-webkit-calendar-picker-indicator { 1042 | filter: invert(50%); 1043 | } 1044 | } 1045 | -------------------------------------------------------------------------------- /src/content-script/prompt.js: -------------------------------------------------------------------------------- 1 | export function getSummaryPrompt(transcript) { 2 | return truncateTranscript(transcript) 3 | } 4 | 5 | // Seems like 15,000 bytes is the limit for the prompt 6 | const limit = 4000 // 1000 is a buffer 7 | 8 | export function getChunckedTranscripts(textData, textDataOriginal) { 9 | // [Thought Process] 10 | // (1) If text is longer than limit, then split it into chunks (even numbered chunks) 11 | // (2) Repeat until it's under limit 12 | // (3) Then, try to fill the remaining space with some text 13 | // (eg. 15,000 => 7,500 is too much chuncked, so fill the rest with some text) 14 | 15 | let result = '' 16 | const text = textData 17 | .sort((a, b) => a.index - b.index) 18 | .map((t) => t.text) 19 | .join(' ') 20 | const bytes = textToBinaryString(text).length 21 | 22 | if (bytes > limit) { 23 | // Get only even numbered chunks from textArr 24 | const evenTextData = textData.filter((t, i) => i % 2 === 0) 25 | result = getChunckedTranscripts(evenTextData, textDataOriginal) 26 | } else { 27 | // Check if any array items can be added to result to make it under limit but really close to it 28 | if (textDataOriginal.length !== textData.length) { 29 | textDataOriginal.forEach((obj, i) => { 30 | if (textData.some((t) => t.text === obj.text)) { 31 | return 32 | } 33 | 34 | textData.push(obj) 35 | 36 | const newText = textData 37 | .sort((a, b) => a.index - b.index) 38 | .map((t) => t.text) 39 | .join(' ') 40 | const newBytes = textToBinaryString(newText).length 41 | 42 | if (newBytes < limit) { 43 | const nextText = textDataOriginal[i + 1] 44 | const nextTextBytes = textToBinaryString(nextText.text).length 45 | 46 | if (newBytes + nextTextBytes > limit) { 47 | const overRate = (newBytes + nextTextBytes - limit) / nextTextBytes 48 | const chunkedText = nextText.text.substring( 49 | 0, 50 | Math.floor(nextText.text.length * overRate), 51 | ) 52 | textData.push({ text: chunkedText, index: nextText.index }) 53 | result = textData 54 | .sort((a, b) => a.index - b.index) 55 | .map((t) => t.text) 56 | .join(' ') 57 | } else { 58 | result = newText 59 | } 60 | } 61 | }) 62 | } else { 63 | result = text 64 | } 65 | } 66 | 67 | const originalText = textDataOriginal 68 | .sort((a, b) => a.index - b.index) 69 | .map((t) => t.text) 70 | .join(' ') 71 | return result == '' ? originalText : result // Just in case the result is empty 72 | } 73 | 74 | function truncateTranscript(str) { 75 | const bytes = textToBinaryString(str).length 76 | if (bytes > limit) { 77 | const ratio = limit / bytes 78 | const newStr = str.substring(0, str.length * ratio) 79 | return newStr 80 | } 81 | return str 82 | } 83 | 84 | function textToBinaryString(str) { 85 | let escstr = decodeURIComponent(encodeURIComponent(escape(str))) 86 | let binstr = escstr.replace(/%([0-9A-F]{2})/gi, function (match, hex) { 87 | let i = parseInt(hex, 16) 88 | return String.fromCharCode(i) 89 | }) 90 | return binstr 91 | } 92 | -------------------------------------------------------------------------------- /src/content-script/search-engine-configs.ts: -------------------------------------------------------------------------------- 1 | import { getSearchParam, waitForElm } from './utils' 2 | export interface SearchEngine { 3 | inputQuery: string[] 4 | sidebarContainerQuery: string[] 5 | appendContainerQuery: string[] 6 | extabarContainerQuery?: string[] 7 | name?: string 8 | watchRouteChange?: (callback: () => void) => void 9 | } 10 | 11 | export const config: Record = { 12 | google: { 13 | inputQuery: ["input[name='q']"], 14 | sidebarContainerQuery: ['#rhs'], 15 | appendContainerQuery: ['#rcnt'], 16 | extabarContainerQuery: ['#extabar'], 17 | name: 'gogole', 18 | }, 19 | bing: { 20 | inputQuery: ["[name='q']"], 21 | sidebarContainerQuery: ['#b_context'], 22 | appendContainerQuery: [], 23 | }, 24 | yahoo: { 25 | inputQuery: ["input[name='p']"], 26 | sidebarContainerQuery: ['#right', '.Contents__inner.Contents__inner--sub'], 27 | appendContainerQuery: ['#cols', '#contents__wrap'], 28 | }, 29 | duckduckgo: { 30 | inputQuery: ["input[name='q']"], 31 | sidebarContainerQuery: ['.results--sidebar.js-results-sidebar'], 32 | appendContainerQuery: ['#links_wrapper'], 33 | }, 34 | baidu: { 35 | inputQuery: ["input[name='wd']"], 36 | sidebarContainerQuery: ['#content_right'], 37 | appendContainerQuery: ['#container'], 38 | watchRouteChange(callback) { 39 | const targetNode = document.getElementById('wrapper_wrapper')! 40 | const observer = new MutationObserver(function (records) { 41 | for (const record of records) { 42 | if (record.type === 'childList') { 43 | for (const node of record.addedNodes) { 44 | if ('id' in node && node.id === 'container') { 45 | callback() 46 | return 47 | } 48 | } 49 | } 50 | } 51 | }) 52 | observer.observe(targetNode, { childList: true }) 53 | }, 54 | }, 55 | kagi: { 56 | inputQuery: ["input[name='q']"], 57 | sidebarContainerQuery: ['.right-content-box._0_right_sidebar'], 58 | appendContainerQuery: ['#_0_app_content'], 59 | }, 60 | yandex: { 61 | inputQuery: ["input[name='text']"], 62 | sidebarContainerQuery: ['#search-result-aside'], 63 | appendContainerQuery: [], 64 | }, 65 | naver: { 66 | inputQuery: ["input[name='query']"], 67 | sidebarContainerQuery: ['#sub_pack'], 68 | appendContainerQuery: ['#content'], 69 | }, 70 | brave: { 71 | inputQuery: ["input[name='q']"], 72 | sidebarContainerQuery: ['#side-right'], 73 | appendContainerQuery: [], 74 | }, 75 | searx: { 76 | inputQuery: ["input[name='q']"], 77 | sidebarContainerQuery: ['#sidebar_results'], 78 | appendContainerQuery: [], 79 | }, 80 | youtube: { 81 | inputQuery: ["input[name='q']"], 82 | sidebarContainerQuery: ['#rhs'], 83 | appendContainerQuery: ['#rcnt'], 84 | extabarContainerQuery: ['#extabar'], 85 | name: 'youtube', 86 | watchRouteChange(callback) { 87 | let currentUrl = window.location.href 88 | 89 | setInterval(() => { 90 | const videoId = getSearchParam(window.location.href)?.v 91 | if (window.location.href !== currentUrl && videoId) { 92 | waitForElm('#secondary.style-scope.ytd-watch-flexy').then(() => { 93 | if (document.querySelector('div.glarity--container')) { 94 | document.querySelector('div.glarity--container')?.remove() 95 | } 96 | }) 97 | 98 | callback() 99 | currentUrl = window.location.href 100 | } 101 | }, 1000) 102 | }, 103 | }, 104 | } 105 | -------------------------------------------------------------------------------- /src/content-script/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'light.scss'; 2 | @import 'dark.scss'; 3 | 4 | .glarity--container { 5 | margin-bottom: 30px; 6 | flex-basis: 0; 7 | flex-grow: 1; 8 | z-index: 1; 9 | box-sizing: border-box; 10 | width: var(--rhs-width); 11 | min-width: var(--rhs-width); 12 | max-width: 100%; 13 | 14 | &.glarity--chatgpt--youtube { 15 | width: var(--ytd-watch-flexy-sidebar-width); 16 | min-width: var(--ytd-watch-flexy-sidebar-min-width); 17 | } 18 | 19 | &.glarity--full-container { 20 | min-width: calc(100% - var(--rhs-margin)); 21 | margin-right: var(--rhs-margin); 22 | margin-bottom: 10px; 23 | } 24 | 25 | .glarity--chatgpt { 26 | border: 1px solid; 27 | border-radius: 8px; 28 | padding: 6px 10px 0; 29 | line-height: 1.5; 30 | word-wrap: break-word; 31 | // word-break:break-all; 32 | } 33 | 34 | &.sidebar--free { 35 | margin-left: 30px; 36 | height: fit-content; 37 | } 38 | 39 | p { 40 | margin: 0; 41 | } 42 | 43 | a.gpt-promotion-link { 44 | &:hover { 45 | text-decoration: none; 46 | } 47 | a:visited { 48 | color: inherit; 49 | } 50 | } 51 | 52 | .icon-and-text { 53 | display: flex; 54 | align-items: center; 55 | gap: 6px; 56 | } 57 | 58 | #gpt-answer.markdown-body.gpt-markdown { 59 | font-size: 15px; 60 | line-height: 1.6; 61 | 62 | pre { 63 | margin-top: 10px; 64 | } 65 | 66 | & > p:not(:last-child) { 67 | margin-bottom: 10px; 68 | } 69 | 70 | pre code { 71 | white-space: pre-wrap; 72 | word-break: break-all; 73 | } 74 | 75 | pre code.hljs { 76 | padding: 0; 77 | background-color: transparent; 78 | } 79 | 80 | ol li { 81 | list-style: disc; 82 | } 83 | 84 | img { 85 | width: 100%; 86 | } 87 | 88 | a { 89 | text-decoration: underline; 90 | &:visited { 91 | color: unset; 92 | } 93 | } 94 | } 95 | 96 | .glarity--chatgpt--header { 97 | margin-top: -42px !important; 98 | margin-left: calc(100% - 70px); 99 | margin-bottom: 10px; 100 | padding-bottom: 6px; 101 | display: flex; 102 | flex-direction: row; 103 | justify-content: flex-start; 104 | align-items: center; 105 | 106 | gap: 5px; 107 | 108 | .gpt--feedback { 109 | margin-left: auto; 110 | display: flex; 111 | gap: 6px; 112 | cursor: pointer; 113 | } 114 | 115 | .gpt--feedback--selected { 116 | color: #ff6347; 117 | } 118 | } 119 | } 120 | 121 | .glarity--summary--highlight { 122 | color: red; 123 | } 124 | .glarity--header { 125 | // position: relative; 126 | // z-index: 10; 127 | display: flex; 128 | padding: 2px 0 10px; 129 | justify-content: space-between; 130 | align-items: center; 131 | font-size: 16px; 132 | user-select: none; 133 | cursor: pointer; 134 | } 135 | 136 | a.glarity--header__logo { 137 | margin-right: 6px; 138 | height: 20px; 139 | color: #000; 140 | text-decoration: none; 141 | line-height: 20px; 142 | 143 | &:visited { 144 | color: #000; 145 | } 146 | 147 | img { 148 | margin-right: 5px; 149 | width: 20px; 150 | height: 20px; 151 | vertical-align: middle; 152 | } 153 | } 154 | 155 | .glarity--main { 156 | position: relative; 157 | margin-left: -10px; 158 | margin-right: -10px; 159 | padding: 0 12px; 160 | border-top: 1px solid rgb(221, 221, 221); 161 | } 162 | .glarity--main__header { 163 | position: relative; 164 | z-index: 20; 165 | display: flex; 166 | justify-content: space-between; 167 | align-items: center; 168 | padding: 6px 0; 169 | text-align: left; 170 | font-size: 14px; 171 | border-bottom: 1px solid rgb(221, 221, 223); 172 | 173 | a { 174 | color: #333; 175 | } 176 | } 177 | .glarity--main__header--title { 178 | font-weight: bold; 179 | cursor: pointer; 180 | } 181 | 182 | .glarity--main__header--icon { 183 | cursor: pointer; 184 | } 185 | 186 | .glarity--main__header--action { 187 | a { 188 | display: inline-block; 189 | margin-left: 5px; 190 | } 191 | } 192 | 193 | .glarity--main__container { 194 | position: relative; 195 | z-index: 30; 196 | padding: 10px 0 10px; 197 | font-size: 14px; 198 | color: #444; 199 | 200 | &.glarity--main__container--subtitle { 201 | height: 200px; 202 | overflow: hidden; 203 | overflow-y: auto; 204 | } 205 | } 206 | 207 | .glarity--subtitle { 208 | display: flex; 209 | justify-content: left; 210 | align-items: baseline; 211 | grid-template-columns: auto auto; 212 | gap: 0px; 213 | margin: 0px 0px 16px; 214 | 215 | .subtitle--time { 216 | padding-right: 10px; 217 | color: var(--yt-spec-call-to-action); 218 | background-color: var(--yt-spec-suggested-action); 219 | padding: 0 4px; 220 | font-size: 1.3rem; 221 | font-weight: 500; 222 | line-height: 1.8rem; 223 | } 224 | .subtitle--text { 225 | padding-left: 10px; 226 | padding-right: 10px; 227 | } 228 | } 229 | 230 | .glarity--select { 231 | width: 70px; 232 | border: 1px solid #bbb; 233 | border-radius: 4px; 234 | } 235 | -------------------------------------------------------------------------------- /src/content-script/utils.ts: -------------------------------------------------------------------------------- 1 | import Browser from 'webextension-polyfill' 2 | import $ from 'jquery' 3 | import copy from 'copy-to-clipboard' 4 | 5 | export function getPossibleElementByQuerySelector( 6 | queryArray: string[], 7 | ): T | undefined { 8 | for (const query of queryArray) { 9 | const element = document.querySelector(query) 10 | if (element) { 11 | return element as T 12 | } 13 | } 14 | } 15 | 16 | export function endsWithQuestionMark(question: string) { 17 | return ( 18 | question.endsWith('?') || // ASCII 19 | question.endsWith('？') || // Chinese/Japanese 20 | question.endsWith('؟') || // Arabic 21 | question.endsWith('⸮') // Arabic 22 | ) 23 | } 24 | 25 | export function isBraveBrowser() { 26 | return (navigator as any).brave?.isBrave() 27 | } 28 | 29 | export async function shouldShowRatingTip() { 30 | const { ratingTipShowTimes = 0 } = await Browser.storage.local.get('ratingTipShowTimes') 31 | if (ratingTipShowTimes >= 5) { 32 | return false 33 | } 34 | await Browser.storage.local.set({ ratingTipShowTimes: ratingTipShowTimes + 1 }) 35 | return ratingTipShowTimes >= 2 36 | } 37 | 38 | export function removeHtmlTags(str: string) { 39 | return str.replace(/<[^>]+>/g, '') 40 | } 41 | 42 | export async function getLangOptionsWithLink(videoId) { 43 | // Get a transcript URL 44 | const videoPageResponse = await fetch('https://www.youtube.com/watch?v=' + videoId) 45 | const videoPageHtml = await videoPageResponse.text() 46 | const splittedHtml = videoPageHtml.split('"captions":') 47 | 48 | if (splittedHtml.length < 2) { 49 | return 50 | } // No Caption Available 51 | 52 | const captions_json = JSON.parse(splittedHtml[1].split(',"videoDetails')[0].replace('\n', '')) 53 | const captionTracks = captions_json.playerCaptionsTracklistRenderer.captionTracks 54 | const languageOptions = Array.from(captionTracks).map((i) => { 55 | return i.name.simpleText 56 | }) 57 | 58 | const first = 'English' // Sort by English first 59 | languageOptions.sort(function (x, y) { 60 | return x.includes(first) ? -1 : y.includes(first) ? 1 : 0 61 | }) 62 | languageOptions.sort(function (x, y) { 63 | return x == first ? -1 : y == first ? 1 : 0 64 | }) 65 | 66 | return Array.from(languageOptions).map((langName, index) => { 67 | const link = captionTracks.find((i) => i.name.simpleText === langName).baseUrl 68 | return { 69 | language: langName, 70 | link: link, 71 | } 72 | }) 73 | } 74 | 75 | export async function getRawTranscript(link) { 76 | // Get Transcript 77 | const transcriptPageResponse = await fetch(link) // default 0 78 | const transcriptPageXml = await transcriptPageResponse.text() 79 | 80 | // Parse Transcript 81 | const jQueryParse = $.parseHTML(transcriptPageXml) 82 | const textNodes = jQueryParse[1].childNodes 83 | 84 | return Array.from(textNodes).map((i) => { 85 | return { 86 | start: i.getAttribute('start'), 87 | duration: i.getAttribute('dur'), 88 | text: i.textContent, 89 | } 90 | }) 91 | } 92 | 93 | export async function getTranscriptHTML(rawTranscript, videoId) { 94 | const scriptObjArr = [], 95 | timeUpperLimit = 60, 96 | charInitLimit = 300, 97 | charUpperLimit = 500 98 | let loop = 0, 99 | chars = [], 100 | charCount = 0, 101 | timeSum = 0, 102 | tempObj = {}, 103 | remaining = {} 104 | 105 | // Sum-up to either total 60 seconds or 300 chars. 106 | Array.from(rawTranscript).forEach((obj, i, arr) => { 107 | // Check Remaining Text from Prev Loop 108 | if (remaining.start && remaining.text) { 109 | tempObj.start = remaining.start 110 | chars.push(remaining.text) 111 | remaining = {} // Once used, reset to {} 112 | } 113 | 114 | // Initial Loop: Set Start Time 115 | if (loop == 0) { 116 | tempObj.start = remaining.start ? remaining.start : obj.start 117 | } 118 | 119 | loop++ 120 | 121 | const startSeconds = Math.round(tempObj.start) 122 | const seconds = Math.round(obj.start) 123 | timeSum = seconds - startSeconds 124 | charCount += obj.text.length 125 | chars.push(obj.text) 126 | 127 | if (i == arr.length - 1) { 128 | tempObj.text = chars.join(' ').replace(/\n/g, ' ') 129 | scriptObjArr.push(tempObj) 130 | resetNums() 131 | return 132 | } 133 | 134 | if (timeSum > timeUpperLimit) { 135 | tempObj.text = chars.join(' ').replace(/\n/g, ' ') 136 | scriptObjArr.push(tempObj) 137 | resetNums() 138 | return 139 | } 140 | 141 | if (charCount > charInitLimit) { 142 | if (charCount < charUpperLimit) { 143 | if (obj.text.includes('.')) { 144 | const splitStr = obj.text.split('.') 145 | 146 | // Case: the last letter is . => Process regulary 147 | if (splitStr[splitStr.length - 1].replace(/\s+/g, '') == '') { 148 | tempObj.text = chars.join(' ').replace(/\n/g, ' ') 149 | scriptObjArr.push(tempObj) 150 | resetNums() 151 | return 152 | } 153 | 154 | // Case: . is in the middle 155 | // 1. Get the (length - 2) str, then get indexOf + str.length + 1, then substring(0,x) 156 | // 2. Create remaining { text: str.substring(x), start: obj.start } => use the next loop 157 | const lastText = splitStr[splitStr.length - 2] 158 | const substrIndex = obj.text.indexOf(lastText) + lastText.length + 1 159 | const textToUse = obj.text.substring(0, substrIndex) 160 | remaining.text = obj.text.substring(substrIndex) 161 | remaining.start = obj.start 162 | 163 | // Replcae arr element 164 | chars.splice(chars.length - 1, 1, textToUse) 165 | tempObj.text = chars.join(' ').replace(/\n/g, ' ') 166 | scriptObjArr.push(tempObj) 167 | resetNums() 168 | return 169 | } else { 170 | // Move onto next loop to find . 171 | return 172 | } 173 | } 174 | 175 | tempObj.text = chars.join(' ').replace(/\n/g, ' ') 176 | scriptObjArr.push(tempObj) 177 | resetNums() 178 | return 179 | } 180 | }) 181 | 182 | return Array.from(scriptObjArr).map((obj) => { 183 | const t = Math.round(obj.start) 184 | const hhmmss = convertIntToHms(t) 185 | 186 | return { 187 | time: hhmmss, 188 | text: obj.text, 189 | } 190 | }) 191 | 192 | function resetNums() { 193 | ;(loop = 0), (chars = []), (charCount = 0), (timeSum = 0), (tempObj = {}) 194 | } 195 | } 196 | 197 | function convertIntToHms(num) { 198 | const h = num < 3600 ? 14 : 12 199 | return new Date(num * 1000).toISOString().substring(h, 19).toString() 200 | } 201 | 202 | export function getSearchParam(str) { 203 | const searchParam = str && str !== '' ? str : window.location.search 204 | 205 | if (!/\?([a-zA-Z0-9_]+)/i.exec(searchParam)) return {} 206 | let match, 207 | pl = /\+/g, // Regex for replacing addition symbol with a space 208 | search = /([^?&=]+)=?([^&]*)/g 209 | const decode = function (s) { 210 | return decodeURIComponent(s.replace(pl, ' ')) 211 | }, 212 | index = /\?([a-zA-Z0-9_]+)/i.exec(searchParam)['index'] + 1, 213 | query = searchParam.substring(index) 214 | 215 | let urlParams = {} 216 | while ((match = search.exec(query))) { 217 | urlParams[decode(match[1])] = decode(match[2]) 218 | } 219 | return urlParams 220 | } 221 | 222 | export function copyTranscript(videoId, subtitle) { 223 | let contentBody = '' 224 | const url = `https://www.youtube.com/watch?v=${videoId}` 225 | contentBody += `${document.title}\n` 226 | contentBody += `${url}\n\n` 227 | 228 | contentBody += `Transcript:\n` 229 | 230 | if (!subtitle) { 231 | return 232 | } 233 | 234 | if (subtitle.length <= 0) { 235 | return 236 | } 237 | 238 | subtitle.forEach((v) => { 239 | contentBody += `(${v.time}) ${v.text}\n` 240 | }) 241 | 242 | copy(contentBody) 243 | } 244 | 245 | export function waitForElm(selector) { 246 | return new Promise((resolve) => { 247 | if (document.querySelector(selector)) { 248 | return resolve(document.querySelector(selector)) 249 | } 250 | 251 | const observer = new MutationObserver((mutations) => { 252 | if (document.querySelector(selector)) { 253 | resolve(document.querySelector(selector)) 254 | observer.disconnect() 255 | } 256 | }) 257 | 258 | observer.observe(document.body, { 259 | childList: true, 260 | subtree: true, 261 | }) 262 | }) 263 | } 264 | 265 | export async function getConverTranscript({ langOptionsWithLink, videoId, index }) { 266 | const rawTranscript = !langOptionsWithLink 267 | ? [] 268 | : await getRawTranscript(langOptionsWithLink[index ? index : 0].link) 269 | console.log('rawTranscript', rawTranscript) 270 | 271 | const transcriptList = !langOptionsWithLink ? [] : await getTranscriptHTML(rawTranscript, videoId) 272 | console.log('transcriptList', transcriptList) 273 | 274 | return transcriptList 275 | } 276 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const value: any 3 | export = value 4 | } 5 | -------------------------------------------------------------------------------- /src/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/src/logo-128.png -------------------------------------------------------------------------------- /src/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/src/logo-16.png -------------------------------------------------------------------------------- /src/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/src/logo-32.png -------------------------------------------------------------------------------- /src/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/src/logo-48.png -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wong2/chatgpt-google-summary-extension/1886beddee9005bd138cfd32d7ca92652134b50c/src/logo.png -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__MSG_appName__", 3 | "description": "__MSG_appDesc__", 4 | "default_locale": "en", 5 | "version": "1.1.3", 6 | "manifest_version": 3, 7 | "icons": { 8 | "16": "logo-16.png", 9 | "32": "logo-32.png", 10 | "48": "logo-48.png", 11 | "128": "logo-128.png" 12 | }, 13 | "host_permissions": [ 14 | "https://*.openai.com/" 15 | ], 16 | "permissions": [ 17 | "storage" 18 | ], 19 | "background": { 20 | "service_worker": "background.js" 21 | }, 22 | "action": { 23 | "default_popup": "popup.html" 24 | }, 25 | "options_ui": { 26 | "page": "options.html", 27 | "open_in_tab": true 28 | }, 29 | "content_scripts": [ 30 | { 31 | "matches": [ 32 | "", 33 | "*://*/*" 34 | ], 35 | "js": [ 36 | "content-script.js" 37 | ], 38 | "css": [ 39 | "content-script.css" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /src/manifest.v2.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__MSG_appName__", 3 | "description": "__MSG_appDesc__", 4 | "default_locale": "en", 5 | "version": "1.1.3", 6 | "manifest_version": 2, 7 | "icons": { 8 | "16": "logo-16.png", 9 | "32": "logo-32.png", 10 | "48": "logo-48.png", 11 | "128": "logo-128.png" 12 | }, 13 | "permissions": [ 14 | "storage", 15 | "https://*.openai.com/" 16 | ], 17 | "background": { 18 | "scripts": [ 19 | "background.js" 20 | ] 21 | }, 22 | "browser_action": { 23 | "default_popup": "popup.html" 24 | }, 25 | "options_ui": { 26 | "page": "options.html", 27 | "open_in_tab": true 28 | }, 29 | "content_scripts": [ 30 | { 31 | "matches": [ 32 | "", 33 | "*://*/*" 34 | ], 35 | "js": [ 36 | "content-script.js" 37 | ], 38 | "css": [ 39 | "content-script.css" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /src/messaging.ts: -------------------------------------------------------------------------------- 1 | export interface Answer { 2 | text: string 3 | messageId: string 4 | conversationId: string 5 | } 6 | -------------------------------------------------------------------------------- /src/options/App.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | CssBaseline, 3 | GeistProvider, 4 | Radio, 5 | Select, 6 | Text, 7 | Toggle, 8 | useToasts, 9 | Code, 10 | Textarea, 11 | Card, 12 | Divider, 13 | Button, 14 | } from '@geist-ui/core' 15 | import { capitalize } from 'lodash-es' 16 | import { useCallback, useEffect, useMemo, useState } from 'preact/hooks' 17 | import '../base.css' 18 | import { 19 | getUserConfig, 20 | Language, 21 | Theme, 22 | TriggerMode, 23 | TRIGGER_MODE_TEXT, 24 | updateUserConfig, 25 | } from '../config' 26 | import { defaultPrompt } from '../utils' 27 | import logo from '../logo.png' 28 | import { detectSystemColorScheme, getExtensionVersion } from '../utils' 29 | import ProviderSelect from './ProviderSelect' 30 | import './styles.scss' 31 | 32 | function CustomizePrompt() { 33 | return `Title: "{{Title}}" 34 | Transcript: "{{Transcript}}"` 35 | } 36 | 37 | function OptionsPage(props: { theme: Theme; onThemeChange: (theme: Theme) => void }) { 38 | const [triggerMode, setTriggerMode] = useState(TriggerMode.Always) 39 | const [language, setLanguage] = useState(Language.Auto) 40 | const { setToast } = useToasts() 41 | const [prompt, setPrompt] = useState('') 42 | 43 | useEffect(() => { 44 | getUserConfig().then((config) => { 45 | setTriggerMode(config.triggerMode) 46 | setLanguage(config.language) 47 | 48 | setPrompt(config.prompt ? config.prompt : defaultPrompt) 49 | }) 50 | }, []) 51 | 52 | const onTriggerModeChange = useCallback( 53 | (mode: TriggerMode) => { 54 | setTriggerMode(mode) 55 | updateUserConfig({ triggerMode: mode }) 56 | setToast({ text: 'Changes saved', type: 'success' }) 57 | }, 58 | [setToast], 59 | ) 60 | 61 | const onThemeChange = useCallback( 62 | (theme: Theme) => { 63 | updateUserConfig({ theme }) 64 | props.onThemeChange(theme) 65 | setToast({ text: 'Changes saved', type: 'success' }) 66 | }, 67 | [props, setToast], 68 | ) 69 | 70 | const onLanguageChange = useCallback( 71 | (language: Language) => { 72 | updateUserConfig({ language }) 73 | setToast({ text: 'Changes saved', type: 'success' }) 74 | }, 75 | [setToast], 76 | ) 77 | 78 | const onPromptChange = useCallback((e) => { 79 | const prompt = e.target.value || '' 80 | setPrompt(prompt) 81 | updateUserConfig({ prompt }) 82 | }, []) 83 | 84 | const onSetPrompt = useCallback(() => { 85 | setPrompt(defaultPrompt) 86 | }, []) 87 | 88 | return ( 89 |
90 | 121 |
122 | Options 123 | 124 | Trigger Mode 125 | 126 | onTriggerModeChange(val as TriggerMode)} 129 | > 130 | {Object.entries(TRIGGER_MODE_TEXT).map(([value, texts]) => { 131 | return ( 132 | 133 | {texts.title} 134 | {texts.desc} 135 | 136 | ) 137 | })} 138 | 139 | 140 | Theme 141 | 142 | onThemeChange(val as Theme)} useRow> 143 | {Object.entries(Theme).map(([k, v]) => { 144 | return ( 145 | 146 | {k} 147 | 148 | ) 149 | })} 150 | 151 | 152 | Language 153 | 154 | 155 | The language used in ChatGPT response. Auto is 156 | recommended. 157 | 158 | 169 | 170 | 171 | Customize Prompt for Summary(YouTube) 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 |