puppeteerによるwebスクレイピングをブラウザでも行いたい。

前提・実現したいこと

puppeteerを用いたwebスクレイピングを、htmlファイルから呼び出したjsファイルで行いたいのですが、js
ファイルを呼び出した際のrequireのところでエラーが出てしまいます。node.jsにおけるモジュールをブラウザで使えないことが原因のように思うのですが、対策がわかりません。
具体的には仮想通貨の価格をスクレイピングで取得して、ブラウザ上にチャートで表示しようとしています。

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

Uncaught ReferenceError: require is not defined
    at chart.js:13

該当のソースコード

html
1//index.html
2<head>
3  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
4  <script type="text/javascript"
5  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
6  <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.2.0/chartjs-plugin-streaming.js"></script>
7  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.js"></script>
8  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> -->
9</head>
10
11<body>
12  <canvas id="bitbank"></canvas>
13
14  <script type="text/javascript"
15  src="./chart.js"></script>
16</body>
17

javascript
1//chart.js
2var buf = {};
3buf['bitbank'] =[]
4
5function sleep(time) {
6    const d1 = new Date();
7    while (true) {
8        const d2 = new Date();
9        if (d2 - d1 > time) {
10            return;
11        }
12    }
13}
14const puppeteer = require('puppeteer');
15puppeteer.launch().then(async browser => {
16  console.log('hoge')
17  const page = await browser.newPage();
18
19  await page.goto('https://inagoflyer.appspot.com/xrpmac');
20
21  while(true){
22
23    const recentPost = await page.$eval('#Bitbank_XRPJPY_lastprice', e => e.innerText);
24    await console.log(recentPost);
25    buf['bitbank'].push({
26      x: Date(),
27      y: recentPost
28    });
29    console.log(buf['bitbank'])
30    sleep(1000);
31  }
32
33  browser.close();
34});
35
36
37
38var id = 'bitbank';
39var ctx = document.getElementById(id).getContext('2d');
40var chart = new Chart(ctx, {
41    type: 'line',
42    data: {
43        datasets: [{
44            data: [],
45            label: 'bitbank',                     // 買い取引データ
46            borderColor: 'rgb(255, 99, 132)', // 線の色
47            backgroundColor: 'rgba(255, 99, 132, 0.5)', // 塗りの色
48            fill: false,                      // 塗りつぶさない
49            lineTension: 0                    // 直線
50        }, {
51            data: [],
52            label: 'Sell',                    // 売り取引データ
53            borderColor: 'rgb(54, 162, 235)', // 線の色
54            backgroundColor: 'rgba(54, 162, 235, 0.5)', // 塗りの色
55            fill: false,                      // 塗りつぶさない
56            lineTension: 0                    // 直線
57        }]
58    },
59    options: {
60        title: {
61            text: 'xrp/jpy (bitbank )', // チャートタイトル
62            display: true
63        },
64        scales: {
65            xAxes: [{
66                type: 'realtime' // X軸に沿ってスクロール
67            }]
68        },
69        plugins: {
70            streaming: {
71                duration: 300000, // 300000ミリ秒（5分）のデータを表示
72                refresh: 100,      // onRefresh callback will be called every 1000 ms
73                delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
74                pause: false,       // chart is not paused
75                onRefresh: function(chart) { // データ更新用コールバック
76
77                    Array.prototype.push.apply(
78                        chart.data.datasets[0].data, buf[id]
79                    );            // 買い取引データをチャートに追加
80
81                    buf[id] = []; // バッファをクリア
82                }
83            }
84        }
85    }
86});
87

試したこと

browserifyなどによってブラウザでもrequireが使えるということだったのですが、どのように用いれば良いのかよくわかりませんでした。
bwowserifyをinstallし、

browserify chart.js

とコマンド入力すると、下記のようなエラーが出ました。（そもそもこのコマンドの使い方が間違っているのかもしれませんが、、）
Error: module not found: "ws" from file /Users/hiroaki/bitcoin/javascript/kairi_chart/node_modules/puppeteer/lib/WebSocketTransport.js
at onresolve (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:182:30)
at /usr/local/lib/node_modules/browserify/index.js:530:20
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/index.js:247:21
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:18
at load (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:154:21)
hiros-mbp:kairi_chart hiroaki$ browserify chart.js
Error: module not found: "ws" from file /Users/hiroaki/bitcoin/javascript/kairi_chart/node_modules/puppeteer/lib/WebSocketTransport.js
at onresolve (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:182:30)
at /usr/local/lib/node_modules/browserify/index.js:530:20
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/index.js:247:21
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:18
at load (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:154:21)