I'm making a chrome extension that invokes a content script called main.js
. The main.js
injects a content script content.js
into a current web pages DOM <script type="module" src="chrome-extension://xxxxx/content.js"></script>
. There are basically some buttons that get inserted onto any web page that you visit and content.js has the function that call an API to get data.
The thing is, when the html button is pressed and makes an API call using the javascript fetch method (I included this method in my content.js file), the origin of the request comes from whatever web page you visit and press the button on. I want to get the API request origin to show as chrome-extension://xxx
, and this worked as a test when I put the api call in background.js
, for example. So I'm trying to think where I can put the API call function or how to call it so it's not being called as origin from the webpage.
Is there a way that I could "message" some backend component to invoke a function from so the API call to fetch data happens outside of the DOM?