add css

tools/chromium_extension/README.md

@@ -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,10 @@
+tr:hover {
+  border: 8px solid #ddd !important;
+  border-radius: 1rem !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,7 +2,7 @@
   "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/*"],
@@ -14,7 +14,15 @@
     "declarativeNetRequest",
     "declarativeNetRequestWithHostAccess"
   ],
-  "host_permissions": ["*://github.com/*", "*://localhost:*/*"],
+  "host_permissions": ["*://github.com/*", "http://*/*", "https://*/*"],
+  "web_accessible_resources": [
+    {
+      "resources": ["*.js", "*.css", "*.html"],
+      "matches": ["*://*/*"],
+      "extension_ids": [],
+      "use_dynamic_url": true
+    }
+  ],
   "declarative_net_request": {
     "rule_resources": [
       {