ویرگول
ورودثبت نام
ایمان یاراحمدی
ایمان یاراحمدی
خواندن ۲ دقیقه·۱ سال پیش

آموزش ساخت افزونه گوگل کروم با فلاتر

با سلام و وقت بخیر

امیدوارم که حالتون خوب باشه.

توی این مطلب میخوایم در مورد ساخت افزونه گوگل کروم با فلاتر صحبت کنیم.

من توی این مثال یک اپ crypto tracker رو به صورت افزونه منتشر کردم که شما میتونید سورس رو دانلود کنید و از اون استفاده کنید.

https://github.com/iManYarahmadi/crypto_extension_chrome

ولی در این مطلب آموزشی یک مثال خیلی ساده رو با هم پیش میبریم که بیشتر تمرکزمون روی روال ساخت افزونه باشه.

در ابتدا یک پروژه جدید میسازیم و یک متن خوش آمد در وسط صفحه میزاریم.

بعد با استفاده از دستور پایین پروژه خودمون رو روی مرورگر اجرا میکنیم که پوشه build برای وب ساخته شه.

flutter run -d Chrome

بعد با استفاده از دستور پایین پروژه خودمون رو روی مرورگر اجرا میکنیم که پوشه build برای وب ساخته شه.

برای ساخت افزونه باید چند مرحله رو طی کنیم که به ترتیب توضیح میدیم.

مرحله اول:

در فولدر web فایل index.html رو باز میکنیم و هر تگی که با شروع میشه رو از داخل فایل پاک میکنیم ، مثل تصویر زیر:

و بعد از پاک کردن تگ های تگ پایین رو به داخل تگ body اضافه می کنیم.

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

مرحله دوم:

نیاز هست یه سایز برای افزونمون تعیین کنیم که تگ زیر رو به تگ html اضافه میکنیم.

میتونید سایز رو به سایز دلخواه تغییربدین.

<html style=&quotheight: 600px; width: 350px&quot>

و در آخر فایل index.html ما به این صورت درمیاد.

مرحله سوم:

داخل فولدر web فایل manifest.json رو باز میکنیم و کل کد هارو پاک میکنیم و این کد ها رو جایگزین میکنیم.

{
   'name': 'Chrome Extension',
    'description&quot: '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

و بعد از اجرای دستور داخل فولدر پروژه در فولدر build میتونید خروجی رو ببینید و از بیلد نهاییمون به شکل زیر استفاده می کنیم.

وارد قسمت extension کروم میشیم. یا تکه کد زیر رو در قسمت سرچ وارد کنید.

chrome://extensions

وارد قسمت extension کروم میشیم. یا تکه کد زیر رو در قسمت سرچ وارد کنید.

گزینه developer mode رو در بالای صفحه فعال میکنیم.

بعد روی گزینه load unpacked کلیک میکنیم.

و وارد فولدر پروژه خودمون میشیم در قسمتbuild فولدر web رو بارگزاری میکنیم.

,
,

و به این صورت به افزونه ها اضافه میشه.

و میتونیم افزونمون رو اجرا کنیم.

امیدوارم که مطلب مورد پسندتون قرار گرفته باشه.

اگه دوست داشتین مطلب رو حتما لایک کنید و کامنت بزارین که بتونیم مطلب های بیشتری رو منتشر کنیم.

یاعلی.

ساخت افزونهکرومافزونهفلاترآموزش فلاتر
شاید از این پست‌ها خوشتان بیاید