Flutter - Run on Chome with Extensions
Tags: flutter, dart
Published: 2021-08-19 15:32:15

## ปัญหา
สืบเนื่องจากว่าผมจะทำ Frontend ด้วย Flutter พัฒนา Web ติดต่อกับ MetaMask extensions บน Google Chrome แต่ปัญหาคือเมื่อเราสั่งรันด้วย VSCode หรือสั่งผ่าน command line ด้วย flutter cli

```dart
flutter run -d chrome
```

flutter มันจะไปเปิด google chrome อีกตัวนึงขึ้นมา เป็น profile ใหม่ที่ไม่ได้ใช้ instance ตัวเดียวกับที่เราใช้กันอยู่ ที่แย่กว่านั้นคือ มันไม่ให้เราติดตั้ง extension ของ Google Chrome ด้วยน่ะสิ 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk5sobcczicrzbp0chgx.png)

ก็เลยใช้ MetaMask extension ไม่ได้ทันที ต้องไปเปิด Chrome ปกติขึ้นมาอีกตัว แล้ว copy url ไปใส่ ถึงจะใช้ MetaMask extension ได้ ซึ่งมันไม่สะดวกเลยเพราะมันทำ Hot Reload ไม่ได้

## สาเหตุของปัญหา
หลังจากที่ไปค้นหาใน issue ของ flutter ก็ได้เจอสาเหตุของปัญหาแล้วก็ไปค้นพบว่าที่ sourrce code ของ flutter tools ใน github https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/web/chrome.dart

ที่ฟังชั่น launch มีเขียนไว้ที่ตัวแปร args ไว้ว่า `--disable-extensions`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjsurvmwhdfm6e3nmypy.png)

แต่เค้าก็มีเหตุผลนะ เหตุที่ต้องปิด extension ไว้ก็เพราะว่า ถ้าเปิดไว้จะทำให้เวลา รันแต่ละครั้งจะใช้เวลานานขึ้นนั่นเอง

## วิธีแก้ปัญหา
ให้เข้าไปที่ path ที่ติดตั้ง flutter สำหรับผมใช้ macOS ติดตั้ง flutter ผ่าน brew นะ มันจะอยู่ที่ 

```sh
cd /usr/local/Caskroom/flutter/3.0.3/flutter
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzfmts5jy68ne8ckk8hh.png)

เข้าไปต่อที่ package > flutter_tools > lib > src > web
```sh
cd packages/flutter_tools/lib/src/web
```

นี่ไงเจอตัวปัญหาแล้ว!! เข้าไปแก้ไขไฟล์ chrome.dart กันได้เลย

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o29rdkjd6yesmwfhlvyp.png)

เข้าไปจัดการ comment บรรทัดที่ `--disable-extensions` กันได้เลย

```dart
//'--disable-extensions',
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2thlea9smqlvq2klf19.png)

### ขั้นตอนสุดท้าย
เนื่องจากเราไปแก้ไข source code เราต้องให้ flutter มัน build tools นี้ใหม่ เพราะฉะนั้นเราต้องเข้าไปจัดการต่อดังนี้

กลับไปที่ flutter path ก่อน
```sh
cd /usr/local/Caskroom/flutter/3.0.3/flutter
```

เข้าไปต่อที่ bin > cache
```sh
cd bin/cache
```

ให้ทำการลบไฟล์ flutter_tools.stamp ทิ้งซะ
```sh
rm flutter_tools.stamp
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8roys16y7lq5ez03owl.png)

### สำเร็จแล้ว
กลับไปรัน flutter ที่โปรเจ็คเราใหม่อีกครั้ง

```dart
flutter run -d chrome
```

flutter มันจะไป build flutter tool ตัวใหม่ให้ .... ในที่สุดเราก็สามารถติดตั้ง Google Chrome extension ได้แล้วนะ

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0di381p47zan66de7n0.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7sc9uugxfkev2jgiuvw.png)

### จบ
ได้ใช้ MetaMask extension ละ
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7tkb7hvp0jgpyjpp8oe.png)

### ติดตามผลงานได้ที่
Page: https://fb.com/CodeBangkok​
Group: https://fb.com/groups/msdevth​
Blog: https://dev.to/codebangkok
YouTube: https://youtube.com/CodeBangkok
Twitter: https://twitter.com/surasuk612