Better way to inject HTML/CSS onto webpage?

Question

I have a Chrome Extension that is injecting HTML/CSS into Google search pages from the Content Script.

Currently, I'm doing this using insertAdjacentHTML() and a long single string of HTML.

Relevant code snippets:

const chosenElements = document.getElementsByClassName('r');

for (var i = 0; i < chosenElements.length; i++) {
    chosenElements[i].insertAdjacentHTML('afterbegin', createHTML(name));
}

function createHTML(name) {
  return (
    '<a style="display: flex; justify-content: center; .... font-weight: 500;" href="https://www.mywebsite.com/">Click here to go to ' +
    name +
    ' website</a>'
  );

This does the right thing, and adds the HTML/CSS to the page, but is a pretty impractical method of doing this for me, as I want to greatly expand the HTML and CSS of the injected content, and doing so in one big line like this isn't going to really work.

Is there a better method of doing this injection?

Thinking of something like linking to a separate HTML file that has its own CSS file styling, or something similar.

Thanks.

sheng · Accepted Answer · 2019-04-24 11:55:26Z

1

Check out template strings. They're pretty well supported across the board (Can I use), and 100% supported in Chrome.

This uses backtick characters instead of quotes or single quotes to create a string, along with easy interpolation.

function createHTML(name) {
  return (
    '<a style="display: flex; justify-content: center; .... font-weight: 500;" href="https://www.mywebsite.com/">Click here to go to ' +
    name +
    ' website</a>'
);

becomes

function createHTML(name) {
  return (
    `<a style="display: flex; justify-content: center; font-weight: 500;"
        href="https://www.mywebsite.com/">
       Click here to go to ${name} website
     </a>` 
);

You'll still have all your code in a single file, but it'll be much easier to grok. Hope that helps!

answered Apr 24, 2019 at 11:55

sheng

1,3808 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chivs688 Over a year ago

Ah yes I keep forgetting to use template strings, have swapped to using them instead of using the single quotes, thanks. Is this the only way to do it then do you think? No way of using a separate HTML file?

sheng Over a year ago

@chivs688 I can't think of a good way to use a separate HTML file. You might try splitting up your JS files into "template" files and including multiple <script src> tags, or if you're using something like Webpack, using imports.

chivs688 Over a year ago

@ I've just been playing with using an iframe to load a local html file, and it seems to have worked!

sheng Over a year ago

@chivs688 I mean sure, you could also do a fetch or XHR request to code split (I think, should work in Chrome extensions), but I wouldn't necessarily recommend it. There's nothing really wrong, just the extra requests. Iframe works the same

Collectives™ on Stack Overflow

Better way to inject HTML/CSS onto webpage?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related