New options page to add domain regexes to a whitelist by li-xin-yi · Pull Request #5 · Exafunction/codeium-chrome

li-xin-yi · 2023-04-27T08:47:27Z

I really appreciate this project and look forward to a new version that I can use on more websites more flexibly. I attempted to modify a few lines of code as below:

Refactor the options page by React, and support users to edit their own domain lists on which Codeium is allowed to complete code. The default list is the following 11 regular expressions, extracted from script.ts

https:\/\/colab.research\.google\.com\/.*
https:\/\/(.*\.)?stackblitz\.com\/.*
https:\/\/(.*\.)?deepnote\.com\/.*
https:\/\/(.*\.)?(databricks\.com|azuredatabricks\.net)\/.*
https:\/\/(.*\.)?quadratichq\.com\/.*
https?:\/\/(.*\.)?jsfiddle\.net(\/.*)?
https:\/\/(.*\.)?codepen\.io(\/.*)?
https:\/\/(.*\.)?codeshare\.io(\/.*)?
https:\/\/console\.paperspace\.com\/.*\/notebook\/.*
https?:\/\/www\.codewars\.com(\/.*)?
https:\/\/(.*\.)?github\.com(\/.*)?

Test the feature on some web pages with the online editor, e.g., leetcode.com, codepod.io, and some web apps I deployed on local env with URL starting by localhost. It works when I write a correct regex for them. And also in reverse, removing some default regexes above can disable the code completion of Codeium on those websites.
Though it extends the application scenarios for Codeium further, it may not work on many websites even if they apply Monaco or CodeMirror as their online editors (for example, online vs code/github.dev, codesandbox). The rules are too rough to support them well for now.

pqn · 2023-04-28T17:08:53Z

Though it extends the application scenarios for Codeium further, it may not work on many websites even if they apply Monaco or CodeMirror as their online editors (for example, online vs code/github.dev, codesandbox). The rules are too rough to support them well for now.

We have an internal issue tracking github.dev -- this would require a modification of our vscode extension to support the web environment.

I've previously looked at CodeSandbox. I think it doesn't work for a similar reason as described in #4 (comment)

pqn

Really appreciate the PR! I just left a few comments.

