Replace script injection for the chrome and edge extensions with the new manifest 3 version

What are chrome/edge extensions?

Chrome and Edge extensions enhance the browsing experience by customizing the user interface, monitoring browser events, and modifying web content. You can explore various examples of extensions in the Chrome Web Store.

In June 2025, Chrome and Edge will phase out Manifest V2, requiring extensions to be reimplemented using Manifest V3. More details about the new architecture can be found in the official migration guide.  If you need help with migrating, contact us.

In this blog we want to share knowledge how to do it for the script injection. We will reference the chrome extension but as edge is using also chromium engine the same applies for the edge.

Script injection in chrome extensions is widely used ,  the usecase why we use chrome extension for the Siebel CRM  and how we improved it by using script injection.

Typical usecase to use script injection is to react on certain url request which needs to be processed and in the web application some usage pattern tracking or page navigation needs to be triggered.

The construct looks like :

const script = document.createElement('script');
script.textContent = console.log('This part is injected');
(document.head || document.documentElement).appendChild(script);
script.remove();

This is not anymore possible in chrome extension manifest v3. Instead following pattern can be used :

Messaging between background service_worker.js and content_script.js which runs in window DOM of the webpage.

 

Let us have a url request, on which service_worker.js reacts :

 chrome.webRequest.onBeforeRequest.addListener(
	function(details) {
		if ((typeof referenceTabIds[details.tabId] === "undefined" || referenceTabIds[details.tabId] === false) && isSblUrlPattern(details.url) && details.frameId == "0") 
		{	
			console.log('Sending URL for CTI to content script with url '+paramURL);						
			//Migrated script injection for CTI and replaced with messaging to content script -> Siebel CRM
			chrome.tabs.sendMessage(foundTab.id,{url: paramURL,type : 'MOBISiebelSingletonCTI'},function(response)
				{console.log(response);}
			);					
		}
		return {cancel: false}
	},
	{urls: sblTabFilters,
	types: ['main_frame']
});		

 The content_script.js running with web page in extension sandbox but sharing browser DOM model with the web

 console.log('Init Siebel content script Siebel')
//MPi 21.03.2025 Handler for CTI Inbound
function navigateCTIURLHandler(url) {
          try {
            window.postMessage(
                {type : "MOBISiebelSingletonCTI", text : url}, "*");
          } 
          catch(e) {
            console.log(e);
          }
          finally {         
          }
}
 //Init listener from service worker               
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            console.log("Received from Singleton:", request.type);
            sendResponse({ response: "Received M24 service worker request in content script" });
            if (request.type == 'MOBISiebelSingletonCTI') {
                console.log('Received from service worker in content script CTI request for url '+request.url);
                navigateCTIURLHandler(request.url);
            }
          });			

 The webpage can instead of having injected the script into header section, executed and removed listen to messaging and react if an event is sent from content_script.js

 window.addEventListener("message", (event) => {
                        console.log('Siebel received before check of source :'+event.data.type);
                        // We only accept messages from ourselves
                        if (event.source !== window) {
                            return;
                        }
                        if (event.data.type && (event.data.type === "MOBISiebelSingletonCTI")) {
                            console.log("Siebel after check is processing: " + event.data.type);
                            MOBICTIM24Handler(event.data.text);                           
                        }                     
                    }, false); 

We have showed how to migrate script injection used in chrome/edge extension up to manifest version 2. With manifest v3 it is not supported so new pattern has to be implemented. There are several patterns which needs to be changed so we recommend appoint experienced team like us, CCW,s.r.o.