If I use a background.js service worker to inject js into the web page. 

chrome.action.onClicked.addListener(async tab => { try { await chrome.scripting.executeScript({ target: { tabId: tab.id, allFrames: true, }, files: ["script.js"], }); } catch (erri) { console.error(failed to execute script: ${erri}); } });

The javascript is loaded. I can see this working because it adds a class to the document body.  

However,

If I add a popup.html to the manifest, that opens a popup with a checkbox when the extension button is clicked, the background.js service worker no longer injects the script and the class  is not added to the document body. 

I can’t work out why. 

I’d appreciate some guidance how to inject the script into the document (web page) and also be able to have the popup functionality.