Create first on-page IPM in ABP

Background / User story

We need to create a main CTA that is shown to inform users about our latest Premium feature.

What to change

• Design + copy: https://www.figma.com/file/MrrCGaK4rQEJYtPZohIsnc/On-Page-Dialog?node-id=2836%3A4739&t=idefsqhmphY5uA5v-1
• Research: https://www.notion.so/adblock/Bypass-Mode-IPMs-landing-page-bd6e92ebf88a41d492f6574c4ac4821d?pvs=4
• Spec: None, due to Code Red. Instead, see linked design and the basic requirements section below.
• Development:
  • Provide ability for message to specify triggers:
    • User navigated to a page.
  • Provide ability for message to specify targeting options:
    • Maximum number of occurrences
    • Delay between messages
    • Maximum/minimum time since page was allowlisted
  • Render on-page UI.
    • Utilize Shadow DOM or frame to avoid interference between HTML, CSS and JavaScript of guest and host.
    • If necessary, provide ability to customize UI for specific domains.
  • Establish a limited set of trusted messages for communication between background page and content script to:
    • Open a web page.
    • Indicate that the UI was interacted with.
  • In order to avoid web accessible resources and injection of various other extension resources, we may want to generate a single, self-contained UI bundle.
  • See also internal documentation.

Basic requirements

• the IPMs in general will contain either 1 or 2 paragraphs;
• the IPMs will support only one color for the time being (the gold one, see in Figma)
• there are only 2 IPMs shown to users, depending on the scenario they're in; see full user flow and scenarios, including what IPM they see here: https://miro.com/app/board/uXjVMdIIzZQ=/?moveToWidget=3458764549142025179&cot=14

Hints for testers

You can use the following preferences to configure the extension:

• logger_log_level: Set to 1 to output debug log messages in the background page console. By default, only warnings and errors are logged.
• onpage_dialog_timing_configurations: Contains on-page dialog timing configurations with parameters that are used to define the behavior behind the "timing" command parameter. For example, this can be used to not have to wait minutes/hours for something.

Functionality for manual testing can be found in code that was used during development (see commit).

End-to-end testing of this change can only be done when #1368 (closed) is in Feature QA.

Hints for translators

N/A