Q&A
前提・実現したいこと
タイトル通りです。Chrome拡張機能ではデフォルトでnode_moduleを使いません。node_moduleを入れて、webpackでファイルをコンパイルしながらcheerio-httpcliを使えるようにしたいです。
（webpackを使うのはまずはJSで動かせるようになったソースコードをTypeScriptに置き換えてトランスパイルしたいからです）
発生している問題・エラーメッセージ
webpack.config.js
1const path = require('path') 2 3module.exports = { 4 mode: 'development', 5 entry: { 6 popup: `${__dirname}/src/popup/js/popup.js`, 7 content: `${__dirname}/src/content/content.js`, 8 background: `${__dirname}/src/script/background.js`, 9 }, 10 output: { 11 filename: '[name].js', 12 path: path.resolve(__dirname, 'public') 13 }, 14 module: { 15 rules: [ 16 { 17 test: /.js$/, 18 include: path.resolve(__dirname, 'src'), 19 exclude: /node_modules/, 20 use: [ 21 { 22 loader: 'babel-loader', 23 options: { 24 presets: [['@babel/preset-env', { modules: false }]] 25 } 26 } 27 ] 28 } 29 ] 30 } 31}
json
1package.json 2 3{ 4 "name": "compareresult", 5 "version": "1.0.0", 6 "main": "background.js", 7 "scripts": { 8 "build": "webpack" 9 }, 10 "repository": { 11 "type": "git", 12 "url": "git+https://github.com/yoshisansan/serach-compare.git" 13 }, 14 "author": "", 15 "license": "ISC", 16 "bugs": { 17 "url": "https://github.com/yoshisansan/serach-compare/issues" 18 }, 19 "homepage": "https://github.com/yoshisansan/serach-compare#readme", 20 "devDependencies": { 21 "@babel/core": "^7.9.6", 22 "@babel/preset-env": "^7.9.6", 23 "babel-loader": "^8.1.0", 24 "cheerio": "^1.0.0-rc.3", 25 "cheerio-httpcli": "^0.7.4", 26 "webpack": "^4.43.0", 27 "webpack-cli": "^3.3.11" 28 }, 29 "dependencies": {}, 30 "keywords": [], 31 "description": "" 32}
"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拡張機能でも使える形でコンパイルする方法がわかるようになりたいです。
回答1件
0
ベストアンサー
Chrome拡張は「ブラウザのJS」
cheerio-httpcliがnode.js専用ならなにをどうやっても絶対に動かない。
Electronでさえ無理ならChrome拡張でも無理。
https://github.com/ktty1220/cheerio-httpcli
どうしてもcheerio-httpcli使いたい場合はサーバーサイドで動くシステムを作って
Chrome拡張からはそのシステムとやり取り。
自分がChrome拡張作る場合はこの形が多い。
投稿2020/05/07 10:57
総合スコア10377
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/07 18:49