Qiitaのトレンド記事を無理やり見させるChrome拡張をTypeScriptで作った

{
  "name": "qiita-miro",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Force to look Qiita article of trend",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./js/force.ts.bundle.js"]
    }
  ],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": ["storage"],
  "web_accessible_resources": ["src/js/*"]
}

private static async getQiitaArticleOfTrend(): Promise<Article[]> {
  const url = "https://qiita.com/";

  axios.defaults.baseURL = "http://localhost:3000";
  axios.defaults.headers.post["Content-Type"] =
    "application/json;charset=utf-8";
  axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
  return await axios
    .get(url)
    .then(({ data }) => {
      return this.fetchTrend(data);
    })
    .catch((err) => {
      return [];
    });
}

private static fetchTrend(html: string): Article[] {
  const $ = cheerio.load(html);
  const raw =
    $("script[data-component-name=HomeArticleTrendFeed]").html() ?? "";
  if (raw === undefined) return [];
  const rawData = JSON.parse(raw).trend.edges;

  return rawData.map((obj: any) => {
    delete obj.followingLikers;
    delete obj.isLikedByViewer;
    return obj;
  });
}

// モジュールインポート
const path = require("path");
const glob = require("glob");

// ソースファイルを検索してビルド用の配列を生成する
const srcDir = "./src";
const entries = glob
  .sync("**/*.ts", {
    ignore: "**/_*.ts",
    cwd: srcDir
  })
  .map(function (key) {
    return [key + ".bandle.js", path.resolve(srcDir, key)];
  });
const entryObj = Object.fromEntries(entries);

module.exports = {
  entry: entryObj, // 上記で生成したビルド用の配列を指定する
  output: {
    path: path.join(__dirname, "public"),
    filename: "[name]"
  }
};

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "./src/manifest.json",
          to: "manifest.json"
        }
      ]
    })
  ]
};