justjavac · justjavac · Sep 30, 2022 · Jun 26, 2022 · Jul 31, 2022 · Jul 31, 2022
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,6 @@ extension/tools/venv/
 extension/tools/chrome-linux.zip
 extension/tools/chrome-linux/
 extension/test/nohup.out
-dist
+dist
+extension/manifest-backup.json
+
diff --git a/CHANGELOG-0.10.x.md b/CHANGELOG-0.10.x.md
@@ -4,6 +4,10 @@
 
 ## [一个完整的 测试环境例子 可用于查看优秀的源码 ](https://github.com/jingjingxyk/extension-v3-test)
 
+## CHANGELOG for 0.10.8 [2022-09-30 19:43:40 +0800]
+> 1. 扩展选项页添加同步远端规则功能
+> 2. 扩展选项页完善自定义规则功能
+
 ## CHANGELOG for 0.10.7 [2022-07-31 12:43:40 +0800]
 
 > 1.  新增 `developers.google.com` - 替换为 `developers.google.cn`

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Replace Google CDN",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "manifest_version": 3,
   "icons": {
     "128": "icons/128.png"
@@ -41,12 +41,18 @@
     ]
   },
   "content_security_policy": {
-    "extension_pages": "default-src 'self';script-src 'self'  'wasm-unsafe-eval' ;object-src 'self'; style-src 'self' 'unsafe-inline';"
+    "extension_pages": "default-src 'self';script-src 'self'  'wasm-unsafe-eval'  ;object-src 'self'; style-src 'self' 'unsafe-inline'; connect-src https://github.com https://www.jingjingxyk.com https://jingjingxyk.github.io http://localhost https://raw.githubusercontent.com https://gitee.com ;",
+    "sandbox": "sandbox allow-scripts allow-popups; script-src 'unsafe-inline' 'unsafe-eval'  "
   },
   "options_ui": {
     "page": "options_ui/index.html",
     "open_in_tab": true
   },
+  "sandbox": {
+    "pages": [
+      "sandbox/index.html"
+    ]
+  },
   "author": "https://github.com/justjavac",
   "homepage_url": "https://github.com/justjavac/ReplaceGoogleCDN"
 }
diff --git a/extension/options_ui/css/app.css b/extension/options_ui/css/app.css
@@ -7,9 +7,23 @@ input {
 }
 li {
   font-size: 16px;
+  list-style: decimal;
+}
+.box{
+  border-radius: 6px;
+  color: rgba(0,0,0, 0.87);
+  background: #fff;
+  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+}
+
+iframe{
+  border:none;
 }
 
-textarea {
-  min-width: 200px;
-  min-height: 200px;
+.rule_dynamic_set_list li:hover,.rule_static_set_list li:hover{
+
+  color: #c5955d;
+  font-size: 1.3rem;
+
 }
+
diff --git a/extension/options_ui/index.html b/extension/options_ui/index.html
@@ -2,35 +2,55 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Title</title>
+    <title>扩展选项</title>
     <link href="/options_ui/css/app.css" type="text/css" rel="stylesheet" />
   </head>
   <body>
     <h1>扩展选项</h1>
 
-    <h2>添加自定义规则</h2>
     <div class="wrap">
       <div class="container">
-        <div class="old-rule-list"></div>
+
+        <section class="box">
+          <h2>获取远程服务器端配置规则</h2>
+          <textarea class='remote-rule-urls' cols='100' rows="10" placeholder="远程服务端地址，每行一个地址"></textarea>
+          <br/>
+          <button class="goto-sync-remote-rule">同步远端服务预配置规则</button>
+          <button class="delete-sync-remote-rule">删除预配置规则</button>
+        </section>
         <section class="box">
-          <!--
-          <input
-            name="rule"
-            type="text"
-            placeholder="添加规则功能未完善(不可用)，希望有同志可以完善以下"
-          />
-          -->
-          <button type="submit">提交规则</button>
+          <h2>添加自定义规则</h2>
+          <textarea class='new-add-rule-pannel'  cols='100' rows="20" placeholder="自定义规则"></textarea>
+          <br/>
+          <label for="upload-file-to-rule">
+            <button type="button" class="add-rule-from-file"  >通过文件上传规则</button>
+            <input type="file" id="upload-file-to-rule" name="upload-file-to-rule"  hidden accept="application/json"/>
+          </label>
+          <br/>
+          <button type="button" class="add-rule">新增规则</button>
+          <button type="button" class="back-new-rule-to-json">备份新增规则到JSON文件</button>
+          <button class="delete-sync-remote-rule">删除自定义配置规则</button>
         </section>
+
+    <section class="box">
+      <h2>已启用的静态规则列表：</h2>
+      <ul class="rule_static_set_list">
+        <li></li>
+      </ul>
+
+      <h2>已启用的动态规则列表：</h2>
+      <ul class="rule_dynamic_set_list">
+        <li></li>
+      </ul>
+      <h2>规则详情：</h2>
+      <div>
+        <textarea cols='100' rows="20" id="rule-content-container"></textarea>
+      </div>
+    </section>
+    <section class="box">
+      <iframe src="/sandbox/index.html" id="external_page" width="100%"></iframe>
+    </section>
       </div>
-    </div>
-    <h2>已启用的规则列表：</h2>
-    <ul class="rule_set_list">
-      <li></li>
-    </ul>
-    <h2>规则详情：</h2>
-    <div>
-      <textarea cols="200" rows="40" id="rule-content-container"></textarea>
     </div>
     <script src="/options_ui/js/app.js"></script>
   </body>