Merge pull request #10 from big-mon/dev

convert typescript

README.md

@@ -23,5 +23,7 @@ yarn
 ### Step 2: Deploy
 
 ```sh
-git archive HEAD:src --output=../amazon-wishlist-pointgetter.zip
+yarn build
 ```
+
+deploy to `/dist`

package.json

@@ -4,11 +4,21 @@
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://[email protected]/big-mon/amazon-wishlist-pointgetter"
-  },
+  "repository": "https://github.com/big-mon/amazon-wishlist-pointgetter",
   "author": "BIG-MON <> (https://github.com/big-mon)",
-  "scripts": {},
-  "devDependencies": {}
+  "scripts": {
+    "build": "webpack.cmd --mode production"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.157",
+    "@types/copy-webpack-plugin": "^8.0.1",
+    "@types/webpack": "^5.28.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "ts-loader": "^9.2.5",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.4.2",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0"
+  },
+  "dependencies": {}
 }

public/_locales/en/messages.json

@@ -0,0 +1,5 @@
+{
+  "appDesc": {
+    "message": "Add point return labels in Amazon.co.jp Wishlist and Ranking Page."
+  }
+}

public/_locales/ja/messages.json

@@ -0,0 +1,5 @@
+{
+  "appDesc": {
+    "message": "Amazon.co.jpのウィッシュリストとランキングページに獲得できるポイントの表示を追加。"
+  }
+}

src/manifest.json → public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Devola: Amazon Wishlist Point Visualization",
   "short_name": "Devola",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "__MSG_appDesc__",
   "default_locale": "ja",
   "icons": {
@@ -20,12 +20,8 @@
         "https://www.amazon.co.jp/gp/movers-and-shakers/*"
       ],
       "css": [],
-      "js": [
-        "lib/jquery.js",
-        "js/functionOrder.js",
-        "js/wishlist.js",
-        "js/ranking.js"
-      ]
+      "js": ["js/base.js", "js/util.js", "js/ranking.js", "js/wishlist.js"],
+      "run_at": "document_end"
     }
   ]
 }

src/base.ts

@@ -0,0 +1,16 @@
+import { doWishlist } from "./wishlist";
+import { doRanking } from "./ranking";
+
+/** 処理全体のスターター */
+const start = () => {
+  let url = location.href;
+
+  // [ウィッシュリスト]ページの場合
+  if (url.indexOf("wishlist") != -1) {
+    doWishlist();
+  } else {
+    doRanking();
+  }
+};
+
+start();

src/ranking.ts

@@ -0,0 +1,36 @@
+import { fetchPoints } from "./util";
+
+/** ランキング上の商品ブロックを走査 */
+export const doRanking = () => {
+  const domain = location.protocol + "//" + location.host;
+
+  const allItems = document
+    .getElementById("zg-ordered-list")
+    ?.querySelectorAll("li");
+
+  allItems?.forEach((value, _index) => {
+    editItem(value, domain);
+  });
+};
+
+/** 商品ブロックに取得ポイントを追記 */
+const editItem = async (item: HTMLElement, domain: string) => {
+  // 商品のURLを取得
+  const selectorUrl = ".zg-item .a-link-normal";
+  const url = domain + item.querySelector(selectorUrl)?.getAttribute("href");
+
+  // 商品の取得ポイントを取得
+  const result = await fetchPoints(url);
+
+  // 価格要素を取得
+  const selectorPrice = ".zg-item .p13n-sc-price:last-child";
+  const priceTag = item.querySelector(selectorPrice);
+  if (priceTag == null) return;
+
+  // 価格要素に取得ポイントを追記
+  const pointTag =
+    '<span class="add-point a-size-small" style="margin-left: .6rem;"><span class="a-color-price">' +
+    result +
+    "</span></span>";
+  priceTag.insertAdjacentHTML("beforeend", pointTag);
+};

src/util.ts

@@ -0,0 +1,37 @@
+/** 商品URLから取得ポイントを取得 */
+export const fetchPoints = async (url: string) => {
+  const response = await fetch(url);
+  const resData = await response.text();
+  return parsePoints(resData);
+};
+
+/** 商品ページからポイント部分を取得 */
+const parsePoints = (data: string) => {
+  // セレクター
+  const normalItem1 =
+    "#addToCart #pointsInsideBuyBox_feature_div span.a-color-price";
+  const normalItem2 =
+    "#addToCart #buyBoxInner span.a-color-price:not(.offer-price)";
+  const kindleItem = ".loyalty-points .a-align-bottom";
+
+  // 取得ポイント部分のDOM
+  const dom = new DOMParser()
+    .parseFromString(data, "text/html")
+    .querySelector(`${normalItem1},${normalItem2},${kindleItem}`);
+  if (!dom || !dom.textContent) return "";
+
+  return escapeHtml(trimText(dom.textContent));
+};
+
+/** 文字列エスケープ */
+const escapeHtml = (unsafe: string) =>
+  unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+
+/** 文字列トリム */
+const trimText = (text: string) =>
+  text.replace(/\t/g, "").replace(/ /g, "").replace(/\r?\n/g, "");