options_page as index.html/#options

[jarrodcolburn]

Expected Behavior:
Implemented as a single web app

Actual Behavior:
Package's README.md example manifest.json contains "options_page": "options.html" adding a second .html file (for options, in addition to index.html)

Fix:
Reference additional pages using anchor tags #. So in example, options page in manifest.json would be...
"options_page": "index.html#options"

// main.dart
 
final Map<String, Widget Function(BuildContext)> routes = {
  'options': (_)=>OptionsPage() // <= !! allows accessing page with anchor tags
};

MaterialApp( 
  routes: routes,
  // ...rest of main material app
);

class OptionsPage extends StateFullWidget {
  // ...create class to allow people to set options
}

[xvrh]

That is a good alternative. Thanks for bringing that up.

[jarrodcolburn]

learn from my mistake...
Set the open_in_tab to true as in following...

// manifest.json
    "options_ui": {
        "page": "index.html#options", 
        "open_in_tab": true // <======= set as true !!!
    },
   // also launch popUp with `#` anchor also
   "action": {
        "default_popup": "index.html#popup"
    },

...is much easier.

(The only alternative way I could get it show up if false is to set the height and width for html>head>style in index.html. But that causes problems with the pop-up.)

Thankfully, the pop-up dimensions can be set within Dart. For example

// main.dart
import 'package:web/web.dart' as web;

void sizePopUp({required int height, required int width}) {
  final styleTag = web.document.createElement('style');
  styleTag.textContent = 'html { ${width}px; ${height}px }';
  web.document.head?.append(styleTag);
}

final Map<String, Widget Function(BuildContext)> routes = {
  // options route..
  'popup': (_){ 
  sizePopUp(height:300, width: 600);
  return PopUpPage();
  }
}

class PopUpPage extends StateFullWidget {
  // ...create pop-up screen
}