fix: http protocol can't play audio media (#368)

* 新增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 扩展]

README.md

@@ -129,12 +129,13 @@
 1. 真人发音 https://www.bilibili.com/video/bv1nv411i7z3 (by @hailintao)
 1. 简洁的单词列表，正确读音不用再打开新网页 https://cpwp.netlify.app/ (by @antfu7)
 1. 国际音标严式记音（纽约音）https://github.com/b1f6c1c4/programming-pronunciations-en_US (by @b1f6c1c4)
-2. 单词连读 https://corrector.justsong.cn/ (by [@songquanpeng](https://github.com/songquanpeng/pronunciation-corrector))
+1. 单词连读 https://corrector.justsong.cn/ (by [@songquanpeng](https://github.com/songquanpeng/pronunciation-corrector))
 
 
 ### 说明
 1. 本着简单的原则, 又为了避免程序猿们出现选择困难症, '正确音标'采用了最接近有道词典音频的英式 DJ 音标, 不代表其唯一性
 1. 专业在线英语词典请参考[知乎链接:在线英语词典哪个比较好?](https://www.zhihu.com/question/19707759)
+1. 无页面跳转收听正确读音请安装我们的 [chromium 扩展](tools/chromium_extension/README.md)
 
 ### 参考资料
 1. https://www.zhihu.com/question/19739907

tools/chromium_extension/README.md

@@ -7,3 +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)点击单词，即可听正确的单词读音

tools/chromium_extension/js/content-script.js

@@ -12,7 +12,6 @@
         // console.log(event.target.nodeName);
         event.preventDefault();
         event.stopPropagation();
-
         let audio_url = null;
         if (event.target.nodeName === "TD") {
           let aTag = event.target.querySelector("a");
@@ -25,9 +24,16 @@
           audio_url = aTag.getAttribute("href");
         }
         if (audio_url) {
-          // console.log("audio_url:", audio_url);
+          let desURL = new URL(audio_url);
+          console.log(desURL.protocol);
+          if (desURL.protocol === "http:") {
+            //skip http
+            location.href = audio_url;
+          } else {
+            console.log("audio_url:", audio_url);
             audio_player.setAttribute("src", audio_url);
           }
+        }
       });
   }
 }