1

I'm trying to have my background.js receive information from my event.js (they are both running as background scripts) or at least allow background.js to use a function from event.js.

Why do I want to do this:

I have set up my code so that background.js handles the main tasks.

My content-scripts need saved information now and then from chrome.storage so they need to send a message to a background page.

In order to keep the code organized, I create another background page called event.js with chrome.runtime.onMessage listener and all the functions for doing the requested tasks coming from the content scripts.

Then I realize that background.js also needs to do some of those same functions, so in order to not duplicate the code, I have background.js use chrome.runtime.sendMessage to event.js.

The expected result is that event.js communicates with background.js as successfully as the content-scripts do.

The actual result is that the event.js never receives any messages from background.js.

I've read the documentation on background pages and on message passing trying to find the answer or a hint.

Is there some reason these two pages cannot communicate through messagePassing? If so, how can I successfully pass information or functions between these two pages?

Improve this question
5
  • 2
    There's only one background page so all background scripts run inside that one page. You can see it in devtools for the background page. They all run in the same global context and share the same DOM. You don't need to send messages inside the page to pass data. The API won't let you do it. Just invoke your function(s) directly or via require if you use it. Commented Jul 10, 2018 at 15:07
  • @wOxxOm Oh I see! But now when I try to invoke an event.js function from background.js, it says that function is not defined and it appears that it's attempting to invoke it before event.js loads. Commented Jul 10, 2018 at 15:26
  • Good, now you have something to work on. Use devools for the background page to set breakpoints and inspect the variables etc. You can press F5 or run location.reload() to quickly reload the background page so it'll trigger breakpoints you've set and you'll see what happens when it loads. Commented Jul 10, 2018 at 15:38
  • See also What is the difference between background pages and background scripts? - as you can see the scripts are standard DOM scripts which run sequentially in the specified order just like any other page script loaded using the standard <script src="foo"></script> Commented Jul 10, 2018 at 15:42
  • 1
    @wOxxOm Great, thank you. Totally get it now. I simply listed event.js first in the manifest to ensure it loads first. If you could copy your comments into an answer, then I can upvote and accept it. (BTW I noticed you answer often in comments and many chrome-extension questions are left with an appearance of 0 answers) Commented Jul 10, 2018 at 15:50

1 Answer 1

Reset to default
2

All background scripts, if defined in the same list in the manifest file, will see everything that is defined.

So, if you add them to the manifest in the "correct order", the last script will see all vars and functions from the previous scripts.

If you're using the same function in both background.js and event.js, maybe you could create a background_funcs.js simply to define all common functions and put it as the first in your manifest.

This way the others will see everything defined in it.

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

2 Comments

With that suggestion about background_funcs.js, I've been able to greatly improve the organization of my background scripts. If WOxxOm doesn't create his own answer soon, I'll accept this answer instead.
Fair enough :))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.