feat(hjenglish): add hjenglish dictionary

tonytonyjan · Jul 13, 2020 · d27a735 · d27a735
1 parent 67a6e2c
commit d27a735
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 1 deletion.
diff --git a/src/background.js b/src/background.js
@@ -177,3 +177,37 @@ browser.runtime.onInstalled.addListener((details) => {
     }
   );
 });
+
+const uuidv4 = () =>
+  "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  (details) => {
+    console.log(details);
+    const { requestHeaders } = details;
+    const cookie = requestHeaders.find(
+      ({ name }) => name.toLowerCase() === "cookie"
+    );
+    const value = `HJ_UID=${uuidv4()}; HJ_SID=${uuidv4()}'`;
+    if (cookie) cookie.value = value;
+    else
+      requestHeaders.push({
+        name: "cookie",
+        value,
+      });
+    return { requestHeaders };
+  },
+  {
+    urls: ["https://dict.hjenglish.com/jp/jc/*"],
+    types: ["xmlhttprequest"],
+  },
+  (() => {
+    const list = ["blocking", "requestHeaders"];
+    if (process.env.BROWSER === "chrome") list.push("extraHeaders");
+    return list;
+  })()
+);
diff --git a/src/dictionaries/hjenglish.js b/src/dictionaries/hjenglish.js
@@ -0,0 +1,92 @@
+import React from "react";
+
+const hjenglish = async (query) => {
+  const response = await 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 (
+    <div>
+      {panes.map((i, index) => (
+        <div key={index}>
+          <div className="lead">
+            {i.word} <span className="text-secondary">{i.pronunciation}</span>
+            {/* <div dangerouslySetInnerHTML={{ __html: i.simpleHtml }} /> */}
+            {i.groups.map((i, index) => (
+              <div key={index}>
+                <div className="lead">{i.partOfSpeech}</div>
+                <ol>
+                  {i.definitions.map((i, index) => (
+                    <li key={index}>
+                      {i.summary}{" "}
+                      <ul>
+                        {i.examples.map((i, index) => (
+                          <li key={index}>
+                            {i.from}
+                            <br />
+                            <span className="text-secondary">{i.to}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+hjenglish.displayName = "滬江小D";
+hjenglish.fullName = "滬江小D 日中字典";
+
+export default hjenglish;
diff --git a/src/dictionaries/index.js b/src/dictionaries/index.js
@@ -7,6 +7,7 @@ import jukuu from "dictionaries/jukuu";
 import cambridge from "dictionaries/cambridge";
 import cambridgeEnZh from "dictionaries/cambridgeEnZh";
 import thesaurus from "dictionaries/thesaurus";
+import hjenglish from "dictionaries/hjenglish";
 
 export default {
   yahoo,
@@ -18,4 +19,5 @@ export default {
   cambridge,
   thesaurus,
   cambridgeEnZh,
+  hjenglish,
 };
diff --git a/src/manifest.json b/src/manifest.json
@@ -15,7 +15,10 @@
     "*://www.lexico.com/*",
     "*://www.jukuu.com/*",
     "*://dictionary.cambridge.org/*",
-    "*://www.thesaurus.com/*"
+    "*://www.thesaurus.com/*",
+    "*://dict.hjenglish.com/*",
+    "webRequest",
+    "webRequestBlocking"
   ],
   "icons": {
     "16": "icons/icon16.png",

diff --git a/stories/components/Dictionary.stories.js b/stories/components/Dictionary.stories.js
@@ -11,6 +11,7 @@ import jukuu from "dictionaries/jukuu";
 import cambridge from "dictionaries/cambridge";
 import cambridgeEnZh from "dictionaries/cambridgeEnZh";
 import thesaurus from "dictionaries/thesaurus";
+import hjenglish from "dictionaries/hjenglish";
 
 const DictContainer = ({ query, dict }) => {
   const [content, setContent] = useState(null);
@@ -74,6 +75,9 @@ export const CambridgeEnZh = () => (
 export const Thesaurus = () => (
   <DictContainer query={text("Query", "test")} dict={thesaurus} />
 );
+export const Hjenglish = () => (
+  <DictContainer query={text("Query", "試験")} dict={hjenglish} />
+);
 
 export default {
   title: "Dictionary",

diff --git a/test/dictionaries/hjenglish.test.js b/test/dictionaries/hjenglish.test.js
@@ -0,0 +1,18 @@
+import hjenglish from "dictionaries/hjenglish";
+import { actRender } from "testHelpers";
+
+describe("Hjenglish", () => {
+  it("correct ID", () => {
+    expect(hjenglish.name).toBe("hjenglish");
+  });
+  it("found", async () => {
+    actRender(await hjenglish("試験"), (container) => {
+      const text = container.textContent;
+      expect(text.includes("物の性質や力などをためすこと")).toBeTrue();
+      expect(text.includes("入学考试")).toBeTrue();
+    });
+  });
+  it("not found", async () => {
+    expect(await hjenglish("123123123")).toBeNull();
+  });
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -88,6 +88,8 @@ module.exports = (_env, argv) => ({
             if (process.env.BROWSER === "chrome")
               manifest.key =
                 "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDxe7EOVTTF6Fxu3geDsJ37HIiJYs7sEVs06nKxugc2zZOsrlQ6/HLT2Wb3SkE6ljjA5rEUcuencJBTaQHdulQXK8Sle7qIY1U+4/pp03tFfKj9nYFOpN8I25hMQC+gubBW6K97SIrtjOlDqOgR6mxoL37loKkPAdeFblMViWzLBQIDAQAB";
+            if (argv.mode === "development")
+              manifest.permissions.push("http://localhost:9000/*");
             return JSON.stringify(manifest, null, 2);
           },
         },