質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

Chrome拡張機能の開発でcheerio-httpcliを使えるようにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 672

score 24

前提・実現したいこと

タイトル通りです。Chrome拡張機能ではデフォルトでnode_moduleを使いません。node_moduleを入れて、webpackでファイルをコンパイルしながらcheerio-httpcliを使えるようにしたいです。
(webpackを使うのはまずはJSで動かせるようになったソースコードをTypeScriptに置き換えてトランスパイルしたいからです)

発生している問題・エラーメッセージ

const path = require('path')

module.exports = {
  mode: 'development',
  entry: {
    popup: `${__dirname}/src/popup/js/popup.js`,
    content: `${__dirname}/src/content/content.js`,
    background: `${__dirname}/src/script/background.js`,
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { modules: false }]]
            }
          }
        ]
      }
    ]
  }
}
package.json

{
  "name": "compareresult",
  "version": "1.0.0",
  "main": "background.js",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yoshisansan/serach-compare.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/yoshisansan/serach-compare/issues"
  },
  "homepage": "https://github.com/yoshisansan/serach-compare#readme",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "cheerio": "^1.0.0-rc.3",
    "cheerio-httpcli": "^0.7.4",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {},
  "keywords": [],
  "description": ""
}
"npm run build" 後のエラーメッセージ
> webpack

Hash: 0f4787f35ab193820864
Version: webpack 4.43.0
Time: 4526ms
Built at: 2020-05-07 17:27:05
        Asset      Size      Chunks             Chunk Names
background.js  5.44 MiB  background  [emitted]  background
   content.js  4.25 KiB     content  [emitted]  content
     popup.js  4.05 KiB       popup  [emitted]  popup
Entrypoint popup = popup.js
Entrypoint content = content.js
Entrypoint background = background.js
 [0] readable-stream (ignored) 15 bytes {background} [built]
 [1] util (ignored) 15 bytes {background} [built]
 [2] util (ignored) 15 bytes {background} [built]
 [3] ./streams (ignored) 15 bytes {background} [built]
 [4] ./extend-node (ignored) 15 bytes {background} [built]
 [5] util (ignored) 15 bytes {background} [built]
[14] buffer (ignored) 15 bytes {background} [optional] [built]
 [./node_modules/cheerio-httpcli/lib sync recursive] ./node_modules/cheerio-httpcli/lib sync 160 bytes {background} [optional] [built]
 [./node_modules/cheerio-httpcli/lib/cheerio sync recursive ^\.\/.*$] ./node_modules/cheerio-httpcli/lib/cheerio sync ^\.\/.*$ 388 bytes {background} [built]
 [./node_modules/import-fresh sync recursive] ./node_modules/import-fresh sync 160 bytes {background} [built]
 [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {background} [built]
 [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {background} [built]
 [./src/content/content.js] 420 bytes {content} [built]
 [./src/popup/js/popup.js] 227 bytes {popup} [built]
 [./src/script/background.js] 652 bytes {background} [built]
    + 568 hidden modules

WARNING in ./node_modules/cheerio-httpcli/lib/encoding.js 49:64-79
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

WARNING in ./node_modules/import-fresh/index.js 31:31-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/spawn-sync/index.js
Module not found: Error: Can't resolve 'child_process' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/spawn-sync'
 @ ./node_modules/spawn-sync/index.js 3:17-41
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/request/lib'
 @ ./node_modules/request/lib/har.js 3:9-22
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/resolve-from'
 @ ./node_modules/resolve-from/index.js 4:11-24
 @ ./node_modules/import-fresh/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/resolve-from'
 @ ./node_modules/resolve-from/index.js 3:15-32
 @ ./node_modules/import-fresh/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/forever-agent'
 @ ./node_modules/forever-agent/index.js 6:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/request/node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/request/node_modules/tough-cookie/lib'
 @ ./node_modules/request/node_modules/tough-cookie/lib/cookie.js 32:10-24
 @ ./node_modules/request/lib/cookies.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/tunnel-agent'
 @ ./node_modules/tunnel-agent/index.js 3:10-24
 @ ./node_modules/request/lib/tunnel.js
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/forever-agent'
 @ ./node_modules/forever-agent/index.js 7:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/awakewalker/Documents/Engineering/JavaScript/ChromeAddOn/CompareResult/node_modules/tunnel-agent'
 @ ./node_modules/tunnel-agent/index.js 4:10-24
 @ ./node_modules/request/lib/tunnel.js
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/cheerio-httpcli/lib/client.js
 @ ./node_modules/cheerio-httpcli/lib/core.js
 @ ./node_modules/cheerio-httpcli/index.js
 @ ./src/script/background.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! compareresult@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the compareresult@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/awakewalker/.npm/_logs/2020-05-07T10_27_05_160Z-debug.log

試したこと

いろいろググってみたのですが、chrome拡張機能にnodeを導入するための情報があまりなく(古いものも多くスターターキットなども導入してみましたがバージョン違いなどのためか上手く動作できず)、一からwebpackを学習して設定するところから始めるにいたり今があります。

cheerio用のwebpackのパッケージをインストールする必要などがあるのでしょうか。
cheerioでなくて良いのでひとまずnpmパッケージをchrome拡張機能でも使える形でコンパイルする方法がわかるようになりたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

Chrome拡張は「ブラウザのJS」
cheerio-httpcliがnode.js専用ならなにをどうやっても絶対に動かない。

Electronでさえ無理ならChrome拡張でも無理。
https://github.com/ktty1220/cheerio-httpcli

どうしてもcheerio-httpcli使いたい場合はサーバーサイドで動くシステムを作って
Chrome拡張からはそのシステムとやり取り。
自分がChrome拡張作る場合はこの形が多い。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/08 03:49

    なるほど、Herokuと一緒に開発している英語記事などは見かけていたのですがそこまで必要か疑わしくて採用していませんでした。
    とはいえ、他の方の回答も一応まってみます。他に良い方法がなければHerokuかfirebaseのどちらかで検討します。ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る