Bloggang.com : thaiger_u - การสร้าง extension ของ Chrome ด้วย Flutter Web App

การสร้าง extension ของ Chrome ด้วย Flutter Web App

หลังพัฒนาเวบแอพ โดยใช้ Flutter แล้ว สามารถทำเป็น extension ของ Chrome ได้ดังนี้
* Flutter สามารถพัฒนาแอพ บน android, iphone และ web app ได้
1. ไฟล์ manifest.json เดิม ให้ลบออก และใช้ตามนี้
manifest.json
==========

{
    "name": "Calendar Ext",
    "version": "1.0",
    "description": "This is a flutter chrome extension",
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "browser_action": {
    "default_popup": "index.html",
    "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 2
}
2. index.html ในส่วน ที่มีการเรียกใช้ js script ให้แยกไป file ใหม่ เช่น fapp.html
index.html
=======
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">
  
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="ปฎิทินไทย">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
  <title>ปฎิทินไทย</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  
       <iframe height="540" width="360" src="fapp.html" frameborder="0"></iframe>
</body>
</html>

3. แยกส่วน ที่เรียกใช้ js script มาไว้ที่ไฟล์นี้
fapp.html
========
<!DOCTYPE html>
<html>
<body>
  
       
      <script src="main.dart.js" type="application/javascript"></script>
    </body>
</html>

หลังจาก build เป็นเวบแล้ว ให้ ไปที่ chrome => extension แล้วเลือก เมนู load unpack จะปรากฎ เมนูในส่วน extension ขึ้นมา

Create Date : 28 พฤษภาคม 2564
Last Update : 29 พฤษภาคม 2564 11:09:21 น.
Counter : 1036 Pageviews.

0 comments