Flutter JavaScript注入插件inject_js的使用

Flutter JavaScript注入插件inject_js的使用

插件简介

inject_js 插件可以在 dart2js 和 flutter web 中用于将 JavaScript 库或代码注入到页面中。它基于 flutter_web_import_js_library，但简化了功能以在不依赖 Flutter 的情况下工作，并扩展了直接注入 JavaScript 代码的功能。

在 dart:vm 平台上，该插件中的函数会抛出 UnsupportedError 异常，因此仅适用于 Web 环境。

使用示例

1. 不使用 Flutter 的示例

以下是一个不使用 Flutter 的简单示例，展示了如何使用 inject_js 插件将 JavaScript 代码注入到网页中。

步骤：

1. 创建一个新的 Dart 项目。

2. 在 pubspec.yaml 文件中添加 inject_js 依赖：

   dependencies:
     inject_js: ^latest_version
   

3. 编写 Dart 代码（bin/main.dart）：

   import 'package:inject_js/inject_js.dart';
   
   void main() {
     // 注入一段简单的 JavaScript 代码
     injectJs(r'''
       console.log('Hello from injected JavaScript!');
     ''');
   
     // 注入一个外部 JavaScript 文件
     injectJsUrl('https://example.com/path/to/your.js');
   }
   

4. 编译并运行：

   dart compile js ./bin/main.dart -o ./web/main.dart.js
   

5. 打开 web/index.html 文件并在浏览器中查看效果。

2. 使用 Flutter 的示例

以下是一个使用 Flutter 的示例，展示了如何在 Flutter Web 项目中使用 inject_js 插件。

步骤：

1. 创建一个新的 Flutter Web 项目：

   flutter create my_flutter_web_project
   cd my_flutter_web_project
   

2. 在 pubspec.yaml 文件中添加 inject_js 依赖：

   dependencies:
     inject_js: ^latest_version
   

3. 修改 lib/main.dart 文件，添加 JavaScript 注入代码：

   import 'package:flutter/material.dart';
   import 'package:inject_js/inject_js.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Flutter Web with inject_js'),
           ),
           body: Center(
             child: ElevatedButton(
               onPressed: () {
                 // 注入一段简单的 JavaScript 代码
                 injectJs(r'''
                   alert('Hello from injected JavaScript!');
                 ''');
   
                 // 注入一个外部 JavaScript 文件
                 injectJsUrl('https://example.com/path/to/your.js');
               },
               child: Text('Inject JavaScript'),
             ),
           ),
         ),
       );
     }
   }
   

4. 运行 Flutter Web 项目：

   flutter run -d chrome
   

完整示例 Demo

为了提供一个完整的示例 Demo，我们可以结合上述两个示例，创建一个包含 Flutter Web 项目的完整工程，并在其中集成 inject_js 插件。

项目结构

my_flutter_web_project/
├── lib/
│   └── main.dart
├── web/
│   ├── index.html
│   └── main.dart.js
├── pubspec.yaml
└── README.md

pubspec.yaml

name: my_flutter_web_project
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  inject_js: ^latest_version

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:
  uses-material-design: true

lib/main.dart

import 'package:flutter/material.dart';
import 'package:inject_js/inject_js.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Web with inject_js'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 注入一段简单的 JavaScript 代码
                  injectJs(r'''
                    console.log('Hello from injected JavaScript!');
                    alert('Hello from injected JavaScript!');
                  ''');
                },
                child: Text('Inject Simple JS Code'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 注入一个外部 JavaScript 文件
                  injectJsUrl('https://example.com/path/to/your.js');
                },
                child: Text('Inject External JS File'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

web/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flutter Web with inject_js</title>
  <script src="main.dart.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>