DEV Community

codebangkok
codebangkok

Posted on • Updated on

Flutter - Run on Chome with Extensions

ปัญหา

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

flutter run -d chrome
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

ก็เลยใช้ 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

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

วิธีแก้ปัญหา

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

cd /usr/local/Caskroom/flutter/2.5.1/flutter
Enter fullscreen mode Exit fullscreen mode

Alt Text

เข้าไปต่อที่ package > flutter_tools > lib > src > web

cd packages/flutter_tools/lib/src/web
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

//'--disable-extensions',
Enter fullscreen mode Exit fullscreen mode

Alt Text

ขั้นตอนสุดท้าย

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

กลับไปที่ flutter path ก่อน

cd /usr/local/Caskroom/flutter/2.5.1/flutter
Enter fullscreen mode Exit fullscreen mode

เข้าไปต่อที่ bin > cache

cd bin/cache
Enter fullscreen mode Exit fullscreen mode

ให้ทำการลบไฟล์ flutter_tools.stamp ทิ้งซะ

rm flutter_tools.stamp
Enter fullscreen mode Exit fullscreen mode

Alt Text

สำเร็จแล้ว

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

flutter run -d chrome
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Alt Text

จบ

ได้ใช้ MetaMask extension ละ
Alt Text

ติดตามผลงานได้ที่

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

Discussion (0)