diff --git a/src/background.js b/src/background.js index 3c19c8e..5767fa0 100644 --- a/src/background.js +++ b/src/background.js @@ -202,7 +202,7 @@ browser.webRequest.onBeforeSendHeaders.addListener( return { requestHeaders }; }, { - urls: ["https://dict.hjenglish.com/jp/jc/*"], + urls: ["https://dict.hjenglish.com/*"], types: ["xmlhttprequest"], }, (() => { diff --git a/src/dictionaries/hjenglish.js b/src/dictionaries/hjenglish.js index 9c65fdf..61a04f5 100644 --- a/src/dictionaries/hjenglish.js +++ b/src/dictionaries/hjenglish.js @@ -1,90 +1,9 @@ -import React from "react"; +import hjenglishCore from "./hjenglishCore"; -const hjenglish = async (query) => { - const response = await fetch( - `https://dict.hjenglish.com/jp/jc/${encodeURIComponent(query)}` +const hjenglish = async (query) => + hjenglishCore( + fetch(`https://dict.hjenglish.com/jp/jc/${encodeURIComponent(query)}`) ); - if (!response.ok) throw new Error("not ok"); - const dom = new DOMParser().parseFromString( - await response.text(), - "text/html" - ); - const panes = Array.from(dom.querySelectorAll(".word-details-pane")).map( - (i) => ({ - word: i.querySelector(".word-text")?.textContent.trim(), - pronunciation: i - .querySelector(".pronounces") - .textContent.trim() - .split(/\s+/g) - .slice(0, 2) - .join(" "), - simpleHtml: (() => { - const result = i.querySelector(".simple"); - result.querySelectorAll("h2").forEach((node) => { - const div = document.createElement("div"); - div.classList.add("lead"); - div.append(...node.childNodes); - node.replaceWith(div); - }); - result.querySelectorAll("ul").forEach((node) => { - const ol = document.createElement("ol"); - node - .querySelectorAll("li > span") - .forEach((node) => node.parentNode.removeChild(node)); - ol.append(...node.childNodes); - node.replaceWith(ol); - }); - return result.innerHTML; - })(), - groups: Array.from(i.querySelectorAll(".detail-groups > dl")).map( - (i) => ({ - partOfSpeech: i.querySelector("dt").textContent.trim(), - definitions: Array.from(i.querySelectorAll("dd")).map((i) => ({ - summary: i.querySelector("h3")?.textContent?.trim(), - examples: Array.from(i.querySelectorAll("ul > li")).map((i) => ({ - from: i.querySelector(".def-sentence-from")?.textContent?.trim(), - to: i.querySelector(".def-sentence-to")?.textContent?.trim(), - })), - })), - }) - ), - }) - ); - if (panes.length === 0) return null; - return ( -
- {panes.map((i, index) => ( -
-
- {i.word} {i.pronunciation} - {/*
*/} - {i.groups.map((i, index) => ( -
-
{i.partOfSpeech}
-
    - {i.definitions.map((i, index) => ( -
  1. - {i.summary}{" "} -
      - {i.examples.map((i, index) => ( -
    • - {i.from} -
      - {i.to} -
    • - ))} -
    -
  2. - ))} -
-
- ))} -
-
- ))} -
- ); -}; hjenglish.displayName = "滬江小D"; hjenglish.fullName = "滬江小D 日中字典"; diff --git a/src/dictionaries/hjenglishCore.js b/src/dictionaries/hjenglishCore.js new file mode 100644 index 0000000..e491bb6 --- /dev/null +++ b/src/dictionaries/hjenglishCore.js @@ -0,0 +1,85 @@ +import React from "react"; + +export default async (fetchPromise) => { + const response = await fetchPromise; + if (!response.ok) throw new Error("not ok"); + const dom = new DOMParser().parseFromString( + await response.text(), + "text/html" + ); + const panes = Array.from(dom.querySelectorAll(".word-details-pane")).map( + (i) => ({ + word: i.querySelector(".word-text")?.textContent.trim(), + pronunciation: i + .querySelector(".pronounces") + .textContent.trim() + .split(/\s+/g) + .slice(0, 2) + .join(" "), + simpleHtml: (() => { + const result = i.querySelector(".simple"); + result.querySelectorAll("h2").forEach((node) => { + const div = document.createElement("div"); + div.classList.add("lead"); + div.append(...node.childNodes); + node.replaceWith(div); + }); + result.querySelectorAll("ul").forEach((node) => { + const ol = document.createElement("ol"); + node + .querySelectorAll("li > span") + .forEach((node) => node.parentNode.removeChild(node)); + ol.append(...node.childNodes); + node.replaceWith(ol); + }); + return result.innerHTML; + })(), + groups: Array.from(i.querySelectorAll(".detail-groups > dl")).map( + (i) => ({ + partOfSpeech: i.querySelector("dt").textContent.trim(), + definitions: Array.from(i.querySelectorAll("dd")).map((i) => ({ + summary: i.querySelector("h3")?.textContent?.trim(), + examples: Array.from(i.querySelectorAll("ul > li")).map((i) => ({ + from: i.querySelector(".def-sentence-from")?.textContent?.trim(), + to: i.querySelector(".def-sentence-to")?.textContent?.trim(), + })), + })), + }) + ), + }) + ); + if (panes.length === 0) return null; + return ( +
+ {panes.map((i, index) => ( +
+
+ {i.word} {i.pronunciation} + {/*
*/} + {i.groups.map((i, index) => ( +
+
{i.partOfSpeech}
+
    + {i.definitions.map((i, index) => ( +
  1. + {i.summary}{" "} +
      + {i.examples.map((i, index) => ( +
    • + {i.from} +
      + {i.to} +
    • + ))} +
    +
  2. + ))} +
+
+ ))} +
+
+ ))} +
+ ); +}; diff --git a/src/dictionaries/hjenglishKo.js b/src/dictionaries/hjenglishKo.js new file mode 100644 index 0000000..d56d9a3 --- /dev/null +++ b/src/dictionaries/hjenglishKo.js @@ -0,0 +1,11 @@ +import hjenglishCore from "./hjenglishCore"; + +const hjenglishKo = async (query) => + hjenglishCore( + fetch(`https://dict.hjenglish.com/kr/${encodeURIComponent(query)}`) + ); + +hjenglishKo.displayName = "滬江小D韓文"; +hjenglishKo.fullName = "滬江小D 韓中字典"; + +export default hjenglishKo; diff --git a/src/dictionaries/index.js b/src/dictionaries/index.js index e606ae0..5dc7e0e 100644 --- a/src/dictionaries/index.js +++ b/src/dictionaries/index.js @@ -8,6 +8,7 @@ import cambridge from "dictionaries/cambridge"; import cambridgeEnZh from "dictionaries/cambridgeEnZh"; import thesaurus from "dictionaries/thesaurus"; import hjenglish from "dictionaries/hjenglish"; +import hjenglishKo from "dictionaries/hjenglishKo"; export default { yahoo, @@ -20,4 +21,5 @@ export default { thesaurus, cambridgeEnZh, hjenglish, + hjenglishKo, }; diff --git a/stories/components/Dictionary.stories.js b/stories/components/Dictionary.stories.js index 0f50411..7fe9ad9 100644 --- a/stories/components/Dictionary.stories.js +++ b/stories/components/Dictionary.stories.js @@ -12,6 +12,7 @@ import cambridge from "dictionaries/cambridge"; import cambridgeEnZh from "dictionaries/cambridgeEnZh"; import thesaurus from "dictionaries/thesaurus"; import hjenglish from "dictionaries/hjenglish"; +import hjenglishKo from "dictionaries/hjenglishKo"; const DictContainer = ({ query, dict }) => { const [content, setContent] = useState(null); @@ -78,6 +79,9 @@ export const Thesaurus = () => ( export const Hjenglish = () => ( ); +export const HjenglishKo = () => ( + +); export default { title: "Dictionary",