[Flutter翻譯]如何用Flutter 2.2.3建立Chrome擴充套件外掛

Sunbreak發表於2021-07-12
FlutterChrome套件

原文地址：yayocoding.blogspot.com/2021/07/how…

原文作者：yayocoding.blogspot.com/

釋出時間：2021年7月8日

如何用 Flutter 2.2.3 建立 Google Chrome 擴充套件程式 我們將學習如何用Flutter建立一個Google Chrome擴充套件。本文中的Flutter版本是Flutter 2.2.3。

我們將從預設專案開始，即我們都知道的計數器應用程式。

image.png

首先，我們將開啟index.html檔案，搜尋標籤<script>，因為我們將刪除裡面的所有內容。我們不需要這個指令碼，因為我們不需要PWA功能。

image.png

刪除之前的程式碼後，我們要在<body>標籤中新增一個新的指令碼。它將看起來像這樣。

<body>

<script src="main.dart.js" type="application/javascript"></script>

</body>
複製程式碼

注意：如果你想了解更多關於manifest.json的資訊，你可以訪問這個網站。歡迎來到manifest 3.

{
  "name": "flutter_chrome_extension",
  "description": "flutter_chrome_extension",
  "version": "1.0.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' ; object-src 'self'"
  },
  "action": {
    "default_popup": "index.html",
    "default_icon": "/icons/Icon-192.png"
  },
  "manifest_version": 3
}
複製程式碼

現在我們要用下一個命令來建立網路應用。

flutter build web --web-renderer html --csp
複製程式碼

然後我們將開啟Chrome瀏覽器，進入chrome://extensions/我們將點選Load unpacked，並選擇路由../build/web/。這個路由是在上一個步驟中生成的。

image.png

我們可以看到，擴充套件程式被成功新增。

image.png

但是有一個問題，如果我們點選擴充套件，我們只能看到一個很小的正方形。

image.png

我們回到檔案index.html，在<html>標籤中新增尺寸。

<html style="height: 600px; width: 350px">
複製程式碼

我們再次生成網路應用程式並重新載入擴充套件。現在它可以正常工作了。

image.png

結論

使用Flutter可以非常容易地建立谷歌瀏覽器擴充套件。你可以在Github上找到本文的原始碼

你可以在youtube上觀看視訊教程，記得啟用英文字幕。

www.youtube.com/watch?v=7U5…

www.deepl.com 翻譯

相關文章