为 无页面跳转收听正确读音 的 chromium 扩展 添加样式 (#372)

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

* add 手动安装扩展 方法

* fix no element error

* add comment console log

* change load chrome extension describe

* use prettier format code

* comment console.log

* fix  http protocol audio media no play

* add chromium extension use Reference

* 无页面跳转收听正确读音请安装我们的 chromium 扩展

* 无页面跳转收听正确读音请安装我们的 [chromium 扩展]

* change chromium extension README.md

* add css

* add css extension

* add css extension

* change app.css extension

* 限定权限

tools/chromium_extension/README.md

@@ -1,4 +1,4 @@
-# 本项目 `README.md` 页面无跳转即可收听正确读音 的 chromium 扩展
+# 无页面跳转收听正确读音 的 chromium 扩展
 
 ### 手动安装扩展
 
@@ -7,4 +7,4 @@
 > 3. 勾选 Developer Mode
 > 4. 选择 Load unpacked extension... 然后定位到刚才解压的文件夹里面的 `tools/chromium_extension` 目录，确定
 > 5. 这就安装好了，去掉 Developer Mode 勾选。
-> 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音
+> 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音

tools/chromium_extension/css/app.css

@@ -0,0 +1,12 @@
+tr:hover {
+  border: 8px solid #ddd !important;
+  border-radius: 8px !important;
+  box-shadow: 5px 5px 15px #daf5fe !important;
+
+  color: #fff !important;
+  background-color: #3ec487 !important;
+  /*
+  font-weight: 200;
+  font-size: 1.1rem;
+  */
+}

tools/chromium_extension/js/content-script.js

@@ -2,6 +2,12 @@
   let URLObj = new URL(location.href);
   console.log(URLObj);
   if (document.querySelector("#readme table tbody")) {
+    console.log(chrome.runtime.getURL("css/app.css"));
+    let css = document.createElement("link");
+    css.setAttribute("rel", "stylesheet");
+    css.setAttribute("type", "text/css");
+    css.setAttribute("href", chrome.runtime.getURL("css/app.css"));
+    document.head.appendChild(css);
     let audio_player = new Audio();
     audio_player.setAttribute("autoplay", "true");
     document

tools/chromium_extension/manifest.json

@@ -2,10 +2,13 @@
   "name": "chinese-programmer-wrong-pronunciation-chromium-extension",
   "version": "0.1.0",
   "manifest_version": 3,
-  "description": "README.md 页面无跳转 即可听正确读音",
+  "description": "页面无跳转 听正确读音",
   "content_scripts": [
     {
-      "matches": ["*://*/shimohq/chinese-programmer-wrong-pronunciation/*"],
+      "matches": [
+        "*://*/shimohq/chinese-programmer-wrong-pronunciation/*",
+        "*://*/jingjingxyk/chinese-programmer-wrong-pronunciation/*"
+      ],
       "run_at": "document_end",
       "js": ["js/content-script.js"]
     }
@@ -14,7 +17,15 @@
     "declarativeNetRequest",
     "declarativeNetRequestWithHostAccess"
   ],
-  "host_permissions": ["*://github.com/*", "*://localhost:*/*"],
+  "host_permissions": ["*://github.com/*"],
+  "web_accessible_resources": [
+    {
+      "resources": ["*.js", "*.css", "*.html"],
+      "matches": ["*://*/*"],
+      "extension_ids": [],
+      "use_dynamic_url": true
+    }
+  ],
   "declarative_net_request": {
     "rule_resources": [
       {