From a690220e4d1246d6fe450a977d76fb2f9a07347c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=BD=E5=90=A7=EF=BC=8C=E4=BD=A0=E6=83=B3=E8=AF=B4?= =?UTF-8?q?=E5=95=A5?= Date: Mon, 13 Jun 2022 19:06:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=20=E6=97=A0=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=94=B6=E5=90=AC=E6=AD=A3=E7=A1=AE=E8=AF=BB?= =?UTF-8?q?=E9=9F=B3=20=E7=9A=84=20chromium=20=E6=89=A9=E5=B1=95=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=B7=E5=BC=8F=20(#372)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 新增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 | 4 ++-- tools/chromium_extension/css/app.css | 12 ++++++++++++ tools/chromium_extension/js/content-script.js | 6 ++++++ tools/chromium_extension/manifest.json | 17 ++++++++++++++--- 4 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 tools/chromium_extension/css/app.css diff --git a/tools/chromium_extension/README.md b/tools/chromium_extension/README.md index 62f062d..08f4568 100644 --- a/tools/chromium_extension/README.md +++ b/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)点击单词，即可听正确的单词读音 \ No newline at end of file +> 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音 diff --git a/tools/chromium_extension/css/app.css b/tools/chromium_extension/css/app.css new file mode 100644 index 0000000..aefbda5 --- /dev/null +++ b/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; + */ +} diff --git a/tools/chromium_extension/js/content-script.js b/tools/chromium_extension/js/content-script.js index 7a1ae7f..f336107 100644 --- a/tools/chromium_extension/js/content-script.js +++ b/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 diff --git a/tools/chromium_extension/manifest.json b/tools/chromium_extension/manifest.json index 11db5f6..37c8822 100644 --- a/tools/chromium_extension/manifest.json +++ b/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": [ {