新增 README 页面无须跳转即可收听正确读音 的 chromium 扩展 (#367)

* 新增README.md页面无跳转即可收听正确读音 的 chromium 扩展

* add 手动安装扩展 方法

* fix no element error

* add comment console log

* change load chrome extension describe

* use prettier format code

* comment console.log

.gitignore

@@ -0,0 +1,4 @@
+/tools/chromium_extension/_metadata
+/tools/chromium_extension/node_modules
+/tools/chromium_extension/package-lock.json
+/.idea

tools/chromium_extension/README.md

@@ -0,0 +1,9 @@
+# 本项目 `README.md` 页面无跳转即可收听正确读音 的 chromium 扩展
+
+### 手动安装扩展
+
+> 1. 下载 [chinese-programmer-wrong-pronunciation](https://github.com/shimohq/chinese-programmer-wrong-pronunciation/archive/refs/heads/master.zip) 然后解压，找到 `tools/chromium_extension` 子目录
+> 2. 打开 Chrome，输入: `chrome://extensions/`
+> 3. 勾选 Developer Mode
+> 4. 选择 Load unpacked extension... 然后定位到刚才解压的文件夹里面的 `tools/chromium_extension` 目录，确定
+> 5. 这就安装好了，去掉 Developer Mode 勾选。

tools/chromium_extension/js/content-script.js

@@ -0,0 +1,33 @@
+{
+  let URLObj = new URL(location.href);
+  console.log(URLObj);
+  if (document.querySelector("#readme table tbody")) {
+    let audio_player = new Audio();
+    audio_player.setAttribute("autoplay", "true");
+    document
+      .querySelector("#readme table tbody")
+      .addEventListener("click", (event) => {
+        // console.log(event)
+        // console.log(event.target.nodeType)
+        // console.log(event.target.nodeName);
+        event.preventDefault();
+        event.stopPropagation();
+
+        let audio_url = null;
+        if (event.target.nodeName === "TD") {
+          let aTag = event.target.querySelector("a");
+          if (aTag) {
+            audio_url = aTag.getAttribute("href");
+          }
+        }
+        if (event.target.nodeName === "IMG") {
+          let aTag = event.target.parentNode.parentNode;
+          audio_url = aTag.getAttribute("href");
+        }
+        if (audio_url) {
+          // console.log("audio_url:", audio_url);
+          audio_player.setAttribute("src", audio_url);
+        }
+      });
+  }
+}

tools/chromium_extension/manifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "chinese-programmer-wrong-pronunciation-chromium-extension",
+  "version": "0.1.0",
+  "manifest_version": 3,
+  "description": "README.md 页面无跳转 即可听正确读音",
+  "content_scripts": [
+    {
+      "matches": ["*://*/shimohq/chinese-programmer-wrong-pronunciation/*"],
+      "run_at": "document_end",
+      "js": ["js/content-script.js"]
+    }
+  ],
+  "permissions": [
+    "declarativeNetRequest",
+    "declarativeNetRequestWithHostAccess"
+  ],
+  "host_permissions": ["*://github.com/*", "*://localhost:*/*"],
+  "declarative_net_request": {
+    "rule_resources": [
+      {
+        "id": "remove_content_security_policy",
+        "enabled": true,
+        "path": "rules/remove_content_security_policy.json"
+      }
+    ]
+  },
+  "author": "https://github.com/jingjingxyk",
+  "homepage_url": "https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git"
+}

tools/chromium_extension/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "chinese-programmer-wrong-pronunciation-chromium-extension",
+  "version": "1.0.0",
+  "description": "README.md 页面无跳转 即可听正确读音",
+  "main": "index.js",
+  "scripts": {
+    "format-code": "npx prettier --write . && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "prettier": "2.6.2"
+  }
+}

tools/chromium_extension/rules/remove_content_security_policy.json

@@ -0,0 +1,60 @@
+[
+  {
+    "id": 1,
+    "priority": 99,
+    "action": {
+      "type": "modifyHeaders",
+      "responseHeaders": [
+        { "header": "content-security-policy", "operation": "remove" },
+        {
+          "header": "content-security-policy-report-only",
+          "operation": "remove"
+        },
+        { "header": "expect-ct", "operation": "remove" },
+        { "header": "report-to", "operation": "remove" },
+        { "header": "x-content-security-policy", "operation": "remove" },
+        { "header": "x-webkit-csp", "operation": "remove" },
+        { "header": "x-xss-protection", "operation": "remove" },
+        {
+          "header": "x-permitted-cross-domain-policies",
+          "operation": "remove"
+        },
+        { "header": "x-content-type-options", "operation": "remove" },
+        { "header": "x-frame-options", "operation": "remove" },
+        { "header": "permissions-policy", "operation": "remove" },
+        { "header": "timing-allow-origin", "operation": "remove" },
+        { "header": "cross-origin-embedder-policy", "operation": "remove" },
+        { "header": "cross-origin-opener-policy", "operation": "remove" },
+        {
+          "header": "cross-origin-opener-policy-report-only",
+          "operation": "remove"
+        },
+        {
+          "header": "cross-origin-embedder-policy-report-only",
+          "operation": "remove"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "*",
+      "requestDomains": ["github.com", "githubusercontent.com"],
+      "resourceTypes": [
+        "main_frame",
+        "sub_frame",
+        "stylesheet",
+        "script",
+        "image",
+        "font",
+        "object",
+        "xmlhttprequest",
+        "ping",
+        "csp_report",
+        "media",
+        "websocket",
+        "webtransport",
+        "webbundle",
+        "other"
+      ]
+    }
+  }
+]