Inject HTML into a page from a content script

by

Yes, that’s possible. Use chrome.runtime.getURL to get an absolute URL for the resource. For example:

Step 1 (standard JavaScript):

fetch(chrome.runtime.getURL('/template.html')).then(r => r.text()).then(html => {
  document.body.insertAdjacentHTML('beforeend', html);
  // not using innerHTML as it would break js event listeners of the page
});

Step 1 (jQuery):

$.get(chrome.runtime.getURL('/template.html'), function(data) {
    $(data).appendTo('body');
    // Or if you're using jQuery 1.8+:
    // $($.parseHTML(data)).appendTo('body');
});

Step 2:

Register the resource in the manifest.json under web_accessible_resources:

  "web_accessible_resources": [
    "template.html",
    "foo.jpg"
  ]

More Related Contents:

  1. How to access the webpage DOM rather than the extension page DOM?
  2. How can I get the URL of the current tab from a Google Chrome extension?
  3. How to stop CORB from blocking requests to data resources that respond with CORS headers?
  4. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  5. How can I open my extension’s pop-up with JavaScript?
  6. Since v38, Chrome extension cannot load from HTTP URLs anymore, workaround?
  7. chrome extension mv3 – Modularize service worker js file
  8. Detect Chrome extension first run / update
  9. Disable developer mode extensions pop up in Chrome
  10. Modifying the built-in newtab page
  11. Start an external application from a Google Chrome Extension?
  12. Chrome Extension Content Script on https://chrome.google.com/webstore/
  13. Chrome Extension: how to capture selected text and send to a web service
  14. Where does Chrome store extensions?
  15. How can I get the current tab URL for chrome extension?
  16. Is it possible to run Google Chrome in headless mode with extensions?
  17. Using ECMAScript 6
  18. Content script matching top-level domains like all google.*
  19. How to download a CRX file from the Chrome web store for a given ID? [closed]
  20. How can I enable my chrome extension in incognito mode?
  21. Insert an image in chrome extension
  22. How to disable (gray out) page action for Chrome extension?
  23. chrome.identity User Authentication in a Chrome Extension
  24. Is it possible to inject a javascript code that OVERRIDES the one existing in a DOM? (e.g default alert function)
  25. Cross-origin request in a content script is blocked by CORB despite the correct CORS headers
  26. How to make a cross-origin request in a content script (currently blocked by CORB despite the correct CORS headers)?
  27. Prevent chrome.notifications API from hiding my notification after a few seconds
  28. Google Chrome Extensions – Open New Tab when clicking a toolbar icon
  29. Passing message from background.js to popup.js
  30. Accessing `window`/DOM/HTML of the webpage from the extension

Leave a Comment