ปัญหา
สืบเนื่องจากว่าผมจะทำ Frontend ด้วย Flutter พัฒนา Web ติดต่อกับ MetaMask extensions บน Google Chrome แต่ปัญหาคือเมื่อเราสั่งรันด้วย VSCode หรือสั่งผ่าน command line ด้วย flutter cli
flutter run -d chrome
flutter มันจะไปเปิด google chrome อีกตัวนึงขึ้นมา เป็น profile ใหม่ที่ไม่ได้ใช้ instance ตัวเดียวกับที่เราใช้กันอยู่ ที่แย่กว่านั้นคือ มันไม่ให้เราติดตั้ง extension ของ Google Chrome ด้วยน่ะสิ
ก็เลยใช้ 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
แต่เค้าก็มีเหตุผลนะ เหตุที่ต้องปิด extension ไว้ก็เพราะว่า ถ้าเปิดไว้จะทำให้เวลา รันแต่ละครั้งจะใช้เวลานานขึ้นนั่นเอง
วิธีแก้ปัญหา
ให้เข้าไปที่ path ที่ติดตั้ง flutter สำหรับผมใช้ macOS ติดตั้ง flutter ผ่าน brew นะ มันจะอยู่ที่
cd /usr/local/Caskroom/flutter/3.0.3/flutter
เข้าไปต่อที่ package > flutter_tools > lib > src > web
cd packages/flutter_tools/lib/src/web
นี่ไงเจอตัวปัญหาแล้ว!! เข้าไปแก้ไขไฟล์ chrome.dart กันได้เลย
เข้าไปจัดการ comment บรรทัดที่ --disable-extensions กันได้เลย
//'--disable-extensions',
ขั้นตอนสุดท้าย
เนื่องจากเราไปแก้ไข source code เราต้องให้ flutter มัน build tools นี้ใหม่ เพราะฉะนั้นเราต้องเข้าไปจัดการต่อดังนี้
กลับไปที่ flutter path ก่อน
cd /usr/local/Caskroom/flutter/3.0.3/flutter
เข้าไปต่อที่ bin > cache
cd bin/cache
ให้ทำการลบไฟล์ flutter_tools.stamp ทิ้งซะ
rm flutter_tools.stamp
สำเร็จแล้ว
กลับไปรัน flutter ที่โปรเจ็คเราใหม่อีกครั้ง
flutter run -d chrome
flutter มันจะไป build flutter tool ตัวใหม่ให้ .... ในที่สุดเราก็สามารถติดตั้ง Google Chrome extension ได้แล้วนะ
จบ
ได้ใช้ MetaMask extension ละ
ติดตามผลงานได้ที่
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
Top comments (0)