添加格式化规则功能；规则条块颜色调整 (#163)

* 添加格式化规则功能；规则条块颜色调整

* update mainifest version number

* delete unvalid class

CHANGELOG-v3-0.10.x.md

@@ -4,6 +4,11 @@
 
 ## [一个完整的 测试环境例子 可用于查看优秀的源码 ](https://github.com/jingjingxyk/extension-v3-test)
 
+## CHANGELOG for v3 0.10.25 [2023-03-05 23:25:00 +0800]
+
+> 1. v3 版本 添加 格式化规则功能
+> 1. v3 版本 修改 规则条块颜色调整
+
 ## CHANGELOG for v3 0.10.24 [2023-02-19 21:25:00 +0800]
 
 > 1. v3 版本 添加 默认候选规则，规则 id=9999，priority=9999（暂不启用)

extension/manifest.json

@@ -1,11 +1,11 @@
 {
  "name": "Replace Google CDN",
- "version": "0.10.23",
+ "version": "0.10.25",
  "manifest_version": 3,
  "icons": {
  "128": "icons/128.png"
  },
- "description": "将 Google CDN 替换为国内镜像 v3 更新日期：2023-02-19",
+ "description": "将 Google CDN 替换为国内镜像 v3 更新日期：2023-03-05",
  "background": {
  "service_worker": "js/background.js",
  "type": "module"

extension/options_ui/advance.html

@@ -203,7 +203,7 @@ <h5></h5>
  </button>
  <span class="placeholder-box"></span>
  <button type="button" class="format-rule-code">
- 格式化当前规则（未开发）
+ 格式化当前规则
  </button>
  </div>
  <div><span class="notice"></span></div>

extension/options_ui/css/app.css

@@ -103,6 +103,41 @@ button {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+
+.goto-sync-remote-rule,
+.add-rule,
+.add-special-rule,
+.update-rule {
+ background-color: #50cd89;
+ border-color: #50cd89;
+}
+
+.goto-sync-remote-rule:hover,
+.add-rule:hover,
+.add-special-rule:hover,
+.update-rule:hover {
+ background-color: #73d7a1;
+ border-color: #73d7a1;
+}
+.delete-all-dynamic-rule,
+.delete-sync-remote-rule,
+.delete-self-define-rule,
+.delete-self-define-special-rule {
+ background-color: #f1416c;
+ border-color: #f1416c;
+}
+
+.backup-all-dynamic-rule,
+.back-new-rule-to-json {
+ background-color: #009ef7;
+ border-color: #009ef7;
+}
+
+.reset_default_domain {
+ background-color: rgba(114, 57, 234, 0.85);
+ border-color: rgba(114, 57, 234, 0.85);
+}
+
 iframe {
  border: none;
 }
@@ -193,35 +228,35 @@ font-size: 1.3rem;
  /*
  background-color: #732e7e;
  */
- background-color: rgb(156, 39, 176);
+ background-color: rgba(62, 151, 255, 0.85);
 }
 
 .self_define_special_rule {
  /*
  background-color: #808883;
 
  */
- background-color: rgb(0, 150, 136);
+ background-color: rgba(241, 65, 108, 0.85);
 }
 
 .self_define_rule {
  /*
  background-color: #9db1a0;
  background-color: #4c8bf5;
  */
- background-color: rgb(3, 169, 244);
+ background-color: rgba(80, 205, 137, 0.85);
 }
 
 .sync_remote_static_rule {
- background-color: #8b8bdd;
+ background-color: rgba(255, 199, 0, 0.85);
 }
 
 .sync_remote_rule {
- background-color: #d2ae8c;
+ background-color: rgba(114, 57, 234, 0.85);
 }
 
 .all_dynamic_rule {
- background-color: #58665e;
+ background-color: rgba(80, 205, 205, 0.85);
 }
 
 .all_dynamic_rule_test {
@@ -236,4 +271,5 @@ font-size: 1.3rem;
  background-color: #efefef;
  background-color: #bd7a07;
 */
+ background-color: rgba(63, 66, 84, 0.85);
 }

extension/options_ui/index.html

@@ -111,7 +111,7 @@ <h5></h5>
  </button>
  <span class="placeholder-box"></span>
  <button type="button" class="format-rule-code">
- 格式化当前规则（未开发）
+ 格式化当前规则
  </button>
  </div>
  <div><span class="notice"></span></div>

extension/options_ui/js/component/show-rule.js

@@ -203,6 +203,26 @@ let showRuleList = (type = "all_dynamic_rule") => {
  document.querySelector(".notice").innerText = "静态规则不允许修改";
  }
  });
+
+ /*
+ * 启用 规则 格式化
+ */
+ document
+ .querySelector(".format-rule-code")
+ .addEventListener("click", (event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ let content_box = document.querySelector("#rule-content-container");
+ let content = content_box.value;
+ if (content) {
+ let button = document.querySelector(
+ "#jsoneditor .jse-button.jse-format"
+ );
+ if (button) {
+ button.click();
+ }
+ }
+ });
 };
 
 export { showRuleList };

extension/test/README.md

@@ -10,7 +10,7 @@
 1. [`developers.google.com` 替换为 `developers.google.cn` 打开 `https://developers.google.com/` 查看结果 ](https://developers.google.com)
 1. [`code.jquery.com/jquery-` 替换为 `lib.baomitu.com/jquery/` 打开 `https://releases.jquery.com/` 查看结果 ](https://releases.jquery.com/)
 1. [`code.jquery.com/ui/` 替换为 `ajax.aspnetcdn.com/ajax/jquery.ui` 打开 `https://releases.jquery.com/` 查看结果 ](https://releases.jquery.com/)
-1. [`commondatastorage.googleapis.com/chromium-browser-snapshots/` 替换为 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip` 打开 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/` 查看结果 ](https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip)
+1. [`commondatastorage.googleapis.com/chromium-browser-snapshots/` 替换为 `https://registry.npmmirror.com/-/binary/chromium-browser-snapshots//Mac/1086244/chrome-mac.zip` 打开 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/` 查看结果 ](https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip)
 1. [developer.android.com](https://developer.android.com/?hl=zh-cn)
 1. [source.android.com](https://source.android.com)
 1. [jquery](https://releases.jquery.com/)