Flutter Web: Create A Chrome Extension

[hhstore]

related:

• [x] #234
• [x] #316

[hhstore]

基于 flutter web 开发 chrome 插件:

google 开发者账号注册:

注册为 Chrome 网上应用店开发者

• https://chrome.google.com/webstore/devconsole/register?hl=zh-CN
• 注册费用: 5美元/一次性.

参考:

• https://segmentfault.com/a/1190000009623628

文档:

360 翻译的文档:

• https://open.chrome.360.cn/extension_dev/overview.html
• https://open.chrome.360.cn/extension_dev/getstarted.html
• 因为360的浏览器是 chrome 内核. so 他们自然好心的帮忙翻译了文档.

chrome API:

• https://developer.chrome.com/docs/extensions/reference/#api-conventions
• http://www.kkh86.com/it/chrome-extension-doc/apps/api_index.html

开发 chrome 插件:

• https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
  • ⭐⭐⭐⭐⭐
• https://learnku.com/articles/6513/record-the-development-process-of-a-chrome-extension
• https://juejin.cn/post/6904797929056239630
• https://www.cnblogs.com/coco1s/p/8004510.html
• https://www.zhihu.com/question/20179805
• https://juejin.cn/post/6844904127932137485

发布 chrome 插件:

• https://juejin.cn/post/6907214824216723464
• https://support.google.com/chrome/a/answer/2714278?hl=zh-Hans
• https://juejin.cn/post/6844903568705585159

流程:

1. 开发
2. 打包成 .zip 格式

[hhstore]

flutter web 开发 chrome 插件:

libs:

• https://pub.dev/packages/chrome
• 很可惜, 不维护了. 不过可以参考代码
• https://github.com/dart-gde/chrome.dart

参考:

• https://medium.com/@dailyfluttermonster/how-to-create-a-flutter-chrome-extension-1293d75b887b
• flutter web 本身是 PWA 模式, 天然适合开发 chrome 插件.

示例:

有效插件:

• https://github.com/Yayo-Arellano/flutter_chrome_extension
  • https://www.reddit.com/r/FlutterDev/comments/og8r3t/create_a_google_chrome_extension_in_less_than/
  • https://www.yayocode.com/2021/07/how-to-create-google-chrome-extension.html
  • https://juejin.cn/post/6983913852362571784

#  chrome 插件: 必须带 --csp 参数
flutter build web --web-renderer html --csp

--csp  Disable dynamic generation of code in the generated output. This is necessary to satisfy
                                       CSP restrictions (see http://www.w3.org/TR/CSP/).

• https://github.com/Asti7/clip
  • 这个 flutter 写的插件, 上架到 chrome 商店了. 还比较完整.
  • https://github.com/Asti7/clip/blob/master/web/index.html#L21

其他:

• https://github.com/rodydavis/dart_pad_ext/blob/color_change/tool/popup.html#L19
• https://github.com/Mattds825/chrome_ext/blob/master/web/index.html#L24

demo 示例:

• 功能正常, 页面样式有些不正常. 待修复.

修复样式不正常: 是禁用了这个设计

flutter: 
  uses-material-design: true   # false

[hhstore]

有趣的插件:

• 写一个chrome插件来实现网站的自动登录
  • 通过插件练手

[hhstore]

1

[hhstore]

xxxxxx:

xxxxxxxxxxxxxx	xxxxxxxxxxxxxx	xxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx