Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[RFC] Overriding the html template

See original GitHub issue

How do you envision this feature/change to look/work like?

Users would like to override the index.html template wrapper used to contain the popup/options/etc scaffolds.

There are two potential way to implement this feature:

We have a popup/index.tsx AND a popup/_document.tx file that implements the override of the index.html
We exposes special component tags that get transformed (or rather, mounted) into the proper area of the original index.html -> this would be similar to the <Head> tag of Nextjs where it automatically mount the data inside into the Head

What is the purpose of this change/feature? Why?

Allow customization for style injection and other capabilities that can be done more easily if the template can be modified.

(OPTIONAL) Example implementations

(OPTIONAL) Contact Details

No response

Verify canary release

I verified that the issue exists in plasmo canary release

Code of Conduct

I agree to follow this project’s Code of Conduct
I checked the current issues for duplicate problems.

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

louisgvcommented, Jun 12, 2022

mounting it manually into the popup’s html template

Do you have an example of how to achieve this? Should I create a popup.html file? It is not clear to me how to use the popup/_document.tx file.

The _document.tsx feature is not implemented yet - it’s only at the RFC/drafting stage atm! 😅

In terms of the example for injecting style, something like this might work:

style.css

import "google.com-font-etc.css"

popup.tsx

import "./style.css"

popup.tsx

const linkTag = createFontLinktag()

document.head.appendChild(linkTag)

You might also need to add the remote font URLs to the manifest CSP policy: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#content-security-policy

To add to manifest in Plasmo: https://docs.plasmo.com/customization#overriding-the-manifest

1reaction

nahtnamcommented, Jun 6, 2022

Additional uses cases include:

Preloading fonts so there is no FOUT
Customizing the new tab page title

Top Results From Across the Web

HTML Format for RFCs RFC 7992 - IETF Datatracker

This document defines the HTML format that will be rendered for an RFC or ... as additional. o The HTML document will allow...

Guidelines for Writing RFC Text on Security Considerations

Abstract All RFCs are required to have a Security Considerations section. ... This allows administrators to set top level policies and override them...

SAP ChaRM - URL to Create RFC Based on Template

You need to override the CRM-OBJECT-TYPE for rfc template. Complete guide here:- (Maintain the UI object type which is mentioned there). http:// ...

Class-based views - Django documentation

Consider, for example, a view that just displays one template, about.html . ... this - TemplateView - so we can subclass it, and...

FOSUserBundle template override not working with Symfony ...

I can't override default FOSUserBundle templates. I tried to do everything following the Symfony documentation, tutorials and nothing works.