pqn · 2023-04-28T17:09:58Z


 document.getElementById('go-to-options')?.addEventListener('click', () => {
-  chrome.runtime.openOptionsPage();
+  chrome.tabs.create({ url: 'chrome://extensions/?options=' + chrome.runtime.id });


What's the reason for this change?

I don't think the options page is large enough to take up one whole tab, so use this link to go to the extension detail page and pop up the options window.

pqn · 2023-04-28T17:39:59Z

+    if (host.test(window.location.href)) {
+      // the url matches the whitelist
+      addMonacoInject();
+      addCodeMirrorInject();


Is it possible that both addCodeMirrorInject and addCodeMirror5Inject will run on the same site?

Yep, I tried on Code Share and it gave completion twice. Thanks for pointing the bug out.

li-xin-yi · 2023-04-30T05:06:04Z

@pqn

Thank you so much for reviewing this PR and valuable suggestions. I pushed some new commits to complete:

Change the font of domain inputs to "monospace"
Validate the domain inputs, add toast notification on success/error when clicking on the save button
Fix the duplicated injection issue

Can you take a look and give more feedback?

pqn

Thanks, left some additional comments.

pqn · 2023-05-02T20:06:46Z

+  useEffect(() => {
+    (async () => {
+      const whitelist = await getStorageItem('whitelist');
+      setText(whitelist.join('\n'));


Prefer calling this allowlist instead of whitelist everywhere.

pqn · 2023-05-02T20:07:12Z

    <script src="options.js"></script>
  </body>
-</html>
+</html>


Merge/rebase on main and some additional CI checks will run. I think they might complain about missing \n here.

Looks like we still need the merge/rebase (CI is still failing)

pqn · 2023-05-02T20:08:49Z

@@ -0,0 +1,183 @@
+import React, { createRef, useEffect, useRef, useState } from 'react';


Visually this part seems a bit crowded. Maybe we can do without the icon and the redundant "Domain Regexes" text.

pqn · 2023-05-02T20:10:55Z

+          textTransform: 'none',
+        }}
+      >
+        Save <SaveAltIcon />


It's ambiguous from the UI if the Save button will also save the token field or not.

pqn · 2023-05-02T20:12:23Z

-        if (pattern.pattern.test(window.location.href)) {
+let injectCodeMirror = false;
+
+const addCodeMirrorInject = () =>


Let's call this one addCodeMirror5GlobalInject and the other one addCodeMirror5LocalInject, since both only work on CodeMirror 5.

pqn

I forgot to mention earlier, but let's have a Reset button for the regex field to restore the default settings.

pqn · 2023-05-02T21:34:08Z

+        />
+      </Typography>
+      <Typography variant="body2">
+        Domains to allow auto-completion, double-click to edit, use regex format


Suggested change

Domains to allow auto-completion, double-click to edit, use regex format

Domains to allow auto-completion. Use one regex per line.

pqn · 2023-05-02T21:34:41Z

+      <Button
+        variant="text"
+        onClick={() => {
+          const lst = text.split('\n').map((x) => x.trim());


Filter empty strings (so we can tolerate newlines as spacing).

li-xin-yi · 2023-05-03T07:45:20Z

@pqn Thanks for your comment. I updated the code as you suggested. Now, the new UI looks like:

I'm uncertain whether it should be "allow list" or "allowed list" (since I'm not a native English speaker...)

pqn · 2023-05-03T18:25:37Z

+
+  return (
+    <>
+      <Typography variant="h6">Allow List</Typography>


Suggested change

<Typography variant="h6">Allow List</Typography>

<Typography variant="h6">Allowlist</Typography>

(Similar changes elsewhere.)

pqn · 2023-05-03T18:26:06Z

+          textTransform: 'none',
+        }}
+      >
+        Save the Allow List


Suggested change

Save the Allow List

Save Allowlist

pqn · 2023-05-04T03:21:17Z

Looks like the rebase or merge had some issue and the commits are showing up in the PR history.

li-xin-yi · 2023-05-04T05:32:49Z

Update: add the reset button and remove the exit button.

pqn

One small change I missed, otherwise this looks good to merge!

pqn · 2023-05-05T18:13:21Z

 }

 export const OMonacoSite = {
-  UNSPECIFIED: 0,


Sorry, to be more specific, let's keep UNSPECIFIED = 0 and add CUSTOM as a new value.

No problem, I recovered it.

pqn · 2023-05-06T00:19:31Z

Thanks! 🎉

li-xin-yi added 2 commits April 27, 2023 03:26

add option pages & support domain whitelist

0551dd3

support custom domain regex

9ac70a7

pqn requested a review from khou22 April 27, 2023 19:59

pqn reviewed Apr 28, 2023

View reviewed changes

li-xin-yi added 2 commits April 29, 2023 23:34

change font mono & check input regex

6caaf74

fix some sites inject codeMirror twice issue

d4a120a

li-xin-yi requested a review from pqn April 30, 2023 05:07

pqn reviewed May 2, 2023

View reviewed changes

li-xin-yi added 2 commits May 3, 2023 02:36

fix ui

70121cf

clean up

5a55346

pqn reviewed May 3, 2023

View reviewed changes

li-xin-yi force-pushed the main branch from a78f6a7 to 5a55346 Compare May 4, 2023 04:01

li-xin-yi and others added 2 commits May 3, 2023 23:03

Merge branch 'Exafunction:main' into main

eb585fe

reset

1c27320

pqn approved these changes May 4, 2023

View reviewed changes

Comment thread src/script.ts Outdated

set custom as default

5ec38f2

pqn reviewed May 5, 2023

View reviewed changes

recover unspecified

a98919e

pqn merged commit a0e7f30 into Exafunction:main May 6, 2023

glcraft mentioned this pull request Jun 19, 2023

Support godbolt's Compiler Explorer #4

Closed

lihebi mentioned this pull request Sep 7, 2023

remove codeium related code codepod-io/codepod#519

Merged

		@@ -0,0 +1,183 @@
		import React, { createRef, useEffect, useRef, useState } from 'react';

	Domains to allow auto-completion, double-click to edit, use regex format
	Domains to allow auto-completion. Use one regex per line.

	<Typography variant="h6">Allow List</Typography>
	<Typography variant="h6">Allowlist</Typography>

Conversation

li-xin-yi commented Apr 27, 2023

Uh oh!

pqn commented Apr 28, 2023

Uh oh!

pqn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

li-xin-yi commented Apr 30, 2023

Uh oh!

pqn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pqn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

li-xin-yi commented May 3, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pqn commented May 4, 2023

Uh oh!

li-xin-yi commented May 4, 2023

Uh oh!

pqn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pqn commented May 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants