Part of an extension I’m working on opens a local HTML file that is just an empty container into which the extension delivers HTML content. ( I won’t bore you with why but one of the main reasons is to have a unique indexedDB database for each local page separate from the extension. ) The extension injects a content script which request a communication port with the background script, and through that request the background script delivers the appropriate HTML which, up to now at least, has been stored in the background page in a set of template elements. After that is done, the background script injects CSS and JS files.
Two questions:
-
Is it inefficient to have the background page hold these templates? Inefficent in terms of taking up some memory, always being loaded in the browser, and having to retrieve and transfer them to the web page. Would it be better to build the HTML in the injected script, such as build the elements into a document fragment and then append the fragment into the empty HTML container? A second or two of extra load time is not an issue in this case.
-
Some of the content held in the templates are semi-complex layouts of a tabbed user interface in which each tab contains numerous menu elements and a “work” area, the point being that the CSS file isn’t very small. The question is, if it is more efficient to build the HTML in the JS file as opposed to storing them in the background page, would it be more efficient to add the styles to the elements as they are created in the JS instead of placing them all in the injected CSS file?
By efficient, here, I mean for the browser to both assemble the information and display it. The CSS file that the extension injects would be much smaller. The size of the files held in the extension may or may not overall be smaller because they are just being shifted between the background page, CSS file, and JS file. Would having a smaller or no CSS file result in a significant difference when the extension delivers the content and files to the empty container?
I’m not interested in design-team best practices for how code should be set up such that any team memebr can work on any project, etcetera. I’m just interested in how best to set up the extension to make it easiest for the browser to execute.
Thank you for considering my question.